1  /*!

     2  * Thumbnail helper for fancyBox

     3  * version: 1.0.7 (Mon, 01 Oct 2012)

     4  * @requires fancyBox v2.0 or later

     5  *

     6  * Usage:

     7  *     $(".fancybox").fancybox({

     8  *         helpers : {

     9  *             thumbs: {

    10  *                 width  : 50,

    11  *                 height : 50

    12  *             }

    13  *         }

    14  *     });

    15  *

    16  */

    17 (function ($) {

    18 	//Shortcut for fancyBox object

    19 	var F = $.fancybox;

    20 

    21 	//Add helper object

    22 	F.helpers.thumbs = {

    23 		defaults : {

    24 			width    : 50,       // thumbnail width

    25 			height   : 50,       // thumbnail height

    26 			position : 'bottom', // 'top' or 'bottom'

    27 			source   : function ( item ) {  // function to obtain the URL of the thumbnail image

    28 				var href;

    29 

    30 				if (item.element) {

    31 					href = $(item.element).find('img').attr('src');

    32 				}

    33 

    34 				if (!href && item.type === 'image' && item.href) {

    35 					href = item.href;

    36 				}

    37 

    38 				return href;

    39 			}

    40 		},

    41 

    42 		wrap  : null,

    43 		list  : null,

    44 		width : 0,

    45 

    46 		init: function (opts, obj) {

    47 			var that = this,

    48 				list,

    49 				thumbWidth  = opts.width,

    50 				thumbHeight = opts.height,

    51 				thumbSource = opts.source;

    52 

    53 			//Build list structure

    54 			list = '';

    55 

    56 			for (var n = 0; n < obj.group.length; n++) {

    57 				list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';

    58 			}

    59 

    60 			this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');

    61 			this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);

    62 

    63 			//Load each thumbnail

    64 			$.each(obj.group, function (i) {

    65 				var href = thumbSource( obj.group[ i ] );

    66 

    67 				if (!href) {

    68 					return;

    69 				}

    70 

    71 				$("<img />").load(function () {

    72 					var width  = this.width,

    73 						height = this.height,

    74 						widthRatio, heightRatio, parent;

    75 

    76 					if (!that.list || !width || !height) {

    77 						return;

    78 					}

    79 

    80 					//Calculate thumbnail width/height and center it

    81 					widthRatio  = width / thumbWidth;

    82 					heightRatio = height / thumbHeight;

    83 

    84 					parent = that.list.children().eq(i).find('a');

    85 

    86 					if (widthRatio >= 1 && heightRatio >= 1) {

    87 						if (widthRatio > heightRatio) {

    88 							width  = Math.floor(width / heightRatio);

    89 							height = thumbHeight;

    90 

    91 						} else {

    92 							width  = thumbWidth;

    93 							height = Math.floor(height / widthRatio);

    94 						}

    95 					}

    96 

    97 					$(this).css({

    98 						width  : width,

    99 						height : height,

   100 						top    : Math.floor(thumbHeight / 2 - height / 2),

   101 						left   : Math.floor(thumbWidth / 2 - width / 2)

   102 					});

   103 

   104 					parent.width(thumbWidth).height(thumbHeight);

   105 

   106 					$(this).hide().appendTo(parent).fadeIn(300);

   107 

   108 				}).attr('src', href);

   109 			});

   110 

   111 			//Set initial width

   112 			this.width = this.list.children().eq(0).outerWidth(true);

   113 

   114 			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)));

   115 		},

   116 

   117 		beforeLoad: function (opts, obj) {

   118 			//Remove self if gallery do not have at least two items

   119 			if (obj.group.length < 2) {

   120 				obj.helpers.thumbs = false;

   121 

   122 				return;

   123 			}

   124 

   125 			//Increase bottom margin to give space for thumbs

   126 			obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);

   127 		},

   128 

   129 		afterShow: function (opts, obj) {

   130 			//Check if exists and create or update list

   131 			if (this.list) {

   132 				this.onUpdate(opts, obj);

   133 

   134 			} else {

   135 				this.init(opts, obj);

   136 			}

   137 

   138 			//Set active element

   139 			this.list.children().removeClass('active').eq(obj.index).addClass('active');

   140 		},

   141 

   142 		//Center list

   143 		onUpdate: function (opts, obj) {

   144 			if (this.list) {

   145 				this.list.stop(true).animate({

   146 					'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))

   147 				}, 150);

   148 			}

   149 		},

   150 

   151 		beforeClose: function () {

   152 			if (this.wrap) {

   153 				this.wrap.remove();

   154 			}

   155 

   156 			this.wrap  = null;

   157 			this.list  = null;

   158 			this.width = 0;

   159 		}

   160 	}

   161 

   162 }(jQuery));