1 | /* |
---|
2 | * SlideMyPiwiShop - v1.0 - 01-01-2014 |
---|
3 | * plugin for Slide and GThumb+ |
---|
4 | * Original by P@t for GThumb+ : http://fr.piwigo.org/ext/extension_view.php?eid=591 |
---|
5 | * Modified by Miklfe : http://piwitheme.fr/ |
---|
6 | * |
---|
7 | */ |
---|
8 | |
---|
9 | function _SlideGThumb(){ |
---|
10 | var $layerShow = $('body').data('layerShow'); |
---|
11 | if($('#the_page', $layerShow).hasClass('GThumb')) { |
---|
12 | if ($('body').hasClass('GThumb')){ |
---|
13 | $.getScript('./plugins/GThumb/js/jquery.ba-resize.min.js',function(){ |
---|
14 | |
---|
15 | _Gthumb_init(); |
---|
16 | $('body').removeClass('GThumb').addClass('GThumbReady'); |
---|
17 | }); |
---|
18 | }else{ |
---|
19 | _Gthumb_init() |
---|
20 | }; |
---|
21 | } |
---|
22 | |
---|
23 | function _Gthumb_init(){ |
---|
24 | var $ele = $('#the_page', $layerShow), |
---|
25 | $gthumb_opt = $ele.data('slidegthumb'), |
---|
26 | $gthumb_big_id = $ele.data ('gtid'), |
---|
27 | $gthumb_big_url = $ele.data ('gturl'), |
---|
28 | $gthumb_big_w = $ele.data ('gtw'), |
---|
29 | $gthumb_big_h = $ele.data ('gth'); |
---|
30 | |
---|
31 | GThumb.max_height = $gthumb_opt.height; |
---|
32 | GThumb.margin = Number($gthumb_opt.margin); |
---|
33 | GThumb.method = $gthumb_opt.method; |
---|
34 | GThumb.big_thumb = {id:$gthumb_big_id, src:$gthumb_big_url,width:$gthumb_big_w,height:$gthumb_big_h}; |
---|
35 | |
---|
36 | GThumb.build(); |
---|
37 | $(window).bind('RVTS_loaded', GThumb.build); |
---|
38 | |
---|
39 | $('#thumbnails', $layerShow).resize(GThumb.process); |
---|
40 | $('#thumbnails .gthumb', $layerShow).css({marginRight:GThumb.margin, marginBottom:GThumb.margin}); |
---|
41 | }; |
---|
42 | }; |
---|
43 | |
---|
44 | |
---|
45 | |
---|
46 | var GThumb = { |
---|
47 | |
---|
48 | max_height: 200, |
---|
49 | margin: 10, |
---|
50 | max_first_thumb_width: 0.7, |
---|
51 | big_thumb: null, |
---|
52 | small_thumb: null, |
---|
53 | method: 'crop', |
---|
54 | t: new Array, |
---|
55 | |
---|
56 | build: function () { |
---|
57 | var $layerShow = $('body').data('layerShow'); |
---|
58 | GThumb.t = new Array; |
---|
59 | jQuery('#thumbnails img.thumbnail', $layerShow).each(function(index) { |
---|
60 | width = parseInt(jQuery(this).attr('width')); |
---|
61 | height = parseInt(jQuery(this).attr('height')); |
---|
62 | th = {index:index,width:width,height:height,real_width:width,real_height:height}; |
---|
63 | if (height < GThumb.max_height) { |
---|
64 | th.width = Math.round(GThumb.max_height * width / height); |
---|
65 | th.height = GThumb.max_height; |
---|
66 | } |
---|
67 | GThumb.t.push(th); |
---|
68 | }); |
---|
69 | |
---|
70 | first = GThumb.t[0]; |
---|
71 | GThumb.small_thumb = {index:first.index,width:first.real_width,height:first.real_height,src:jQuery('#thumbnails img.thumbnail:first', $layerShow).attr('src')} |
---|
72 | |
---|
73 | jQuery.resize.throttleWindow = false; |
---|
74 | jQuery.resize.delay = 50; |
---|
75 | GThumb.process(); |
---|
76 | }, |
---|
77 | |
---|
78 | process: function() { |
---|
79 | var $layerShow = $('body').data('layerShow'); |
---|
80 | |
---|
81 | var width_count = GThumb.margin; |
---|
82 | var line = 1; |
---|
83 | var round_rest = 0; |
---|
84 | var main_width = jQuery('#thumbnails', $layerShow).width(); |
---|
85 | var first_thumb = jQuery('#thumbnails img.thumbnail:first', $layerShow); |
---|
86 | var best_size = {width:1,height:1}; |
---|
87 | |
---|
88 | if (GThumb.big_thumb != null && GThumb.big_thumb.height < main_width * GThumb.max_first_thumb_width) { |
---|
89 | |
---|
90 | // Compute best size for landscape picture (we choose bigger height) |
---|
91 | min_ratio = Math.min(1.05, GThumb.big_thumb.width/GThumb.big_thumb.height); |
---|
92 | |
---|
93 | for(width = GThumb.big_thumb.width; width/best_size.height>=min_ratio; width--) { |
---|
94 | width_count = GThumb.margin; |
---|
95 | height = GThumb.margin; |
---|
96 | max_height = 0; |
---|
97 | available_width = main_width - (width + GThumb.margin); |
---|
98 | line = 1; |
---|
99 | for (i=1;i<GThumb.t.length;i++) { |
---|
100 | |
---|
101 | width_count += GThumb.t[i].width + GThumb.margin; |
---|
102 | max_height = Math.max(GThumb.t[i].height, max_height); |
---|
103 | |
---|
104 | if (width_count > available_width) { |
---|
105 | ratio = width_count / available_width; |
---|
106 | height += Math.round(max_height / ratio); |
---|
107 | line++; |
---|
108 | max_height = 0; |
---|
109 | width_count = GThumb.margin; |
---|
110 | if (line > 2) { |
---|
111 | if (height >= best_size.height && width/height >= min_ratio && height<=GThumb.big_thumb.height) { |
---|
112 | best_size = {width:width,height:height}; |
---|
113 | } |
---|
114 | break; |
---|
115 | } |
---|
116 | } |
---|
117 | } |
---|
118 | if (line <= 2) { |
---|
119 | if (max_height == 0 || line == 1) { |
---|
120 | height = GThumb.big_thumb.height; |
---|
121 | } else { |
---|
122 | height += max_height; |
---|
123 | } |
---|
124 | if (height >= best_size.height && width/height >= min_ratio && height<=GThumb.big_thumb.height) { |
---|
125 | best_size = {width:width,height:height} |
---|
126 | } |
---|
127 | } |
---|
128 | } |
---|
129 | |
---|
130 | if (GThumb.big_thumb.src != first_thumb.attr('src')) { |
---|
131 | first_thumb.attr('src', GThumb.big_thumb.src).attr({width:GThumb.big_thumb.width,height:GThumb.big_thumb.height}); |
---|
132 | GThumb.t[0].width = GThumb.big_thumb.width; |
---|
133 | GThumb.t[0].height = GThumb.big_thumb.height; |
---|
134 | } |
---|
135 | GThumb.t[0].crop = best_size.width; |
---|
136 | GThumb.resize(first_thumb, GThumb.big_thumb.width, GThumb.big_thumb.height, best_size.width, best_size.height, true); |
---|
137 | |
---|
138 | } |
---|
139 | |
---|
140 | if (best_size.width == 1) { |
---|
141 | if (GThumb.small_thumb != null && GThumb.small_thumb.src != first_thumb.attr('src')) { |
---|
142 | first_thumb.prop('src', GThumb.small_thumb.src).attr({width:GThumb.small_thumb.width,height:GThumb.small_thumb.height}); |
---|
143 | GThumb.t[0].width = GThumb.small_thumb.width; |
---|
144 | GThumb.t[0].height = GThumb.small_thumb.height; |
---|
145 | } |
---|
146 | GThumb.t[0].crop = false; |
---|
147 | } |
---|
148 | |
---|
149 | width_count = GThumb.margin; |
---|
150 | max_height = 0; |
---|
151 | line = 1; |
---|
152 | thumb_process = new Array; |
---|
153 | |
---|
154 | for (i=GThumb.t[0].crop!=false?1:0;i<GThumb.t.length;i++) { |
---|
155 | |
---|
156 | width_count += GThumb.t[i].width + GThumb.margin; |
---|
157 | max_height = Math.max(GThumb.t[i].height, max_height); |
---|
158 | thumb_process.push(GThumb.t[i]); |
---|
159 | |
---|
160 | available_width = main_width; |
---|
161 | if (line <= 2 && GThumb.t[0].crop !== false) { |
---|
162 | available_width -= (GThumb.t[0].crop + GThumb.margin); |
---|
163 | } |
---|
164 | |
---|
165 | if (width_count > available_width) { |
---|
166 | |
---|
167 | last_thumb = GThumb.t[i].index; |
---|
168 | ratio = width_count / available_width; |
---|
169 | new_height = Math.round(max_height / ratio); |
---|
170 | round_rest = 0; |
---|
171 | width_count = GThumb.margin; |
---|
172 | |
---|
173 | for (j=0;j<thumb_process.length;j++) { |
---|
174 | |
---|
175 | if (thumb_process[j].index == last_thumb) { |
---|
176 | new_width = available_width - width_count - GThumb.margin; |
---|
177 | } else { |
---|
178 | new_width = (thumb_process[j].width + round_rest) / ratio; |
---|
179 | round_rest = new_width - Math.round(new_width); |
---|
180 | new_width = Math.round(new_width); |
---|
181 | } |
---|
182 | GThumb.resize(jQuery('#thumbnails img.thumbnail', $layerShow).eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, new_width, new_height, false); |
---|
183 | |
---|
184 | width_count += new_width + GThumb.margin; |
---|
185 | } |
---|
186 | thumb_process = new Array; |
---|
187 | width_count = GThumb.margin; |
---|
188 | max_height = 0; |
---|
189 | line++; |
---|
190 | } |
---|
191 | } |
---|
192 | |
---|
193 | // Last line does not need to be cropped |
---|
194 | for (j=0;j<thumb_process.length;j++) { |
---|
195 | GThumb.resize(jQuery('#thumbnails img.thumbnail', $layerShow).eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, thumb_process[j].width, max_height, false); |
---|
196 | } |
---|
197 | |
---|
198 | if (main_width != jQuery('#thumbnails', $layerShow).width()) { |
---|
199 | GThumb.process(); |
---|
200 | } |
---|
201 | }, |
---|
202 | |
---|
203 | resize: function(thumb, width, height, new_width, new_height, is_big) { |
---|
204 | if (GThumb.method == 'resize' || height < new_height || width < new_width) { |
---|
205 | real_width = new_width; |
---|
206 | real_height = new_height; |
---|
207 | width_crop = 0; |
---|
208 | height_crop = 0; |
---|
209 | |
---|
210 | if (is_big) { |
---|
211 | if (width - new_width > height - new_height) { |
---|
212 | real_width = Math.round(new_height * width / height); |
---|
213 | width_crop = Math.round((real_width - new_width)/2); |
---|
214 | } else { |
---|
215 | real_height = Math.round(new_width * height / width); |
---|
216 | height_crop = Math.round((real_height - new_height)/2); |
---|
217 | } |
---|
218 | } |
---|
219 | thumb.css({ |
---|
220 | height: real_height+'px', |
---|
221 | width: real_width+'px' |
---|
222 | }); |
---|
223 | } else { |
---|
224 | thumb.css({height: '', width: ''}); |
---|
225 | height_crop = Math.round((height - new_height)/2); |
---|
226 | width_crop = Math.round((width - new_width)/2); |
---|
227 | } |
---|
228 | |
---|
229 | thumb.parents('li').css({ |
---|
230 | height: new_height+'px', |
---|
231 | width: new_width+'px' |
---|
232 | }); |
---|
233 | thumb.parent('a').css({ |
---|
234 | clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)', |
---|
235 | top: -height_crop+'px', |
---|
236 | left: -width_crop+'px' |
---|
237 | }); |
---|
238 | } |
---|
239 | } |
---|