Index: fancybox/source/helpers/jquery.fancybox-thumbs.js |
=================================================================== |
new file mode 100755 |
--- /dev/null |
+++ b/fancybox/source/helpers/jquery.fancybox-thumbs.js |
@@ -0,0 +1,162 @@ |
+ /*! |
+ * 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 href = thumbSource( obj.group[ i ] ); |
+ |
+ 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); |
+ }); |
+ |
+ //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)); |