165 lines
3.8 KiB
JavaScript
165 lines
3.8 KiB
JavaScript
/*!
|
|
* 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)); |