library/fancybox/helpers/jquery.fancybox-thumbs.js

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