/**
* jQuery Gallery Plugin
*   http://code.google.com/p/jquery-gallery-plugin/
*
* Copyright (c) 2009 Yusuke Horie
*
* Released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Since  : 0.1.0 - 08/02/2009
* Version: 0.3.0 - 08/25/2009
*/
(function(jQuery) { var _inc = 0; jQuery.fn.gallery = function(options) { var options = jQuery.extend({}, jQuery.fn.gallery.defaults, options); return this.each(function(i, e) { var $this = jQuery(e), id = options.prefix + _inc, i = 0, n = 0, limit = 5, step = 1, duration = Math.ceil(options.interval * 0.3), timeId = null; var height; if (!options.height) { if (!parseInt($this.css('height'), 10)) { height = '450px' } else { height = $this.height() } } else { height = options.height } var width = (!options.width) ? $this.width() : options.width, paddingTop = parseInt($this.css('padding-top'), 10), paddingBottom = parseInt($this.css('padding-bottom'), 10), pheight = parseInt(height, 10), contentHeight = pheight - options.thumbHeight + paddingTop, o = $this.offset(), barWidth = jQuery(window).width() - o.left; var barTop = (options.barPosition == 'top') ? paddingTop : contentHeight; if (options.toggleBar) { if (options.barPosition == 'top') { $this.hover(function() { $('#thumbnails_' + id).animate({ top: paddingTop }, { queue: false, duration: 300 }) }, function() { $('#thumbnails_' + id).animate({ top: barTop }, { queue: false, duration: 300 }) }); barTop = (options.thumbHeight + paddingTop) * (-1) } else { var outerHeight = pheight + paddingTop + paddingBottom; $this.hover(function() { $('#thumbnails_' + id).animate({ top: contentHeight }, { queue: false, duration: 300 }) }, function() { $('#thumbnails_' + id).animate({ top: outerHeight }, { queue: false, duration: 300 }) }); barTop = outerHeight } } $this.css({ width: width, height: height, zIndex: options.zIndex }).prepend('<div id="' + id + '"></div>').find('ul').attr('id', 'thumbnails_' + id).addClass(options.barClass).css({ top: barTop, height: options.thumbHeight + 'px', width: barWidth + 'px', zIndex: options.zIndex + 2000 }).find('li').css({ width: options.thumbWidth + 'px', height: options.thumbHeight + 'px' }).each(function(index) { jQuery.data(this, 'index', index) }).click(function(event) { event.preventDefault(); if (options.slideshow) clearInterval(timeId); if ($.isFunction(options.onSelect)) options.onSelect.apply(this, [event]); var $e = this; bar.find('li').each(function(index, e) { if (e == $e) { step = index; return false } }); i = jQuery.data(this, 'index'); for (var j = i; j < i + limit; j++) { var o = pictures.eq(j); if (o.length > 0 && typeof o.data('loaded') == 'undefined') { preLoad(o.attr('href')); o.data('loaded', true) } } display(); if (options.slideshow) timeId = setInterval(display, options.interval) }); if (options.showOverlay) { var itop = pheight * (1 - options.ratio) + paddingTop, ileft = $this.css('padding-left'), iheight = (pheight * options.ratio) + paddingTop; $('<div />').addClass(options.screenClass).css({ opacity: 0.5, top: itop, left: 0, height: iheight, width: $this.outerWidth(), zIndex: options.zIndex + 1000 }).insertAfter('#' + id); $('<div />').addClass(options.infoClass).html('<div id="gtitle_' + id + '" class="' + options.titleClass + '" style="display:none;"></div>' + '<div id="gdesc_' + id + '" class="' + options.descClass + '" style="display:none;"></div>').css({ top: itop, left: 0, height: iheight, zIndex: options.zIndex + 1500 }).insertAfter('#' + id) } var c = jQuery('#' + id).css({ position: 'relative', width: width, height: height, overflow: 'hidden' }).addClass(options.contentClass); var bar = $this.find('ul').show(), thumbnails = bar.find('img'), pictures = $this.find('a').bind('click.gallery', function(e) { e.preventDefault() }), gtitle = $('#gtitle_' + id), gdesc = $('#gdesc_' + id), len = thumbnails.length, w = $this.find('li:first').outerWidth(true); var display = function() { var t = thumbnails.eq(i); var pict = pictures.eq(i); var p = pict.attr('href'); var pid = id + '_' + i; var next = pictures.eq(i + limit); if (next.length > 0 && typeof next.data('loaded') == 'undefined') { preLoad(next.attr('href')) } c.find('img').animate({ opacity: 0.0 }, { queue: false, duration: duration, easing: 'linear', complete: function() { jQuery(this).remove() } }); jQuery('<img />').attr('src', p).attr('id', pid).css({ position: 'absolute', top: 0, left: 0, opacity: 0.0 }).bind('click.gallery', function(event) { options.onClick.apply(this, [event, pict.get()]) }).appendTo('#' + id).animate({ opacity: 1.0 }, { queue: false, duration: duration, easing: 'linear' }).load(function() { pict.data('loaded', true) }); var title = t.attr('title'); var id_of_desc = pict.attr('rel'); var desc = (id_of_desc && $('#' + id_of_desc).length > 0) ? $('#' + id_of_desc).html() : pict.attr('title'); if (n != 0) { if (typeof title != 'undefined') gtitle.fadeOut(duration * 0.3, function() { jQuery(this).html(title).show() }); if (typeof desc != 'undefined') gdesc.fadeOut(duration * 0.3, function() { jQuery(this).html(desc).show() }); bar.animate({ left: w * (-1) * step }, { queue: false, duration: 300, easing: options.easing, complete: function() { var $t = jQuery(this).css({ left: 0 }); var f = $t.find('li').slice(0, step); var indexes = f.map(function() { return jQuery.data(this, 'index') }); var cln = f.clone(true).each(function(j) { jQuery.data(this, 'index', indexes[j]) }).hide().appendTo(this).fadeIn(duration); f.remove(); step = 1 } }) } else { if (typeof title != 'undefined') gtitle.html(title).show(); if (typeof desc != 'undefined') gdesc.html(desc).show() } options.onChange.apply($this.get(), [i, pict.get()]); if (i < (len - 1)) { i++ } else { i = 0 } n++ }; for (var j = 0; j < limit; j++) { var o = pictures.eq(j); if (o.length > 0) { preLoad(o.attr('href')); o.data('loaded', true) } } display(); if (options.slideshow) timeId = setInterval(display, options.interval); _inc++ }) }; jQuery.fn.gallery.defaults = { width: null, height: null, thumbWidth: 55, thumbHeight: 55, zIndex: 1000, interval: 4500, prefix: 'gallery_', easing: 'linear', ratio: 0.35, slideshow: true, toggleBar: true, showOverlay: true, barPosition: null, barClass: 'galleryBar', contentClass: 'galleryContent', infoClass: 'galleryInfo', screenClass: 'galleryScreen', titleClass: 'galleryTitle', descClass: 'galleryDesc', onClick: function() { return }, onSelect: function() { return }, onChange: function() { return } }; var preLoad = function(url) { jQuery('<img />').attr('src', url) } })(jQuery);