Mercurial > public > madeira

annotate static/js/fancybox2/source/helpers/jquery.fancybox-thumbs.js @ 106:846cda22d77c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Bootstrap: Photo pages reworked.
author Brian Neal <bgneal@gmail.com>
date Fri, 18 Oct 2013 20:31:36 -0500
parents
children
rev   line source
bgneal@106 1 /*!
bgneal@106 2 * Thumbnail helper for fancyBox
bgneal@106 3 * version: 1.0.7 (Mon, 01 Oct 2012)
bgneal@106 4 * @requires fancyBox v2.0 or later
bgneal@106 5 *
bgneal@106 6 * Usage:
bgneal@106 7 * $(".fancybox").fancybox({
bgneal@106 8 * helpers : {
bgneal@106 9 * thumbs: {
bgneal@106 10 * width : 50,
bgneal@106 11 * height : 50
bgneal@106 12 * }
bgneal@106 13 * }
bgneal@106 14 * });
bgneal@106 15 *
bgneal@106 16 */
bgneal@106 17 (function ($) {
bgneal@106 18 //Shortcut for fancyBox object
bgneal@106 19 var F = $.fancybox;
bgneal@106 20
bgneal@106 21 //Add helper object
bgneal@106 22 F.helpers.thumbs = {
bgneal@106 23 defaults : {
bgneal@106 24 width : 50, // thumbnail width
bgneal@106 25 height : 50, // thumbnail height
bgneal@106 26 position : 'bottom', // 'top' or 'bottom'
bgneal@106 27 source : function ( item ) { // function to obtain the URL of the thumbnail image
bgneal@106 28 var href;
bgneal@106 29
bgneal@106 30 if (item.element) {
bgneal@106 31 href = $(item.element).find('img').attr('src');
bgneal@106 32 }
bgneal@106 33
bgneal@106 34 if (!href && item.type === 'image' && item.href) {
bgneal@106 35 href = item.href;
bgneal@106 36 }
bgneal@106 37
bgneal@106 38 return href;
bgneal@106 39 }
bgneal@106 40 },
bgneal@106 41
bgneal@106 42 wrap : null,
bgneal@106 43 list : null,
bgneal@106 44 width : 0,
bgneal@106 45
bgneal@106 46 init: function (opts, obj) {
bgneal@106 47 var that = this,
bgneal@106 48 list,
bgneal@106 49 thumbWidth = opts.width,
bgneal@106 50 thumbHeight = opts.height,
bgneal@106 51 thumbSource = opts.source;
bgneal@106 52
bgneal@106 53 //Build list structure
bgneal@106 54 list = '';
bgneal@106 55
bgneal@106 56 for (var n = 0; n < obj.group.length; n++) {
bgneal@106 57 list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
bgneal@106 58 }
bgneal@106 59
bgneal@106 60 this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
bgneal@106 61 this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
bgneal@106 62
bgneal@106 63 //Load each thumbnail
bgneal@106 64 $.each(obj.group, function (i) {
bgneal@106 65 var href = thumbSource( obj.group[ i ] );
bgneal@106 66
bgneal@106 67 if (!href) {
bgneal@106 68 return;
bgneal@106 69 }
bgneal@106 70
bgneal@106 71 $("<img />").load(function () {
bgneal@106 72 var width = this.width,
bgneal@106 73 height = this.height,
bgneal@106 74 widthRatio, heightRatio, parent;
bgneal@106 75
bgneal@106 76 if (!that.list || !width || !height) {
bgneal@106 77 return;
bgneal@106 78 }
bgneal@106 79
bgneal@106 80 //Calculate thumbnail width/height and center it
bgneal@106 81 widthRatio = width / thumbWidth;
bgneal@106 82 heightRatio = height / thumbHeight;
bgneal@106 83
bgneal@106 84 parent = that.list.children().eq(i).find('a');
bgneal@106 85
bgneal@106 86 if (widthRatio >= 1 && heightRatio >= 1) {
bgneal@106 87 if (widthRatio > heightRatio) {
bgneal@106 88 width = Math.floor(width / heightRatio);
bgneal@106 89 height = thumbHeight;
bgneal@106 90
bgneal@106 91 } else {
bgneal@106 92 width = thumbWidth;
bgneal@106 93 height = Math.floor(height / widthRatio);
bgneal@106 94 }
bgneal@106 95 }
bgneal@106 96
bgneal@106 97 $(this).css({
bgneal@106 98 width : width,
bgneal@106 99 height : height,
bgneal@106 100 top : Math.floor(thumbHeight / 2 - height / 2),
bgneal@106 101 left : Math.floor(thumbWidth / 2 - width / 2)
bgneal@106 102 });
bgneal@106 103
bgneal@106 104 parent.width(thumbWidth).height(thumbHeight);
bgneal@106 105
bgneal@106 106 $(this).hide().appendTo(parent).fadeIn(300);
bgneal@106 107
bgneal@106 108 }).attr('src', href);
bgneal@106 109 });
bgneal@106 110
bgneal@106 111 //Set initial width
bgneal@106 112 this.width = this.list.children().eq(0).outerWidth(true);
bgneal@106 113
bgneal@106 114 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)));
bgneal@106 115 },
bgneal@106 116
bgneal@106 117 beforeLoad: function (opts, obj) {
bgneal@106 118 //Remove self if gallery do not have at least two items
bgneal@106 119 if (obj.group.length < 2) {
bgneal@106 120 obj.helpers.thumbs = false;
bgneal@106 121
bgneal@106 122 return;
bgneal@106 123 }
bgneal@106 124
bgneal@106 125 //Increase bottom margin to give space for thumbs
bgneal@106 126 obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
bgneal@106 127 },
bgneal@106 128
bgneal@106 129 afterShow: function (opts, obj) {
bgneal@106 130 //Check if exists and create or update list
bgneal@106 131 if (this.list) {
bgneal@106 132 this.onUpdate(opts, obj);
bgneal@106 133
bgneal@106 134 } else {
bgneal@106 135 this.init(opts, obj);
bgneal@106 136 }
bgneal@106 137
bgneal@106 138 //Set active element
bgneal@106 139 this.list.children().removeClass('active').eq(obj.index).addClass('active');
bgneal@106 140 },
bgneal@106 141
bgneal@106 142 //Center list
bgneal@106 143 onUpdate: function (opts, obj) {
bgneal@106 144 if (this.list) {
bgneal@106 145 this.list.stop(true).animate({
bgneal@106 146 'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
bgneal@106 147 }, 150);
bgneal@106 148 }
bgneal@106 149 },
bgneal@106 150
bgneal@106 151 beforeClose: function () {
bgneal@106 152 if (this.wrap) {
bgneal@106 153 this.wrap.remove();
bgneal@106 154 }
bgneal@106 155
bgneal@106 156 this.wrap = null;
bgneal@106 157 this.list = null;
bgneal@106 158 this.width = 0;
bgneal@106 159 }
bgneal@106 160 }
bgneal@106 161
bgneal@106 162 }(jQuery));