diff -urp includes/galleryformatter.theme.inc includes/galleryformatter.theme.inc --- includes/galleryformatter.theme.inc 2010-10-19 07:54:29.000000000 -0700 +++ includes/galleryformatter.theme.inc 2011-03-02 11:22:13.000000000 -0800 @@ -56,13 +56,20 @@ function template_preprocess_galleryform // prepare the unique hash id per image $slideset_id = $vars['element']['#field_name'] .'-'. $vars['element']['#node']->nid; $hash_id = 'slide-'. $id .'-'. $slideset_id; + $thumb_id = 'slide-'. $id; // prepare slides - $slides[$id]['image'] = theme('imagecache', $slide_preset, $filepath, $alt, $title); - if(!empty($field['data']['title'])) { $slides[$id]['title'] = check_plain($title); } - $slides[$id]['description'] = check_plain($description); - $slides[$id]['filepath'] = $filepath; - $slides[$id]['hash_id'] = $hash_id; + $slides[$hash_id]['image'] = theme('imagecache', $slide_preset, $filepath, $alt, $title, array('id'=>$hash_id, 'class'=>'preLoaded')); + $slides[$hash_id]['image_nopath'] = theme('image', drupal_get_path('module','galleryformatter') . "/gallerystyles/greenarrows/images/bg-trans.png", $alt, $title, array('id'=>$hash_id), false); + + if(!empty($field['data']['title'])) $slides[$hash_id]['title'] = $field['data']['title']; + + if(!empty($field['data']['description'])) $slides[$hash_id]['description'] = check_plain($description); + $slides[$hash_id]['filepath'] = $filepath; + $slides[$hash_id]['hash_id'] = $hash_id; + $slides[$hash_id]['alt'] = $alt; + $slides[$hash_id]['cached_path'] = imagecache_create_url($slide_preset, $filepath); + $slides[$hash_id]['filename'] = $filename; // link the slides to the original image if so configured $vars['link_to_full'] = $widget['link_to_full']; // let the tpl know if we are liking or not @@ -97,22 +104,26 @@ function template_preprocess_galleryform $link_url = $widget['link_to_full_preset'] ? imagecache_create_url($widget['link_to_full_preset'], $filepath) : file_create_url($filepath); // link the slide image and include the span for the icon - $slides[$id]['image'] = l(''. t('View the full image') .''. $slides[$id]['image'], $link_url, array('attributes' => $link_attributes, 'html' => TRUE,)); + $slides[$hash_id]['image'] = l(''. t('View the full image') .''. $slides[$hash_id]['image'], $link_url, array('attributes' => $link_attributes, 'html' => TRUE,)); + $slides[$hash_id]['image_nopath'] = l(''. t('View the full image') .''. $slides[$hash_id]['image_nopath'], $link_url, array('attributes' => $link_attributes, 'html' => TRUE,)); + $slides[$hash_id]['full_url'] = $link_url; } // END linking to original // setup thumbnail images if($num_of_images > 1) { $thumbs[$id]['image'] = theme('imagecache', $thumb_preset, $filepath, $alt, $title); - $thumbs[$id]['hash_id'] = $hash_id; + $thumbs[$id]['hash_id'] = $thumb_id; } } // insert into the variables for the template file $vars['gallery_thumbs'] = $thumbs; $vars['gallery_slides'] = $slides; + $vars['link_attributes'] = $link_attributes; // Get the images width and height for use by the template - $image_path = $slides[0]['filepath']; // the first image will be used to get the dimensions of the gallery + $current = current($slides); + $image_path = $current['filepath']; // the first image will be used to get the dimensions of the gallery $slide_dimensions = galleryformatter_getimage_dimensions($slide_preset, $image_path); $vars['gallery_slide_height'] = $slide_dimensions['height']; $vars['gallery_slide_width'] = $slide_dimensions['width']; @@ -141,6 +152,11 @@ function template_preprocess_galleryform // setup the style class $vars['gallery_style'] .= 'galleryformatter-'. drupal_strtolower($style); galleryformatter_add_css($style); + + // Set Drupal.settings info about slides for dynamic loading purposes. + drupal_add_js(array('galleryformatter' =>array('slides'=>$slides, 'link_to_full'=>$widget['link_to_full'])), 'setting', 'header'); + + $vars['slideset_id'] = $slideset_id; } // account for any preset not selected and provide a link to configure them Only in theme: .DS_Store diff -urp theme/galleryformatter.css theme/galleryformatter.css --- theme/galleryformatter.css 2010-10-19 07:54:29.000000000 -0700 +++ theme/galleryformatter.css 2011-02-24 15:52:53.000000000 -0800 @@ -43,3 +43,7 @@ li.gallery-slide { display: block; } top: 0; left: 0; } + +.galleryformatter .slide-button { + z-index: 101; +} \ No newline at end of file diff -urp theme/galleryformatter.js theme/galleryformatter.js --- theme/galleryformatter.js 2010-10-19 07:54:29.000000000 -0700 +++ theme/galleryformatter.js 2011-02-24 15:53:56.000000000 -0800 @@ -11,7 +11,6 @@ Drupal.galleryformatter = Drupal.gallery // setting up the main behaviour Drupal.galleryformatter.prepare = function(el) { - // var $settings = Drupal.settings.galleryformatter; var $el = $(el); var $slides = $('li.gallery-slide', $el); @@ -19,14 +18,23 @@ Drupal.galleryformatter.prepare = functi var $thumbsLi = $('li', $thumbs); var thumbWidth = $thumbsLi.filter(':first').width() + 'px'; var liWidth = $thumbsLi.outerWidth(); // includes padding + var $wrapper = $('.wrapper', $el); + var visibleWidth = $wrapper.outerWidth(); + var $id = $el.attr('id'); + var $config = Drupal.settings["galleryformatter"]; + + var $gallery_name = Drupal.settings["gallerytitle-" + $id]['gallery_title']; + /* - * Only start the thumbs carrousel if needed + * Only start the thumbs carousel if needed */ if (($thumbsLi.size() * liWidth) > $thumbs.width()) { $('ul', $thumbs).width('99999px'); $thumbs.infiniteCarousel(); - $thumbsLi = $('li', $thumbs); // we need to reselect because infiniteCarousel inserts new empty li elements if necessary + // we need to reselect because infiniteCarousel inserts new empty li elements if necessary + $el = $(el); + $thumbsLi = $('.gallery-thumbs ul li', $el); } $thumbsLi.each(function(){ @@ -37,52 +45,153 @@ Drupal.galleryformatter.prepare = functi var $thumbslinks = $('a', $thumbsLi); /* - * @TODO: - * figure out how to get this into proper functions reusing selections + * Bind thumbnail images to show slides using showSlide function */ $thumbslinks.click(function(e){ - var $hash = $(this.hash); - if(!$hash.is(':visible')){ - $thumbsLi.removeClass('active'); - $(this).parent().addClass('active'); - $slides.filter(':visible').fadeOut('slow'); - $hash.fadeIn('slow'); - /* - * @FIXME - * Need to figure out a way to update the location bar of the browser, for bookmarking etc, without making the scroll jump - * window.location.hash = this.hash; solution below does update the location, but makes the scroll jump. - */ - // window.location.hash = this.hash; // not sure if this is the best way to do it. - } - e.preventDefault(); + showSlide(this.hash); }); /* * Startup behaviour (when the page first loads) */ $slides.hide(); // hide all slides - var $locationHash = window.location.hash; // if we are being deeplinked to a specific slide, capture that - - function showFirstSlide(){ - $slides.filter(':first').show(); // show the first one - $thumbsLi.filter('.slide-0:not("cloned")').addClass('active'); // activate the first thumbnail - } - - // if we have a hash in the url - if ($locationHash) { - var $slideToShow = $slides.filter($locationHash); - // if the hash corresponds to one of our slides - if ($slideToShow.length > 0) { - $slideToShow.show(); // show that slide - $thumbsLi.not($(".cloned")).find("a[href="+$locationHash+"]").parent().addClass('active'); // activate that thumbnail - } - // otherwise the default - else { - showFirstSlide(); - } + if (window.location.hash) { + var slideHashSplit = window.location.hash.split("-"); + + // new preloader to fill in images in secondary "pages" + var currThmb = slideHashSplit[1]; + var visible = Math.ceil(visibleWidth / liWidth); + + if (currThmb < $thumbsLi.not($(".cloned")).size()) { + if (currThmb >= visible) { + currentPage = Math.floor(currThmb / visible); + + $lowIndex = visible * (currentPage) - 1; // low and high index define the range of items to preload; -1 allows for preloading last slide of prev. page in event user is using previous button + $highIndex = $lowIndex + visible + 1; // +visible number allows for preloading of first slide of next page for users scrolling through with next button. +1 offsets for -1 in low index + $activeLi = $thumbsLi.not($(".cloned")); + + for($x=$lowIndex; $x<=$highIndex; $x++) { + if ($x >= 0 && !$slides.find("img#slide-" + $x + "-" + $id).hasClass('preLoaded')) { // check against class so it doesn't repeat unnecessarily + var srcId = "slide-" + $x + "-" + $id; + + if (typeof $config.slides[srcId] !== 'undefined') { + var img = new Image(); //new placeholder img obj + img.src = $config.slides[srcId].cached_path; // Preload image into placeholder image object so it's in the browser cache. + + $slides.find("img#slide-" + $x + "-" + $id).attr('src',$config.slides[srcId].cached_path).addClass('preLoaded'); // dump into appropriate slide image. + } + } + } + } // End Preloader + showSlide(window.location.hash); + } else { + // otherwise the default + showSlide("#slide-0"); + var currThmb = 0; + window.location.hash = "slide-0"; + } } // otherwise the default else { - showFirstSlide(); + showSlide("#slide-0"); + var currThmb = 0; + } + + /* + * Create a public interface to move to the next and previous images + */ + prevThumbNum = currThmb - 1; + if (prevThumbNum < 0) prevThumbNum = $thumbsLi.not($(".cloned")).length - 1; + + nextThumbNum = parseInt(currThmb) + 1; + if (nextThumbNum >= $thumbsLi.not($(".cloned")).length) nextThumbNum = 0; + + // Setup buttons for next/prev slide + $slideButtons = ('<>'); + $('.gallery-slides', $el).append($slideButtons); + var previd = '#' + $el.attr('id') + '-shell a.prev-slide'; + var nextid = '#' + $el.attr('id') + '-shell a.next-slide'; + +// $('a.prev-slide', $el).click(function(){ + $(previd) + .attr('href', "#slide-" + prevThumbNum) + .click(function(e){ + var currentScroll = $wrapper.get(0).scrollLeft; + var $prevThumbLi = $thumbsLi.filter('.active').prevAll().not('.empty, .cloned').filter(':first'); + // if no results we are on the first element + if(!$prevThumbLi.size()) { + // select the last one + $prevThumbLi = $thumbsLi.not('.empty, .cloned').filter(':last'); + } + var $slideToClick = $('a', $prevThumbLi).attr('href'); + + var $prevIsVisible = (($prevThumbLi.get(0).offsetLeft >= currentScroll) && ($prevThumbLi.get(0).offsetLeft <= (visibleWidth + currentScroll))); + if($prevIsVisible) { + showSlide($slideToClick); + } + else { + $thumbs.trigger('prev'); + showSlide($slideToClick); + } + e.preventDefault(); + window.location.hash = $slideToClick; + }); + + $(nextid) + .attr('href', "#slide-" + nextThumbNum) + .click(function(e){ + var currentScroll = $wrapper.get(0).scrollLeft; + var $nextThumbLi = $thumbsLi.filter('.active').nextAll().not('.empty, .cloned').filter(':first'); + // if no results we are on the last element + if(!$nextThumbLi.size()) { + // select the first one + $nextThumbLi = $thumbsLi.not('.empty, .cloned').filter(':first'); + } + var $slideToClick = $('a', $nextThumbLi).attr('href'); + var $nextIsVisible = (($nextThumbLi.get(0).offsetLeft >= currentScroll) && ($nextThumbLi.get(0).offsetLeft <= (visibleWidth + currentScroll))); + if($nextIsVisible) { + showSlide($slideToClick); + } + else { + $thumbs.trigger('next'); + showSlide($slideToClick); + } + e.preventDefault(); + window.location.hash = $slideToClick; + }); + + + /* + * Function to load slides + */ + function showSlide(hash_id){ + var $hash = $(hash_id + "-" + $id + "-wrapper"); + if(!$hash.is(':visible')){ + $thumbsLi.removeClass('active'); + + $thumbsLi.not($(".cloned")).find("a[href="+hash_id+"]").parent().addClass('active'); // activate that thumbnail + + $slides.filter(':visible').fadeOut('slow'); + $hash.fadeIn('slow'); + + $(".galleryformatter-futureus-gallery .gallery-slides").animate({ + height: $(hash_id + "-" + $id + "-wrapper").height() + }, 'slow'); + + var slideHashSplit = hash_id.split("-"); // Update # of ## + var slideno = parseInt(slideHashSplit[1]) + 1; + $('#' + $id + "-shell span.slidenumber").html(slideno); + + // Parse data for prev/next urls, tied to deep linking + var prevThumbNum = parseInt(slideHashSplit[1]) - 1; + if (prevThumbNum < 0) prevThumbNum = $thumbsLi.not($(".cloned")).length - 1; + + var nextThumbNum = parseInt(slideHashSplit[1]) + 1; + if (nextThumbNum >= $thumbsLi.not($(".cloned")).length) nextThumbNum = 0; + + $(previd).attr('href', "#slide-" + prevThumbNum); + $(nextid).attr('href', "#slide-" + nextThumbNum); + + } } }; diff -urp theme/galleryformatter.tpl.php theme/galleryformatter.tpl.php --- theme/galleryformatter.tpl.php 2010-09-28 03:19:52.000000000 -0700 +++ theme/galleryformatter.tpl.php 2011-02-25 13:26:54.000000000 -0800 @@ -19,27 +19,28 @@ * $gallery_thumb_width * $gallery_slides - Array containing all slide images, a link to the original and its sanatized title & description ready to print * $gallery_thumbs - Array containing all thumbnail images ready to print - * $link_to_full - BOOLEAN wether or not we are linking slides to original images + * $link_to_full - BOOLEAN whether or not we are linking slides to original images */ +$thumb_count = floor($gallery_slide_width/$gallery_thumb_width); +$count = 0; // Initialize main count ?> 0): ?> -
-
+
+
-
    + +
      $data): ?> - - +
