jquery.flowgallery.js

/*!
 * jQuery flowgallery plugin: Cover Flow Image Gallery
 * Examples and documentation at: http://flowgallery.org
 * Version: 0.7.0 (08-JAN-2013)
 * Author: Boris Searles (boris@lucidgardens.com)
 * Requires jQuery v1.4 or later
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 */
;(function( $, window, document, undefined ){
  "use strict";

  var FlowGallery = function(list, config) {
    var self = this,
      list,
      $list,                  // reference to list as jquery object
      options = {},           // merged config options with defaults
      centerX = 0,            // horizontal center within list
      centerY = 0,            // vertical center within list
      $container = false,     // parent element of list
      $caption = false,       // caption element
      activeItem = false,     // reference to active FlowItem
      activeIndex = 0,
      listWidth = 0,          // list width (default: screen width)
      listHeight = 0,         // list height (height of highest image)
      flowItems = [],         // array of FlowItems
      elCounter = 0,          // number of list items
      resizeWhileDisabled = false,
      updateFlowTimer;

    // initialize gallery
    function init() {
      var metadata;

      $list = $(list);

      // This next line takes advantage of HTML5 data attributes
      // to support customization of the plugin on a per-element
      // basis. For example,
      // <ul id='gallery' data-plugin-options='{"activeIndex": 3}'>...</ul>
      metadata = $list.data( 'plugin-options' );

      options = $.extend({}, FlowGallery.defaults, config, metadata);
      $container = $list.parent();

      self.length = $list.children().length;
      self.options = options;

      initDom();
      initFlowItems();

      $list.css('visibility', 'visible');

      $(window).resize( $.proxy(windowResizeHandler, self) );

      if(options.enableKeyNavigation===true) {
        $(document).keydown(handleKeyEvents);
      }

      updateFlow(false);
    };


    // initialize dom setup and styling
    function initDom() {
      // set required styling on list element
      $list.css({
        listStyle: 'none',
        overflow: 'hidden',
        marginLeft: '0',
        paddingLeft: '0',
        paddingBottom: '30px',
        position: 'relative',
        width: '100%'
      });

      initCaption();
      initWrapper();
    };


    // initialize caption - a single instance is shared by all images
    function initCaption() {
      $caption = $('<p>', {
        'class': 'fg-caption',
        css: {          
          backgroundColor: options.backgroundColor,
          display: 'none',
          marginTop: '0',
          padding: '8px ' + (options.imagePadding+10) + 'px 15px',
          position: 'absolute'
        }
      });
    };


    // initialize wrapper around gallery - used for positioning caption
    function initWrapper() {
      var $wrapperElem = $('<div>', {
        'class': 'fg-wrapper',
        css: {
          position: 'relative'
        }
      })
      .append( $list.get(0) )
      .append( $caption.get(0) );
      $container.append($wrapperElem);
    };


    function initFlowItems() {
      self.enabled = false;
      // loop through list items to extract image data and determine list height
      $list.children().each(function(index) {
        var flowItem = new FlowItem(this, index, options);
        if(!flowItem.$el) { return; }

        flowItem.$el.one('load', function() {
          onItemLoaded.call(flowItem.$el);
        }).each(function() {
          if($(this).children('img:first')[0].complete) {
            $(this).load();
          }
        });

        flowItem.$el.on('click', onItemClicked);

        if(!activeItem && options.activeIndex === index) {
          flowItem.$el.addClass('active');
          activeItem = flowItem;
          activeIndex = index;
        }

        flowItems.push(flowItem);
      });

      self.enabled = true;
      listWidth = $container.width();
      centerX = listWidth * 0.5;
    };

    function onItemLoaded() {
      var item = $(this).data('flowItem');
      updateListHeight(item.h);
      if(!self.activeLoaded && item.index === options.activeIndex) {
        self.activeLoaded = true;
        clearTimeout(updateFlowTimer);
        updateFlowTimer = setTimeout(function () {
          updateFlow(options.animateImageLoad);
        }, 100);
      } else if(self.activeLoaded && (item.th !== options.loadingHeight || item.tw !== options.loadingWidth)) {
        clearTimeout(updateFlowTimer);
        updateFlowTimer = setTimeout(function () {
          updateFlow(options.animateImageLoad);
        }, 100);
      }
    };


    function onItemClicked(e) {
      var item = $(this).data('flowItem');
      if(item !== activeItem) {
        var oldIndex = activeIndex;
        flowInDir(item.index - oldIndex);
      } else if(options.forwardOnActiveClick === true) {
        flowInDir(1);
      }
    };


    // only applied after animation of 'active' element
    function afterFlowHandler(){
      showCaption();

      // adjust if width changed (i.e. if scrollbars get displayed)
      if($container.width() !== listWidth) {
        listWidth = $container.width();
        centerX = listWidth * 0.5;
        updateFlow();
        showCaption();
      }
    };


    // special afterFlow handler for previously active item
    function getOldActiveAfterFlowHandler(itemIndex) {
      return function() {
        var item = flowItems[itemIndex];
        item.oldActive = false;
      };
    };


    function updateFlow(animate) {
      if(!self.isEnabled()) { return false; }

      var config = {},
        isBefore = true,   // in loop, are we before 'active' item
        completeFn = null, // callback method to call after animation (for 'active' item)
        currentItem = false,
        $listItem = false,
        itemsLength = flowItems.length,
        i;

      // update centerY based on active image
      centerY = options.thumbTopOffset === 'auto' ? activeItem.h * 0.5 : options.thumbTopOffset;

      for(i = 0; i < itemsLength; i++) {
        currentItem = flowItems[i];
        $listItem = currentItem.$el;

        if($listItem.hasClass('active')) {
          config = {
            left: (centerX - options.imagePadding - currentItem.w * 0.5) + 'px', top: '0',
            width: currentItem.w + 'px',
            height: currentItem.h + 'px',
            padding: options.imagePadding + 'px'
          };
          isBefore = false;
          completeFn = afterFlowHandler;

          // animate list size if active image height has changed
          if(listHeight !== currentItem.h) {
            listHeight = currentItem.h;
            listHeight += options.imagePadding * 2;
            if(animate) {
              $list.stop().animate({
                height: listHeight
              }, {
                duration: options.duration,
                easing: options.easing
              });
            } else {
              $list.height(listHeight);
            }
          }
        } else {
          config = {
            left: calculateLeftPosition(i, isBefore),
            top: (centerY - currentItem.th * 0.5) + 'px'
          };

          completeFn = null;

          // TODO: rethink oldActive check, need to set width/height on first render
          // only animate width/height for old active item
          // if(currentItem.oldActive) {
            config.width = currentItem.tw+'px';
            config.height = currentItem.th+'px';
            config.padding = options.thumbPadding+'px';
            completeFn = getOldActiveAfterFlowHandler(i);
          // }
        }

        if(animate) {
          $listItem.stop().animate(config, {
            duration: options.duration,
            easing: options.easing,
            complete: completeFn,
            step: function () {
              $listItem.css('overflow', 'visible');
            }
          });
        } else {
          $listItem.css(config);
          if(completeFn) { completeFn(); }
        }
      }
    };


    // trigger flow in direction from current active element;
    // positive value flows to the right, negative values to the left;
    function flowInDir(dir, animate) {
      if(!self.isEnabled()) { return false; }

      var newIndex = activeIndex + dir;
      animate = animate !== undefined ? animate : options.animate;

      if(newIndex > flowItems.length - 1 || newIndex < 0) {
        return false;
      }

      activeItem.oldActive = true; // mark old active item
      if(dir < 0 && activeIndex > 0) {
        flowItems[activeIndex].oldActive = true;
        activeIndex += dir;
      } else if(dir > 0 && activeIndex < flowItems.length - 1) {
        activeIndex += dir;
      } else {
        return false;
      }
      activeItem = flowItems[activeIndex];
      prepareFlow();
      updateFlow(animate);
    };


    function prepareFlow() {
      //if (_options.circular) {
      //  _circularFlow(currentIndex);
      //}

      $caption.hide();
      $list.find('.active').removeClass('active');
      $(activeItem.$el).addClass('active');

      // update width (changes if scrollbars disappear)
      listWidth = $container.width();
      centerX = listWidth*0.5;
    };


    function calculateLeftPosition(current, isBefore) {
      var left = centerX,
        i = 0;

      if (isBefore) {
        left -= flowItems[activeIndex].w * 0.5;
        left -= options.imagePadding;
        left -= (activeIndex - current) * 10;
        left -= (activeIndex - current) * 2 * options.thumbPadding;
        for (i = current; i < activeIndex; i++) {
          left -= flowItems[i].tw;
        }
      } else {
        left += flowItems[activeIndex].w * 0.5;
        left += options.imagePadding;
        left += (current - activeIndex) * 10;
        left += (current - activeIndex) * 2 * options.thumbPadding;
        for (i = activeIndex + 1; i < current; i++) {
          left += flowItems[i].tw;
        }
      }
      return left + 'px';
    };


    // window resize handler - update gallery when window is resized
    function windowResizeHandler() {
      if(!self.isEnabled()) { resizeWhileDisabled = true; return false; }
      listWidth = $container.width();
      centerX = listWidth * 0.5;
      updateFlow();
      showCaption();
    };


    // show caption under active image
    function showCaption() {
      if(!activeItem.isLoaded) { return false; }

      var fullHeight,
        captionText = activeItem.captionText;

      if(captionText && captionText.length > 0){
        $caption.text(captionText);

        $caption.css({
          left: centerX - options.imagePadding - activeItem.w * 0.5,
          top: activeItem.h + options.imagePadding * 2,
          width: activeItem.w - 20
        });

        // set height of caption as bottom margin for list
        fullHeight = activeItem.h + $caption.height() + 40;
        //this.$list.height(fullHeight);

        $caption.fadeIn('fast');
      } else {
        // TODO: what happens here?
        fullHeight = activeItem.h + 40;
        //this.$list.height(fullHeight);
      }
    };


    // set list height to height of tallest image (needed for overflow:hidden)
    function updateListHeight(height) {
      if(height > listHeight) {
        listHeight = height;
        listHeight += options.imagePadding * 2;
        $list.height(listHeight);
      }
    };


    // handle key events
    function handleKeyEvents(e) {
      if(e.keyCode === 37) { // right arrow key
        flowInDir(-1);
      } else if(e.keyCode === 39) { // left arrow key
        flowInDir(1);
      }
    };

    // Public API ==================================================

    this.length = 0;             // number of images in gallery
    this.enabled = true;         // is gallery currently enabled
    this.options = {};

    this.getActiveIndex = function() {
      return activeIndex;
    };

    this.next = function(animate) {
      flowInDir(1, animate);
      return this;
    };

    this.prev = function(animate) {
      flowInDir(-1, animate);
      return this;
    };

    this.jump = function(index, animate) {
      flowInDir(index - activeIndex, animate);
      return this;
    };

    this.isEnabled = function() {
      return this.enabled===true;
    };

    this.disable = function() {
      this.enabled = false;
      return this;
    };

    this.enable = function() {
      this.enabled = true;

      // if resize event was fired while disabled, then adjust after
      // being enabled again
      if(resizeWhileDisabled) {
        $.proxy(this.windowResizeHandler, this)();
        resizeWhileDisabled = false;
      }
      return this;
    };

    this.addFlowItems = function (items, index) {
      var newFlowItems = [];

      items = Array.isArray(items) ? items : [items];

      // adds items to the end if not specified
      index = typeof(index) !== 'undefined' ? index : flowItems.length;

      // inserting items before activeIndex, need to readjust
      if(index <= activeIndex) {
        activeIndex += items.length;
      }

      // updating existing flowItem indices
      $.each(flowItems, function (i, flowItem) {
        if(i >= index) {
          flowItem.index += items.length;
        }
      });

      $.each(items, function(i) {
        var flowItem = new FlowItem(this, i + index, options);
        if(!flowItem.$el) { return; }

        flowItem.$el.on('loaded', onItemLoaded);
        flowItem.$el.on('click', onItemClicked);

        newFlowItems.push(flowItem);
      });

      // inserting into flowItems array
      Array.prototype.splice.apply(flowItems, [index, 0].concat(newFlowItems));

      updateFlow(options.animateImageLoad);

      // appending to dom
      if(index > 0) {
        $list.children('li:nth-child(' + index + ')').after(items);
      } else {
        $list.prepend(items);
      }
    };

    // initialize
    init();
  };


  // default option values
  FlowGallery.defaults = {
    activeIndex: 0,               // index of image that is initially active
    animate: true,
    backgroundColor: 'black',
    circular: false,
    duration: 900,                // animation duration (higher value = slower speed)
    easing: 'linear',
    enableKeyNavigation: true,    // enables forward/backward arrow keys for next/previous navigation
    forceHeight: false,
    forceWidth: false,
    forwardOnActiveClick: true,   // should clicking on active image, show next image?
    imagePadding: 0,              // border of active image
    loadingClass: "loading",      // css class applied to <li> elements of loading images
    loadingHeight: 60,            // loading height to use if cannot be determined
    loadingWidth: 100,            // loading width to use if cannot be determined
    thumbHeight: 'auto',
    thumbPadding: 0,              // border of thumbnails
    thumbTopOffset: 'auto',       // top offset in pixels or 'auto' for centering images within list height
    thumbWidth: 'auto',
    imageAspectRatio: false,       // keeps the images in aspect ratio to original
    animateImageLoad: false
  };



  var FlowItem = function(elem, index, options) {
    var self = this,
      $img = false;

    this.$el = $(elem);
    this.index = index;

    this.h = 0;               // image height
    this.th = 0;              // thumb height
    this.w = 0;               // image width
    this.tw = 0;              // thumb width
    this.active = false;      // is active image?

    this.isLoaded = false;    // is image fully loaded?
    this.captionText = false; // text specified within 'title' attribute of img
    this.oldActive = false;   // is this image being animated away from active position?

    function init() {
      self.h = options.loadingHeight;
      self.th = options.loadingHeight;
      self.w = options.loadingWidth;
      self.tw = options.loadingWidth;

      $img = self.$el.find('img');

      if($img.length === 0) {
        // mark as invalid if no image found
        self.$el = false;
        return;
      }

      self.$el.data('flowItem', self);
      self.captionText = $img.attr('title');

      if(options.forceWidth) {
        $img.width(options.forceWidth);
      }

      // remove image and add 'loading' class
      $img.hide().parent('li').addClass(options.loadingClass).css({
        height: self.th,
        width: self.tw
      });

      addLoadHandler();

      self.$el.css({
        backgroundColor: options.backgroundColor,
        padding: options.thumbPadding,
        position: 'absolute',
        textAlign: 'center'
      });

      $img.css({
        cursor: 'pointer',
        height: '100%',
        imageRendering: 'optimizeQuality', // firefox property
        //-ms-interpolation-mode: 'bicubic',  // IE property
        width: '100%'
      });
    };

    // add handler to images to call after finished loading
    function addLoadHandler() {
      var img = $img.get(0);
      if(img.complete) {
        initListItem();
      } else {
        $img.on('load readystatechange', imageLoadHandler)
        .on('error', function () {
          $img.css('visibility', 'visible').parent().removeClass(options.loadingClass);
        });
      }
    };


    // event handler for image loading
    function imageLoadHandler(e) {
      var img = $img.get(0);
      if (img.complete || (img.readyState === 'complete' && e.type === 'readystatechange')) {
        initListItem();
      }
    };


    // load handler for images
    function initListItem(){
      $img.css('visibility', 'visible').parent('li').removeClass(options.loadingClass);
      $img.fadeIn();

      self.isLoaded = true;
      initImageDimensions();

      self.$el.trigger('loaded', self);
    };


    // determine image dimensions
    function initImageDimensions() {
      var img = $img.get(0);

      if(typeof img.naturalWidth !== 'undefined') {

        // update full image dimensions with aspect ratio
        if(options.imageAspectRatio) {
          if(options.forceWidth && options.forceHeight) {
            self.w = options.forceWidth;
            self.h = options.forceHeight;
          } else if (options.forceWidth) {
            self.w = options.forceWidth;
            self.h = options.forceWidth / img.naturalWidth * img.naturalHeight;
          } else if (options.forceHeight) {
            self.w = options.forceHeight / img.naturalHeight * img.naturalWidth;
            self.h = options.forceHeight;
          } else {
            self.w = img.naturalWidth || img.width;
            self.h = img.naturalHeight || img.height;
          }
        } else {
          // ignore aspect ratio
          self.w  = options.forceWidth || img.naturalWidth || img.width;
          self.h = options.forceHeight || img.naturalHeight || img.height;
        }
      } else {
        var tmpImg = new Image();
        tmpImg.src = $img.attr('src');
        self.w = tmpImg.width;
        self.h = tmpImg.height;
      }

      // update thumbnail dimensions
      if(options.thumbWidth === 'auto' && options.thumbHeight === 'auto') {
        self.tw = options.loadingWidth;
        self.th = Math.round(self.h * options.loadingWidth / self.w);
      } else if (options.thumbHeight === 'auto') {
        self.tw = options.thumbWidth;
        self.th = Math.round(self.h * Number(options.thumbWidth) / self.w);
      } else if (options.thumbWidth === 'auto') {
        self.tw = Math.round(self.w * Number(options.thumbHeight) / self.h);
        self.th = options.thumbHeight;
      } else {
        self.tw = options.thumbWidth;
        self.th = options.thumbHeight;
      }
    };


    // Public API ==================================================

    init();
  };


  /** Basic jQuery plugin setup */
  $.fn.flowgallery = function(options) {

    return this.each(function() {
      var element = $(this);

      // Return early if this element already has a plugin instance
      if (element.data('flowgallery')) { return; }

      // pass options to plugin constructor
      var flowgallery = new FlowGallery(this, options);

      // Store plugin object in this element's data
      element.data('flowgallery', flowgallery);
    });

  };

  // default options
  $.fn.flowgallery.defaults = FlowGallery.defaults;


})( jQuery, window , document );