bgneal@106:  /*!
bgneal@106:  * Thumbnail helper for fancyBox
bgneal@106:  * version: 1.0.7 (Mon, 01 Oct 2012)
bgneal@106:  * @requires fancyBox v2.0 or later
bgneal@106:  *
bgneal@106:  * Usage:
bgneal@106:  *     $(".fancybox").fancybox({
bgneal@106:  *         helpers : {
bgneal@106:  *             thumbs: {
bgneal@106:  *                 width  : 50,
bgneal@106:  *                 height : 50
bgneal@106:  *             }
bgneal@106:  *         }
bgneal@106:  *     });
bgneal@106:  *
bgneal@106:  */
bgneal@106: (function ($) {
bgneal@106: 	//Shortcut for fancyBox object
bgneal@106: 	var F = $.fancybox;
bgneal@106: 
bgneal@106: 	//Add helper object
bgneal@106: 	F.helpers.thumbs = {
bgneal@106: 		defaults : {
bgneal@106: 			width    : 50,       // thumbnail width
bgneal@106: 			height   : 50,       // thumbnail height
bgneal@106: 			position : 'bottom', // 'top' or 'bottom'
bgneal@106: 			source   : function ( item ) {  // function to obtain the URL of the thumbnail image
bgneal@106: 				var href;
bgneal@106: 
bgneal@106: 				if (item.element) {
bgneal@106: 					href = $(item.element).find('img').attr('src');
bgneal@106: 				}
bgneal@106: 
bgneal@106: 				if (!href && item.type === 'image' && item.href) {
bgneal@106: 					href = item.href;
bgneal@106: 				}
bgneal@106: 
bgneal@106: 				return href;
bgneal@106: 			}
bgneal@106: 		},
bgneal@106: 
bgneal@106: 		wrap  : null,
bgneal@106: 		list  : null,
bgneal@106: 		width : 0,
bgneal@106: 
bgneal@106: 		init: function (opts, obj) {
bgneal@106: 			var that = this,
bgneal@106: 				list,
bgneal@106: 				thumbWidth  = opts.width,
bgneal@106: 				thumbHeight = opts.height,
bgneal@106: 				thumbSource = opts.source;
bgneal@106: 
bgneal@106: 			//Build list structure
bgneal@106: 			list = '';
bgneal@106: 
bgneal@106: 			for (var n = 0; n < obj.group.length; n++) {
bgneal@106: 				list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
bgneal@106: 			}
bgneal@106: 
bgneal@106: 			this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
bgneal@106: 			this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
bgneal@106: 
bgneal@106: 			//Load each thumbnail
bgneal@106: 			$.each(obj.group, function (i) {
bgneal@106: 				var href = thumbSource( obj.group[ i ] );
bgneal@106: 
bgneal@106: 				if (!href) {
bgneal@106: 					return;
bgneal@106: 				}
bgneal@106: 
bgneal@106: 				$("<img />").load(function () {
bgneal@106: 					var width  = this.width,
bgneal@106: 						height = this.height,
bgneal@106: 						widthRatio, heightRatio, parent;
bgneal@106: 
bgneal@106: 					if (!that.list || !width || !height) {
bgneal@106: 						return;
bgneal@106: 					}
bgneal@106: 
bgneal@106: 					//Calculate thumbnail width/height and center it
bgneal@106: 					widthRatio  = width / thumbWidth;
bgneal@106: 					heightRatio = height / thumbHeight;
bgneal@106: 
bgneal@106: 					parent = that.list.children().eq(i).find('a');
bgneal@106: 
bgneal@106: 					if (widthRatio >= 1 && heightRatio >= 1) {
bgneal@106: 						if (widthRatio > heightRatio) {
bgneal@106: 							width  = Math.floor(width / heightRatio);
bgneal@106: 							height = thumbHeight;
bgneal@106: 
bgneal@106: 						} else {
bgneal@106: 							width  = thumbWidth;
bgneal@106: 							height = Math.floor(height / widthRatio);
bgneal@106: 						}
bgneal@106: 					}
bgneal@106: 
bgneal@106: 					$(this).css({
bgneal@106: 						width  : width,
bgneal@106: 						height : height,
bgneal@106: 						top    : Math.floor(thumbHeight / 2 - height / 2),
bgneal@106: 						left   : Math.floor(thumbWidth / 2 - width / 2)
bgneal@106: 					});
bgneal@106: 
bgneal@106: 					parent.width(thumbWidth).height(thumbHeight);
bgneal@106: 
bgneal@106: 					$(this).hide().appendTo(parent).fadeIn(300);
bgneal@106: 
bgneal@106: 				}).attr('src', href);
bgneal@106: 			});
bgneal@106: 
bgneal@106: 			//Set initial width
bgneal@106: 			this.width = this.list.children().eq(0).outerWidth(true);
bgneal@106: 
bgneal@106: 			this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
bgneal@106: 		},
bgneal@106: 
bgneal@106: 		beforeLoad: function (opts, obj) {
bgneal@106: 			//Remove self if gallery do not have at least two items
bgneal@106: 			if (obj.group.length < 2) {
bgneal@106: 				obj.helpers.thumbs = false;
bgneal@106: 
bgneal@106: 				return;
bgneal@106: 			}
bgneal@106: 
bgneal@106: 			//Increase bottom margin to give space for thumbs
bgneal@106: 			obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
bgneal@106: 		},
bgneal@106: 
bgneal@106: 		afterShow: function (opts, obj) {
bgneal@106: 			//Check if exists and create or update list
bgneal@106: 			if (this.list) {
bgneal@106: 				this.onUpdate(opts, obj);
bgneal@106: 
bgneal@106: 			} else {
bgneal@106: 				this.init(opts, obj);
bgneal@106: 			}
bgneal@106: 
bgneal@106: 			//Set active element
bgneal@106: 			this.list.children().removeClass('active').eq(obj.index).addClass('active');
bgneal@106: 		},
bgneal@106: 
bgneal@106: 		//Center list
bgneal@106: 		onUpdate: function (opts, obj) {
bgneal@106: 			if (this.list) {
bgneal@106: 				this.list.stop(true).animate({
bgneal@106: 					'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
bgneal@106: 				}, 150);
bgneal@106: 			}
bgneal@106: 		},
bgneal@106: 
bgneal@106: 		beforeClose: function () {
bgneal@106: 			if (this.wrap) {
bgneal@106: 				this.wrap.remove();
bgneal@106: 			}
bgneal@106: 
bgneal@106: 			this.wrap  = null;
bgneal@106: 			this.list  = null;
bgneal@106: 			this.width = 0;
bgneal@106: 		}
bgneal@106: 	}
bgneal@106: 
bgneal@106: }(jQuery));