1 | var GThumb = { |
---|
2 | |
---|
3 | selector: null, |
---|
4 | max_height: 200, |
---|
5 | margin: 10, |
---|
6 | max_first_thumb_width: 0.7, |
---|
7 | big_thumb: null, |
---|
8 | small_thumb: null, |
---|
9 | method: 'crop', |
---|
10 | t: new Array, |
---|
11 | |
---|
12 | queue: jQuery.manageAjax.create('queued', { |
---|
13 | queue: true, |
---|
14 | cacheResponse: false, |
---|
15 | maxRequests: 2, |
---|
16 | preventDoubleRequests: false |
---|
17 | }), |
---|
18 | |
---|
19 | build: function (selector) { |
---|
20 | |
---|
21 | this.selector = selector; |
---|
22 | jQuery(selector+' img').each(function() { |
---|
23 | id = parseInt(this.id.substring(2)); |
---|
24 | width = parseInt(jQuery(this).attr('width')); |
---|
25 | height = parseInt(jQuery(this).attr('height')); |
---|
26 | GThumb.t.push({id:id,width:width,height:height}); |
---|
27 | |
---|
28 | if (jQuery(this).attr('src') == '') { |
---|
29 | GThumb.addToQueue(id, 1); |
---|
30 | } |
---|
31 | }); |
---|
32 | |
---|
33 | jQuery.resize.throttleWindow = false; |
---|
34 | jQuery.resize.delay = 50; |
---|
35 | jQuery(selector).resize(function() { GThumb.process(); }); |
---|
36 | this.process(); |
---|
37 | }, |
---|
38 | |
---|
39 | addToQueue: function (id, loop) { |
---|
40 | |
---|
41 | this.queue.add({ |
---|
42 | type: 'GET', |
---|
43 | url: 'ws.php', |
---|
44 | data: { |
---|
45 | method: 'pwg.images.getGThumbPlusThumbnail', |
---|
46 | image_id: id, |
---|
47 | format: 'json' |
---|
48 | }, |
---|
49 | dataType: 'json', |
---|
50 | success: function(data) { |
---|
51 | if (data.stat == 'ok') { |
---|
52 | jQuery('#gt'+data.result.id).prop('src', data.result.src).show(); |
---|
53 | } else if (loop < 4) { |
---|
54 | GThumb.addToQueue(id, ++loop); |
---|
55 | } |
---|
56 | }, |
---|
57 | error: function() { |
---|
58 | if (loop < 4) GThumb.addToQueue(id, ++loop); |
---|
59 | } |
---|
60 | }); |
---|
61 | }, |
---|
62 | |
---|
63 | process: function() { |
---|
64 | |
---|
65 | var width_count = this.margin; |
---|
66 | var line = 1; |
---|
67 | var round_rest = 0; |
---|
68 | var main_width = jQuery(this.selector).width(); |
---|
69 | var first_thumb = jQuery(this.selector+' img:first'); |
---|
70 | var best_size = {width:1,height:1}; |
---|
71 | |
---|
72 | if (this.big_thumb != null && this.big_thumb.height < main_width * this.max_first_thumb_width) { |
---|
73 | |
---|
74 | // Compute best size for landscape picture (we choose bigger height) |
---|
75 | min_ratio = Math.min(1.05, this.big_thumb.width/this.big_thumb.height); |
---|
76 | |
---|
77 | for(width = this.big_thumb.width; width/best_size.height>=min_ratio; width--) { |
---|
78 | width_count = this.margin; |
---|
79 | height = this.margin; |
---|
80 | max_height = 0; |
---|
81 | available_width = main_width - (width + this.margin); |
---|
82 | line = 1; |
---|
83 | for (i=1;i<this.t.length;i++) { |
---|
84 | |
---|
85 | width_count += this.t[i].width + this.margin; |
---|
86 | max_height = Math.max(this.t[i].height, max_height); |
---|
87 | |
---|
88 | if (width_count > available_width) { |
---|
89 | ratio = width_count / available_width; |
---|
90 | height += Math.round(max_height / ratio); |
---|
91 | line++; |
---|
92 | max_height = 0; |
---|
93 | width_count = this.margin; |
---|
94 | if (line > 2) { |
---|
95 | if (height >= best_size.height && width/height >= min_ratio && height<=this.big_thumb.height) { |
---|
96 | best_size = {width:width,height:height} |
---|
97 | } |
---|
98 | break; |
---|
99 | } |
---|
100 | } |
---|
101 | } |
---|
102 | if (line <= 2) { |
---|
103 | if (max_height == 0 || line == 1) { |
---|
104 | height = this.big_thumb.height; |
---|
105 | } else { |
---|
106 | height += max_height; |
---|
107 | } |
---|
108 | if (height >= best_size.height && width/height >= min_ratio && height<=this.big_thumb.height) { |
---|
109 | best_size = {width:width,height:height} |
---|
110 | } |
---|
111 | } |
---|
112 | } |
---|
113 | |
---|
114 | if (this.big_thumb.src != first_thumb.attr('src')) { |
---|
115 | first_thumb.attr('src', this.big_thumb.src).attr({width:this.big_thumb.width,height:this.big_thumb.height}); |
---|
116 | this.t[0].width = this.big_thumb.width; |
---|
117 | this.t[0].height = this.big_thumb.height; |
---|
118 | } |
---|
119 | this.t[0].crop = best_size.width; |
---|
120 | this.resize(first_thumb, this.big_thumb.width, this.big_thumb.height, best_size.width, best_size.height, true); |
---|
121 | |
---|
122 | } |
---|
123 | |
---|
124 | if (best_size.width == 1) { |
---|
125 | if (this.small_thumb != null && this.small_thumb.src != first_thumb.attr('src')) { |
---|
126 | first_thumb.prop('src', this.small_thumb.src).attr({width:this.small_thumb.width,height:this.small_thumb.height}); |
---|
127 | this.t[0].width = this.small_thumb.width; |
---|
128 | this.t[0].height = this.small_thumb.height; |
---|
129 | } |
---|
130 | this.t[0].crop = false; |
---|
131 | } |
---|
132 | |
---|
133 | width_count = this.margin; |
---|
134 | max_height = 0; |
---|
135 | line = 1; |
---|
136 | thumb_process = new Array; |
---|
137 | |
---|
138 | for (i=this.t[0].crop!=false?1:0;i<this.t.length;i++) { |
---|
139 | |
---|
140 | width_count += this.t[i].width + this.margin; |
---|
141 | max_height = Math.max(this.t[i].height, max_height); |
---|
142 | thumb_process.push(this.t[i]); |
---|
143 | |
---|
144 | available_width = main_width; |
---|
145 | if (line <= 2 && this.t[0].crop !== false) { |
---|
146 | available_width -= (this.t[0].crop + this.margin); |
---|
147 | } |
---|
148 | |
---|
149 | if (width_count > available_width) { |
---|
150 | |
---|
151 | last_thumb = this.t[i].id; |
---|
152 | ratio = width_count / available_width; |
---|
153 | new_height = Math.round(max_height / ratio); |
---|
154 | round_rest = 0; |
---|
155 | width_count = this.margin; |
---|
156 | |
---|
157 | for (j=0;j<thumb_process.length;j++) { |
---|
158 | |
---|
159 | if (thumb_process[j].id == last_thumb) { |
---|
160 | new_width = available_width - width_count - this.margin; |
---|
161 | } else { |
---|
162 | new_width = (thumb_process[j].width + round_rest) / ratio; |
---|
163 | round_rest = new_width - Math.round(new_width); |
---|
164 | new_width = Math.round(new_width); |
---|
165 | } |
---|
166 | this.resize(jQuery('#gt'+thumb_process[j].id), thumb_process[j].width, thumb_process[j].height, new_width, new_height, false); |
---|
167 | |
---|
168 | width_count += new_width + this.margin; |
---|
169 | } |
---|
170 | thumb_process = new Array; |
---|
171 | width_count = this.margin; |
---|
172 | max_height = 0; |
---|
173 | line++; |
---|
174 | } |
---|
175 | } |
---|
176 | |
---|
177 | // Last line does not need to be cropped |
---|
178 | for (j=0;j<thumb_process.length;j++) { |
---|
179 | this.resize(jQuery('#gt'+thumb_process[j].id), thumb_process[j].width, thumb_process[j].height, thumb_process[j].width, max_height, false); |
---|
180 | } |
---|
181 | |
---|
182 | if (main_width != jQuery(this.selector).width()) { |
---|
183 | this.process(); |
---|
184 | } |
---|
185 | }, |
---|
186 | |
---|
187 | resize: function(thumb, width, height, new_width, new_height, is_big) { |
---|
188 | |
---|
189 | if (this.method == 'resize') { |
---|
190 | real_width = Math.min(new_width, width); |
---|
191 | real_height = Math.min(new_height, height); |
---|
192 | width_crop = 0; |
---|
193 | height_crop = 0; |
---|
194 | |
---|
195 | if (is_big) { |
---|
196 | if (width - new_width > height - new_height) { |
---|
197 | real_width = Math.round(new_height * width / height); |
---|
198 | width_crop = Math.round((real_width - new_width)/2); |
---|
199 | } else { |
---|
200 | real_height = Math.round(new_width * height / width); |
---|
201 | height_crop = Math.round((real_height - new_height)/2); |
---|
202 | } |
---|
203 | } |
---|
204 | thumb.css({ |
---|
205 | height: real_height+'px', |
---|
206 | width: real_width+'px' |
---|
207 | }); |
---|
208 | } else { |
---|
209 | thumb.css({height: '', width: ''}); |
---|
210 | height_crop = Math.round((height - new_height)/2); |
---|
211 | width_crop = Math.round((width - new_width)/2); |
---|
212 | } |
---|
213 | |
---|
214 | thumb.parents('li').css({ |
---|
215 | height: new_height+'px', |
---|
216 | width: new_width+'px' |
---|
217 | }); |
---|
218 | thumb.parent('a').css({ |
---|
219 | clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)', |
---|
220 | top: -height_crop+'px', |
---|
221 | left: -width_crop+'px' |
---|
222 | }); |
---|
223 | } |
---|
224 | } |
---|