jquery.showcase.js

/*!-----------------------------------------------------------------------
   Eros Fratini - eros@recoding.it
   jquery.showcase 2.0.2 
**/
// 02/11/2010 - Fixed and issue with jQuery 1.4.3, some tests with IE9 beta
// 26/04/2010 - Begin some changes
// 02/02/2010 - Wow, a fix about 10 minute after release....
// 02/02/2010 - Debugging and demos
// 27/12/2009 - Optimized animation, added functions to pause and resume autocycling
//			  - Tested external ease functions		
// 24/12/2009 - Added a lot of settings, redefine css
// 21/12/2009 - Begin to write v2.0
// 27/07/2009 - Added asynchronous loading of images
// 26/06/2009 - some new implementations
// 19/06/2009 - standardization
// 08/06/2009 - Initial sketch
//
// requires jQuery 1.3.x+
//------------------------------------------------------------------------
(function($) {
  $.fn.showcase = function (options) {
    var $container = this;

    // Retrieve options
    var opt;
    opt = $.extend({ }, $.fn.showcase.defaults, options);

    if (!/images|titles/.test(opt.linksOn)) {
      opt.linksOn = "images";
    }
    if (options && options.css) {
      opt.css = $.extend({}, $.fn.showcase.defaults.css, options.css);
    }
    if (options && options.animation) {
      opt.animation = $.extend({}, $.fn.showcase.defaults.animation, options.animation);
      if (!/horizontal-slider|vertical-slider|fade/.test(opt.animation.type)) {
        opt.animation.type = "horizontal-slider";
      }
    }
    if (options && options.navigator) {
      opt.navigator = $.extend({}, $.fn.showcase.defaults.navigator, options.navigator);

      if (!/top-left|top-right|bottom-left|bottom-right/.test(opt.navigator.position)) {
        opt.navigator.position = "top-right";
      }

      if (!/horizontal|vertical/.test(opt.navigator.orientation)) {
        opt.navigator.orientation = "horizontal";
      }

      // use global zIndex as default, can be overidden with
      // navigator css settings
      if (options.navigator.css) {
        opt.navigator.css = $.extend({ "z-index": opt.zIndex }, $.fn.showcase.defaults.navigator.css, options.navigator.css);
      }
      else {
        opt.navigator.css["z-index"] = opt.zIndex;
      }

      if (options.navigator.item) {
        opt.navigator.item = $.extend({}, $.fn.showcase.defaults.navigator.item, options.navigator.item);
        // Progressive extensions of hover and selected states, inherited by standard css properties
        opt.navigator.item.cssHover = $.extend({}, $.fn.showcase.defaults.navigator.item.css, $.fn.showcase.defaults.navigator.item.cssHover);
        opt.navigator.item.cssSelected = $.extend({}, $.fn.showcase.defaults.navigator.item.css, $.fn.showcase.defaults.navigator.item.cssSelected);

        if (options.navigator.item.css) {
          opt.navigator.item.css = $.extend({}, $.fn.showcase.defaults.navigator.item.css, options.navigator.item.css);
          opt.navigator.item.cssHover = $.extend({}, $.fn.showcase.defaults.navigator.item.cssHover, options.navigator.item.css);
          opt.navigator.item.cssSelected = $.extend({}, $.fn.showcase.defaults.navigator.item.cssSelected, options.navigator.item.css); 
        }  
        if (options.navigator.item.cssHover) {
          opt.navigator.item.cssHover = $.extend({}, $.fn.showcase.defaults.navigator.item.cssHover, options.navigator.item.cssHover);
        }
        if (options.navigator.item.cssSelected) {
          opt.navigator.item.cssSelected = $.extend({}, $.fn.showcase.defaults.navigator.item.cssSelected, options.navigator.item.cssSelected); 
        }
      }
    }

    if (options && options.titleBar) {
      opt.titleBar = $.extend({}, $.fn.showcase.defaults.titleBar, options.titleBar); 
      if (!/bottom|top/.test(opt.titleBar.position)) {
        opt.titleBar.position = "bottom";
      }

      if (options.titleBar.css) {
        opt.titleBar.css = $.extend({}, $.fn.showcase.defaults.titleBar.css, options.titleBar.css);  
      }
    }

    // Setup of container
    $container.css(opt.css);

    // Check loading mode.
    // If there's something in opt.images[], I'll load them asynchronously, 
    // it will be nice to have width and height setted, in order to define the $container sizes
    if (opt.images.length !== 0) {
      var i;
      $container.css({ width: opt.css.width, height: opt.css.height, overflow: "hidden" });
      for (i in opt.images) {
        var img = new Image();
        img.src = opt.images[i].url;
        img.alt = opt.images[i].description || "";
        var $link = $("<a />").attr({ "href": opt.images[i].link || "#", "target": opt.images[i].target || "_self" });
        $link.css({ opacity: 0 });
        $link.append(img);
        $container.append($link);
      }
    }

    // Check loading state of #1 image
    if ($container.find("img:first")[0].complete) {
      $.fn.showcase.start($container, opt);
    }
    else {
      $container.find("img:first").load( function() {
        $.fn.showcase.start($container, opt);
      });
    }

    // functions to control the playback of showcase
    $.fn.extend({
      pause: function() { $container.data("stopped", true); },
      go: function() { $container.data("stopped", false); }
    });
  };

  // This will start all showcase's stuffs
  $.fn.showcase.start = function($container, opt) {
    // Define local vars
    var index = 0;                             
    var nImages = $container.find("img").length;
    var $fi = $container.find("img:first");
    var imagesize = { width: $fi.removeAttr("width").width(), height: $fi.removeAttr("height").height() };

    opt.css.width = imagesize.width;
    opt.css.height = imagesize.height;

    // Redefine size of container
    $container.css({ width: opt.css.width, height: opt.css.height });
    $container.find("a").css({ position: "absolute", top: "0", left: "0" })
    .find("img").css("border", "0px");

    // setup navigator
    var $slider = $("<div id='slider' />").css({ position:"absolute" });
    var $divNavigator = $("<div id='navigator' />").css(opt.navigator.css);

    switch (opt.navigator.position) {
      case "top-left": $divNavigator.css({ top: "0px", left: "0px" });
      break;
      case "top-right": $divNavigator.css({ top: "0px", right: "0px" });
      break;
      case "bottom-left": $divNavigator.css({ bottom: "0px", left: "0px" });
      break;
      case "bottom-right": $divNavigator.css({ bottom: "0px", right: "0px" });
      break;
    }

    $container.append($divNavigator).hover(function() {
      if (opt.titleBar.autoHide && opt.titleBar.enabled) {
        $($titleBar).stop().animate({ opacity: opt.titleBar.css.opacity, left: 0, right: 0, height: opt.titleBar.css.height }, 250);
      }
      if (opt.navigator.autoHide) { $($divNavigator).stop().animate({ opacity: 1 }, 250); }
      $(this).data("isMouseHover", true);
    },
    function() {
      if (opt.titleBar.autoHide && opt.titleBar.enabled) {
        $titleBar.stop().animate({ opacity: 0, height: "0px" }, 400); 
      }
      if (opt.navigator.autoHide) { $divNavigator.stop().animate({ opacity: 0 }, 250); }
      $(this).data("isMouseHover", false);
    });

    $container.find("a").wrapAll($slider).each( function(i) {
      switch (opt.animation.type) {
        case "horizontal-slider":
          $(this).css("left", i*imagesize.width);
        break;
        case "vertical-slider":
          $(this).css("top", i*imagesize.height);
        break;
        case "fade":
          // Hide all but the first Image by default,›
          // let the rest fade in…
          $(this).css({ top: "0", left: "0", opacity: (i == 0) ? 1 : 0, "z-index": opt.zIndex - i });
        break;
      }

      // Create navigation bar item
      var $navElement = $("<a href='#'>" + (opt.navigator.showNumber ? (i + 1) : "") + "</a>")
      .css({ 	display: "block",
           "text-decoration": "none",
           "-moz-outline-style": "none"
      })
      .click( function() {
        if (opt.animation.autoCycle) { clearInterval(opt.animation.intervalID); } // stop the current automatic animation
        $.fn.showcase.showImage(i, $container, imagesize, opt);
        index = i;
        if (opt.animation.autoCycle) { opt.animation.intervalID = showcaseCycler(index, nImages, $container, imagesize, opt); } // restart the automatic animation
        return false;
      })
      .hover(function() { if (!$(this).data("selected")) {
        if (opt.navigator.item.cssClassHover) {
          $(this).addClass(opt.navigator.item.cssClassHover); 
        }
        else {
          $(this).css(opt.navigator.item.cssHover); 
        }
      }
      },
      function() { if (!$(this).data("selected")) {
        if (opt.navigator.item.cssClassHover) {
          $(this).removeClass(opt.navigator.item.cssClassHover); 
        }
        else {
          $(this).css(opt.navigator.item.css); 
        }
      }
      })
      .appendTo($divNavigator);

      if (opt.navigator.item.cssClass) {
        $navElement.attr("class", opt.navigator.item.cssClass); 
      }
      else {
        $.extend({}, $navElement.css, opt.navigator.item);
        $navElement.css(opt.navigator.item.css);
      }

      switch (opt.navigator.orientation) {
        case "horizontal":
          $navElement.css("float", "left");
        break;
        case "vertical":
          $navElement.css("float", "none");
        break;    
      }

      if (opt.navigator.showMiniature) {
        $("<img />").attr({ src: $("img", this).attr("src"), width: $navElement.innerWidth(), height: $navElement.innerHeight(), border: "0px" }).appendTo($navElement);
      }
    });

    if (opt.navigator.autoHide) {
      $divNavigator.css("opacity", 0);
    }

    // Create titleBar
    if (opt.titleBar.enabled) {
      if (opt.linksOn == "images") {
        var $titleBar = $("<div id='subBar' />").html( $("<span />").html($container.find("a:first img").attr("alt")) );
      }
      else {
        var $a = $("<a />").attr("href", $container.find("a:first").attr("href")).html("<span>" + $container.find("a:first img").attr("alt") + "</span>");
        var $titleBar = $("<div id='subBar' />").html($a);

        $container.find("#slider a").each( function() {
          $(this).attr("rel", $(this).attr("href"));
        });
        $container.find("#slider a").removeAttr("href");
      }

      $titleBar.css({
        opacity: 0.50,
        width: "100%",
        overflow: "hidden",
        "z-index": opt.zIndex + 2,
        position: "absolute"
      });

      if(opt.titleBar.position == "top") { $titleBar.css("top", "0"); }
      else { $titleBar.css("bottom", "0"); }

      if (opt.titleBar.cssClass) { $titleBar.attr("class", opt.titleBar.cssClass); }
      else { 
        $titleBar.css(opt.titleBar.css); 
        $("a", $titleBar).css("color", opt.titleBar.css.color);
      }

      if (opt.titleBar.autoHide) {
        $titleBar.css({
          "height": "0px",
          "opacity": 0
        });
      }
      $titleBar.appendTo($container);
    }

    // set first image as selected
    $.fn.showcase.setNavigationItem(0, $container, opt);

    // startup cycling
    if (opt.animation.autoCycle) {
      opt.animation.intervalID = showcaseCycler(index, nImages, $container, imagesize, opt);
    }
  };

  var showcaseCycler = function(index, nImages, $container, imagesize, opt) {
    return setInterval( function() {
      if (!$container.data("stopped")){
        if (!$container.data("isMouseHover") || !opt.animation.stopOnHover)
          $.fn.showcase.showImage(++index % nImages, $container, imagesize, opt);
      }
    }, opt.animation.interval);
  };

  $.fn.showcase.showImage = function(i, $container, imagesize, opt) {
    var $a = $container.find("a");
    var $a_this = $container.find("a").eq(i);

    switch (opt.animation.type) {
      case "horizontal-slider":
        $container.find("#slider").stop().animate({ left: - (i*imagesize.width) }, opt.animation.speed, opt.animation.easefunction);
      break;
      case "vertical-slider":
        $container.find("#slider").stop().animate({ top: - (i*imagesize.height) }, opt.animation.speed, opt.animation.easefunction);
      break;
      case "fade":
        $container.css({ "z-index": opt.zIndex + 1 });
      if ($a_this.css("z-index") != opt.zIndex.toString()) {
        $a_this.css({ "z-index": opt.zIndex, opacity: 0 });

        $a.not($a_this).each( function() {
          if ($(this).css("z-index") != "auto")
            $(this).css("z-index", parseInt($(this).css("z-index"), 10) - 1);
        });

        $a_this.stop().animate({ opacity: 1 }, opt.animation.speed, opt.animation.easefunction);
      }
      break;
    }

    if (opt.titleBar.enabled) {
      if (opt.linksOn == "titles") {
        $("#subBar a", $container).attr({
          "href": $a_this.attr("rel"), "target": $a_this.attr("target")
        });
      }
    }
    $("#subBar span", $container).html($a_this.find("img").attr("alt"));
    // Setting selected navigationItem
    $.fn.showcase.setNavigationItem(i, $container, opt);
  };

  // Highlight the navigationItem related to image
  $.fn.showcase.setNavigationItem = function(i, $container, opt) {
    if (opt.navigator.item.cssClassSelected) {
      $container.find("#navigator a").removeClass(opt.navigator.item.cssClassSelected).data("selected", false);
      $container.find("#navigator a").eq(i).addClass(opt.navigator.item.cssClassSelected).data("selected", true);
    }
    else {
      if (opt.navigator.item.cssClass) {
        //$container.find("#navigator a").removeAttr("style").data("selected", false);
        $container.find("#navigator a").eq(i).css(opt.navigator.item.cssSelected).data("selected", true);
      }
      else {
        $container.find("#navigator a").css(opt.navigator.item.css).data("selected", false);
        $container.find("#navigator a").eq(i).css(opt.navigator.item.cssSelected).data("selected", true);	
      }
    }
  };

  $.fn.showcase.defaults = {
    images: [],
    zIndex: 1000,
    linksOn: "images",
    css: {
      position: "relative",
      overflow: "hidden",
      border: "none",
      width: "",
      height: ""
    },
    animation: {
      autoCycle: true,
      stopOnHover: true,
      interval: 4000,
      speed: 500,
      easefunction: "swing",
      type: "horizontal-slider" 
    },
    navigator: {
      css: {
        border: "none",
        padding: "5px",
        margin: "0px",
        position: "absolute"
      },
      position: "top-right",
      orientation: "horizontal",
      autoHide: false,
      showNumber: false,
      showMiniature: false,
      item: {
        cssClass: null,
        cssClassHover: null,
        cssClassSelected: null,
        css: {	
          color: "#000000",
          "text-decoration": "none",
          "text-align": "center",
          "-moz-outline-style": "none",
          width: "12px", 
          height: "12px",
          lineHeight: "12px",
          verticalAlign: "middle",
          backgroundColor: "#878787",
          margin: "0px 3px 3px 0px",
          border: "solid 1px #acacac",
          "border-radius": "4px",
          "-moz-border-radius": "4px",
          "-webkit-border-radius": "4px" 
        },
        cssHover: {
          backgroundColor: "#767676",
          border: "solid 1px #676767" 
        },
        cssSelected: {
          backgroundColor: "#00FF00",
          border: "solid 1px #acacac" 
        }
      }
    },
    titleBar: {
      enabled: true,
      autoHide: true,
      position: "bottom",
      cssClass: null,
      css: {
        opacity: 0.50,
        color: "#ffffff",
        backgroundColor: "#000000",
        height: "40px",
        padding: "4px",
        fontColor: "#444444",
        fontStyle: "italic",
        fontWeight: "bold",
        fontSize: "1em" 
      }
    }
  };
})(jQuery);