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