Photo Gallery JavaScript

Author: Webvanta

The first section of code goes in the head section of a page that includes a photo gallery. This is included in the photo gallery page template in our standard starter site.

The second section of code is the contents of jquery.galleriffic.js, which initializes the gallery.

<!-- load galleriffic library and initialize the gallery -->
<script  src="/webvanta/js/jquery/1.4/plugins/galleriffic-2.0/js/jquery.galleriffic.js"  type="text/javascript"></script>
<script type="text/javascript" src="/webvanta/js/jquery/1.4/plugins/galleriffic-2.0/js/jquery.opacityrollover.js"></script>
<script>
jQuery(document).ready(function(jQuery){
   // Initially set opacity on thumbs and add
   // additional  styling for hover effect on thumbs
   var onMouseOutOpacity  = 0.67;
   $('#thumbs ul.thumbs li').opacityrollover({
     mouseOutOpacity:    onMouseOutOpacity,
     mouseOverOpacity:  1.0,
     fadeSpeed:         'fast',
     exemptionSelector: '.selected'
   });
  var imgArray = jQuery.makeArray(jQuery("#thumbs .thumb"));
  if (imgArray.length <= 1){ jQuery("#controls").hide(); }      // hide controls if only one photo
  // Initialize Minimal Galleriffic Gallery
  if (imgArray.length){
    var gallery = $('#thumbs').galleriffic({
      autoStart:              true,                    // set to false if you don't want slideshow to start  automatically
      delay:                   4000,                    // time for each image in a slideshow, in  milliseconds
      numThumbs:               10,                      // number of thumbnails shown at one time (i.e., size  of page when paginated)                  
      preloadAhead:           10,
      enableTopPager:          false,                   // show thumbnail pagination controls at bottom
      enableBottomPager:      true,
      maxPagesToShow:          7,
      imageContainerSel:      '#slideshow',            //  set ids for the various containers
       controlsContainerSel:   '#controls',
      captionContainerSel:    '#caption',
      loadingContainerSel:    '#loading',
      renderSSControls:        true,
      renderNavControls:      true,
      playLinkText:            'Play',                  // set the text for all the controls
      pauseLinkText:          'Pause',
      prevLinkText:            ' ',                //  the css adds background images so no text needed
      nextLinkText:           ' ',                //    but a space is needed for the image to show up
      nextPageLinkText:       'Next  »',
      prevPageLinkText:       '«  Prev',
      autoStart:               true,                    // change to false if you don't want slideshow to  start automatically
      syncTransitions:          true,
      defaultTransitionDuration: 900,
      onSlideChange:              function(prevIndex, nextIndex) {   // fade effects on thumbnails
        this.find('ul.thumbs').children()
          .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
          .eq(nextIndex).fadeTo('fast', 1.0);
      },
      onPageTransitionOut:       function(callback) {                // fade effects for main image
        this.fadeTo('fast', 0.0, callback);
      },
      onPageTransitionIn:        function() {
        this.fadeTo('fast', 1.0);
      }
    });
  }
  else {
     jQuery('#empty_gallery').show();                    // if there are no images, show  "empty gallery" text
  }
});
</script>