You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.7 KiB
162 lines
3.7 KiB
/*! |
|
* 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)); |