Team:Heidelberg/Templates/Fancybox-thumbs-js

From 2013.igem.org

Revision as of 15:32, 4 October 2013 by Nikos (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
/*!
* 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 += '
  • <a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>'; } this.wrap = $('
    ').addClass(opts.position).appendTo('body'); this.list = $('
      ' + list + '
    ').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));