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