diff -urp theme/infiniteCarousel.js theme/infiniteCarousel.js --- theme/infiniteCarousel.js 2010-10-19 07:54:29.000000000 -0700 +++ theme/infiniteCarousel.js 2011-02-24 13:23:48.000000000 -0800 @@ -7,6 +7,10 @@ * Slightly addapted for our use case */ $.fn.infiniteCarousel = function () { + $slides = this.parent().find('.gallery-frame ul.gallery-container'); + + $id = this.parent().attr('id'); + var $config = Drupal.settings["galleryformatter"]; function repeat(str, num) { return new Array( num + 1 ).join( str ); @@ -24,6 +28,7 @@ $.fn.infiniteCarousel = function () { currentPage = 1, pages = Math.ceil($items.length / visible); + var $thumbs = $items.find('> a'); // 1. Pad so that 'visible' number will always be seen, otherwise create empty items if (($items.length % visible) != 0) { @@ -58,8 +63,24 @@ $.fn.infiniteCarousel = function () { } currentPage = page; - }); + // Preload Large Images for smooth transitions + $lowIndex = visible * (currentPage - 1) - 1; // low and high index define the range of items to preload; -1 allows for preloading last slide of prev. page in event user is using previous button + $highIndex = $lowIndex + visible + 1; // +visible number allows for preloading of first slide of next page for users scrolling through with next button. +1 offsets for -1 in low index + for($x=$lowIndex; $x<=$highIndex; $x++) { + + + if ($x<$thumbs.length && $x >= 0 && !$slides.find("img#slide-" + $x + "-" + $id).hasClass('preLoaded')) { // check against class so it doesn't repeat unnecessarily + var srcId = "slide-" + $x + "-" + $id; + + var img = new Image(); //new img obj + img.src = $config.slides[srcId].cached_path; + + $slides.find("img#slide-" + $x + "-" + $id).attr('src',$config.slides[srcId].cached_path).addClass('preLoaded'); + } + } + + }); return false; } @@ -78,5 +99,13 @@ $.fn.infiniteCarousel = function () { $(this).bind('goto', function (event, page) { gotoPage(page); }); + + // custom events to trigger next and prev pages + $(this).bind('next', function () { + gotoPage(currentPage + 1); + }); + $(this).bind('prev', function () { + gotoPage(currentPage - 1); + }) }); };