|
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)); |