/*! * 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 += '
  • '; } this.wrap = $('
    ').addclass(opts.position).appendto('body'); this.list = $('').appendto(this.wrap); //load each thumbnail $.each(obj.group, function (i) { var href = thumbsource( obj.group[ i ] ); if (!href) { return; } $("").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));