Mercurial > public > madeira

comparison 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
comparison
equal deleted inserted replaced
105:afcbfe23f068 106:846cda22d77c
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));