Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Oct 8th, 2012  |  syntax: None  |  size: 9.55 KB  |  views: 39  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /**
  2.  * jQuery Gallery Plugin
  3.  *   http://code.google.com/p/jquery-gallery-plugin/
  4.  *
  5.  * Copyright (c) 2009 Yusuke Horie
  6.  *
  7.  * Released under the MIT License:
  8.  * http://www.opensource.org/licenses/mit-license.php
  9.  *
  10.  * Since  : 0.1.0 - 08/02/2009
  11.  * Version: 0.3.0 - 08/25/2009
  12.  */
  13. (function(jQuery) {
  14.  
  15.   /** private properties **/
  16.  
  17.   var _inc = 0;
  18.  
  19.   /** public methods **/
  20.  
  21.   jQuery.fn.gallery = function (options) {
  22.     var options = jQuery.extend({}, jQuery.fn.gallery.defaults, options);
  23.  
  24.     return this.each(function(i, e) {
  25.       var
  26.         $this = jQuery(e),
  27.         id = options.prefix + _inc,
  28.         i = 0,
  29.         n = 0,
  30.         limit = 5,
  31.         step = 1,
  32.         duration = Math.ceil(options.interval*0.3),
  33.         timeId = null;
  34.  
  35.       var height;
  36.       if (!options.height) {
  37.         if (!parseInt($this.css('height'), 10)) {
  38.           height = '450px';
  39.         } else {
  40.           height = $this.height();
  41.         }
  42.       } else {
  43.         height = options.height;
  44.       }
  45.  
  46.       var
  47.         width = (!options.width) ? $this.width(): options.width,
  48.         paddingTop = parseInt($this.css('padding-top'), 10),
  49.         paddingBottom = parseInt($this.css('padding-bottom'), 10),
  50.         pheight = parseInt(height, 10),
  51.         contentHeight = pheight - options.thumbHeight + paddingTop,
  52.         o = $this.offset(),
  53.         barWidth = jQuery(window).width() - o.left;
  54.  
  55.       // thumbnail bar
  56.       var barTop = (options.barPosition == 'top') ? paddingTop: contentHeight;
  57.  
  58.       if (options.toggleBar) {
  59.         if (options.barPosition == 'top') {
  60.           $this.hover(
  61.             function() {
  62.               $('#thumbnails_' + id).animate({top: paddingTop}, {queue: false, duration: 300});
  63.             },
  64.             function() {
  65.               $('#thumbnails_' + id).animate({top: barTop}, {queue: false, duration: 300});
  66.             });
  67.           barTop = (options.thumbHeight + paddingTop) * (-1);
  68.         } else {
  69.           var outerHeight = pheight + paddingTop + paddingBottom;
  70.           $this.hover(
  71.             function() {
  72.               $('#thumbnails_' + id).animate({top: contentHeight}, {queue: false, duration: 300});
  73.             },
  74.             function() {
  75.               $('#thumbnails_' + id).animate({top: outerHeight}, {queue: false, duration: 300});
  76.             });
  77.           barTop = outerHeight;
  78.         }
  79.       }
  80.  
  81.       $this
  82.         .css({
  83.           width: width,
  84.           height: height,
  85.           zIndex: options.zIndex
  86.         })
  87.         .prepend('<div id="' + id + '"></div>')
  88.         .find('ul')
  89.           .attr('id', 'thumbnails_' + id)
  90.           .addClass(options.barClass)
  91.           .css({
  92.             top: barTop,
  93.             height: options.thumbHeight + 'px',
  94.             width: barWidth + 'px',
  95.             zIndex: options.zIndex + 2000
  96.           })
  97.           .find('li')
  98.             .css({
  99.               width: options.thumbWidth + 'px',
  100.               height: options.thumbHeight + 'px'
  101.             })
  102.             .each(function (index) {
  103.               jQuery.data(this, 'index', index);
  104.             })
  105.             .click(function (event) {
  106.               event.preventDefault();
  107.               if (options.slideshow) clearInterval(timeId);
  108.  
  109.               if ($.isFunction(options.onSelect))
  110.                 options.onSelect.apply(this, [event]);
  111.  
  112.               var $e = this;
  113.               bar.find('li').each(function (index, e) {
  114.                 if (e == $e) {
  115.                   step = index;
  116.                   return false;
  117.                 }
  118.               });
  119.  
  120.               i = jQuery.data(this, 'index');
  121.  
  122.               // pre load
  123.               for (var j=i; j<i+limit; j++) {
  124.                 var o = pictures.eq(j);
  125.                 if (o.length > 0 && typeof o.data('loaded') == 'undefined') {
  126.                   preLoad(o.attr('href'));
  127.                   o.data('loaded', true);
  128.                 }
  129.               }
  130.  
  131.               display();
  132.               if (options.slideshow)
  133.                 timeId = setInterval(display, options.interval);
  134.             });
  135.  
  136.       if (options.showOverlay) {
  137.         var
  138.           itop = pheight*(1-options.ratio) + paddingTop,
  139.           ileft = $this.css('padding-left'),
  140.           iheight = (pheight*options.ratio) + paddingTop;
  141.  
  142.         // screen
  143.         $('<div />')
  144.           .addClass(options.screenClass)
  145.           .css({
  146.             opacity: 0.5,
  147.             top: itop,
  148.             left: 0,
  149.             height: iheight,
  150.             width: $this.outerWidth(),
  151.             zIndex: options.zIndex + 1000
  152.           })
  153.           .insertAfter('#' + id);
  154.  
  155.         $('<div />')
  156.           .addClass(options.infoClass)
  157.           .html('<div id="gtitle_' + id + '" class="' + options.titleClass + '" style="display:none;"></div>' +
  158.             '<div id="gdesc_' + id + '" class="' + options.descClass + '" style="display:none;"></div>')
  159.           .css({
  160.             top: itop,
  161.             left: 0,
  162.             height: iheight,
  163.             zIndex: options.zIndex + 1500
  164.           })
  165.           .insertAfter('#' + id);
  166.       }
  167.  
  168.       // content container
  169.       var c = jQuery('#' + id).css({
  170.         position: 'relative',
  171.         width: width,
  172.         height: height,
  173.         overflow: 'hidden'
  174.       }).addClass(options.contentClass);
  175.  
  176.       var
  177.         bar = $this.find('ul').show(),
  178.         thumbnails = bar.find('img'),
  179.         pictures = $this.find('a').bind('click.gallery', function (e) { e.preventDefault(); }),
  180.         gtitle = $('#gtitle_' + id),
  181.         gdesc = $('#gdesc_' + id),
  182.         len =  thumbnails.length,
  183.         w = $this.find('li:first').outerWidth(true);
  184.  
  185.       var display = function () {
  186.         var t = thumbnails.eq(i);
  187.         var pict = pictures.eq(i);
  188.         var p = pict.attr('href');
  189.         var pid = id + '_' + i;
  190.  
  191.         // pre load
  192.         var next = pictures.eq(i+limit);
  193.         if (next.length > 0 && typeof next.data('loaded') == 'undefined') {
  194.           preLoad(next.attr('href'));
  195.         }
  196.  
  197.         // delete previous picture
  198.         c.find('img').animate({opacity: 0.0}, {
  199.           queue: false,
  200.           duration: duration,
  201.           easing: 'linear',
  202.           complete: function() { jQuery(this).remove(); }
  203.         });
  204.  
  205.         // append new picture
  206.         jQuery('<img />')
  207.           .attr('src', p)
  208.           .attr('id', pid)
  209.           .css({
  210.             position: 'absolute',
  211.             top: 0,
  212.             left: 0,
  213.             opacity: 0.0
  214.           })
  215.           .bind('click.gallery', function (event) {
  216.             options.onClick.apply(this, [event, pict.get()]);
  217.           })
  218.           .appendTo('#' + id)
  219.           .animate({opacity: 1.0}, {
  220.             queue: false,
  221.             duration: duration,
  222.             easing: 'linear'
  223.           })
  224.           .load(function () {
  225.             pict.data('loaded', true);
  226.           });
  227.  
  228.         var title = t.attr('title');
  229.         var id_of_desc = pict.attr('rel');
  230.         var desc = (id_of_desc && $('#' + id_of_desc).length > 0)
  231.           ? $('#' + id_of_desc).html(): pict.attr('title');
  232.  
  233.         if (n != 0) {
  234.           // title
  235.           if (typeof title != 'undefined')
  236.             gtitle.fadeOut(duration*0.3, function () {
  237.               jQuery(this).html(title).show();
  238.             });
  239.  
  240.           // description
  241.           if (typeof desc != 'undefined')
  242.             gdesc.fadeOut(duration*0.3, function () {
  243.               jQuery(this).html(desc).show();
  244.             });
  245.  
  246.           // scrolle
  247.           bar.animate({left: w*(-1)*step}, {
  248.             queue: false,
  249.             duration: 300,
  250.             easing: options.easing,
  251.             complete: function () {
  252.               var $t = jQuery(this).css({left: 0});
  253.               var f = $t.find('li').slice(0, step);
  254.               var indexes = f.map(function () {
  255.                 return jQuery.data(this, 'index');
  256.               });
  257.               var cln = f.clone(true).each(function (j) {
  258.                 jQuery.data(this, 'index', indexes[j]);
  259.               }).hide().appendTo(this).fadeIn(duration);
  260.               f.remove();
  261.               step = 1;
  262.             }
  263.           });
  264.         } else {
  265.           // title & description
  266.           if (typeof title != 'undefined') gtitle.html(title).show();
  267.           if (typeof desc != 'undefined') gdesc.html(desc).show();
  268.         }
  269.  
  270.         options.onChange.apply($this.get(), [i, pict.get()]);
  271.  
  272.         if (i < (len-1)) {
  273.           i++;
  274.         } else {
  275.           i = 0;
  276.         }
  277.         n++;
  278.       };
  279.  
  280.       // pre load
  281.       for (var j=0; j<limit; j++) {
  282.         var o = pictures.eq(j);
  283.         if (o.length > 0) {
  284.           preLoad(o.attr('href'));
  285.           o.data('loaded', true);
  286.         }
  287.       }
  288.  
  289.       display();
  290.       if (options.slideshow)
  291.         timeId = setInterval(display, options.interval);
  292.  
  293.       _inc++;
  294.     });
  295.   };
  296.  
  297.   jQuery.fn.gallery.defaults = {
  298.     width: null,
  299.     height: null,
  300.     thumbWidth: 55,
  301.     thumbHeight: 55,
  302.     zIndex: 1000,
  303.     interval: 4500,
  304.     prefix: 'gallery_',
  305.     easing: 'linear',
  306.     ratio: 0.35,
  307.     slideshow: true,
  308.     toggleBar: true,
  309.     showOverlay: true,
  310.     barPosition: null,
  311.     barClass: 'galleryBar',
  312.     contentClass: 'galleryContent',
  313.     infoClass: 'galleryInfo',
  314.     screenClass: 'galleryScreen',
  315.     titleClass: 'galleryTitle',
  316.     descClass: 'galleryDesc',
  317.     onClick: function () { return; },
  318.     onSelect: function () { return; },
  319.     onChange: function () { return; }
  320.   };
  321.  
  322.   /** private methods **/
  323.  
  324.   var preLoad = function (url) {
  325.     jQuery('<img />').attr('src', url);
  326.   };
  327.  
  328. })(jQuery);
clone this paste RAW Paste Data