source: extensions/GDThumb/js/gdthumb.js @ 32032

Last change on this file since 32032 was 32032, checked in by SergeD, 4 years ago

version 1.0.22 - see changelog for details
File size: 13.3 KB
Line 
1var GDThumb = {
2
3  max_height: 200,
4  margin: 10,
5  max_first_thumb_width: 0.7,
6  big_thumb: null,
7  big_thumb_block: false,
8  check_pv: false,
9  small_thumb: null,
10  method: 'crop',
11  t: new Array,
12  do_merge: false,
13
14  // Initialize plugin logic, perform necessary steps
15  setup: function(method, max_height, margin, do_merge, big_thumb, check_pv) {
16
17    jQuery('ul#thumbnails').addClass("thumbnails");
18
19    GDThumb.max_height = max_height;
20    GDThumb.margin     = margin;
21    GDThumb.method     = method;
22    GDThumb.check_pv   = check_pv;
23    GDThumb.do_merge   = do_merge;
24    GDThumb.big_thumb  = big_thumb;
25
26    $(window).bind("RVTS_loaded", function() { GDThumb.init(); });
27    GDThumb.init();
28  },
29
30  init: function() {
31    if (GDThumb.do_merge) { GDThumb.merge(); }
32
33    GDThumb.build();
34    jQuery(window).bind('RVTS_loaded', GDThumb.build);
35    jQuery('ul.thumbnails').resize(GDThumb.process);
36    jQuery("ul.thumbnails .thumbLegend.overlay").click( function() { window.location.href = $(this).parent().find('a').attr('href'); });
37    jQuery("ul.thumbnails .thumbLegend.overlay-ex").click( function() { window.location.href = $(this).parent().find('a').attr('href'); });
38  },
39
40  // Merge categories and picture lists
41  merge: function() {
42
43    var mainlists = $('.content ul.thumbnails');
44    if (mainlists.length < 2) {
45      // there is only one list of elements
46    } else {
47      $(".thumbnailCategories li").addClass("album");
48      $(".thumbnailCategories").append($(".content ul#thumbnails").html());     
49      $("ul#thumbnails").remove(); 
50      $("div.loader:eq(1)").remove();
51    }
52  },
53
54  // Build thumb metadata
55  build: function () {
56
57    if ((GDThumb.method == 'square') && (GDThumb.big_thumb != null) && ((GDThumb.big_thumb.height != GDThumb.big_thumb.width) || (GDThumb.big_thumb.height < GDThumb.max_height))){
58      var main_width = jQuery('ul.thumbnails').width();
59      var max_col_count = Math.floor(main_width / GDThumb.max_height);
60      var thumb_width   = Math.floor(main_width / max_col_count) - GDThumb.margin;
61
62      GDThumb.big_thumb.height = (thumb_width * 2) + GDThumb.margin;
63      GDThumb.big_thumb.width  = GDThumb.big_thumb.height;
64      GDThumb.big_thumb.crop   = GDThumb.big_thumb.height;
65      GDThumb.max_height = thumb_width;
66    } else if (GDThumb.method == 'slide') {
67      var main_width = jQuery('ul.thumbnails').width();
68      var max_col_count = Math.floor(main_width / GDThumb.max_height);
69      var thumb_width   = Math.floor(main_width / max_col_count) - GDThumb.margin;
70      GDThumb.max_height = thumb_width;
71    }
72
73    GDThumb.t = new Array;
74    $('ul.thumbnails img.thumbnail').each(function(index) {
75      width = parseInt(jQuery(this).attr('width'));
76      height = parseInt(jQuery(this).attr('height'));
77      th = {index: index, width: width, height: height, real_width: width, real_height: height};
78
79      if (GDThumb.check_pv) {
80        var ratio = th.width / th.height;
81        GDThumb.big_thumb_block = (ratio > 2.2) || (ratio < 0.455);
82      }
83
84      if (((GDThumb.method == 'square') || (GDThumb.method == 'slide')) && (th.height != th.width)) {
85        th.width  = GDThumb.max_height;
86        th.height = GDThumb.max_height;
87        th.crop   = GDThumb.max_height;
88      } else if (height < GDThumb.max_height) {
89        th.width = Math.round(GDThumb.max_height * width / height);
90        th.height = GDThumb.max_height;
91      }
92
93      GDThumb.t.push(th);
94    });
95
96    if (GDThumb.big_thumb_block) {
97      GDThumb.big_thumb = null;
98    }
99
100    first = GDThumb.t[0];
101    if (first) {
102      GDThumb.small_thumb = {index: first.index, width: first.real_width, height: first.real_height, src: jQuery('ul.thumbnails img.thumbnail:first').attr('src')}
103    }
104    jQuery.resize.throttleWindow = false;
105    jQuery.resize.delay = 50;
106    GDThumb.process();
107  },
108
109  // Adjust thumb attributes to match plugin settings
110  process: function() {
111
112    var width_count = GDThumb.margin;
113    var line = 1;
114    var round_rest = 0;
115    var main_width = jQuery('ul.thumbnails').width();
116    var first_thumb = jQuery('ul.thumbnails img.thumbnail:first');
117    var best_size = {width: 1, height: 1};
118
119    if (GDThumb.method == 'slide') {
120      best_size.width  = GDThumb.max_height;
121      best_size.height = GDThumb.max_height;
122
123      GDThumb.resize(first_thumb, GDThumb.t[0].real_width, GDThumb.t[0].real_height, GDThumb.t[0].width, GDThumb.t[0].height, false);
124    } else if (GDThumb.method == 'square') {
125      if (GDThumb.big_thumb != null) {
126        best_size.width = GDThumb.big_thumb.width;
127        best_size.height = GDThumb.big_thumb.height;
128
129        if (GDThumb.big_thumb.src != first_thumb.attr('src')) {
130          first_thumb.attr('src', GDThumb.big_thumb.src).attr({width: GDThumb.big_thumb.width, height: GDThumb.big_thumb.height});
131          GDThumb.t[0].width = GDThumb.big_thumb.width;
132          GDThumb.t[0].height = GDThumb.big_thumb.height;
133        }
134        GDThumb.t[0].crop = best_size.width;
135        GDThumb.resize(first_thumb, GDThumb.t[0].real_width, GDThumb.t[0].real_height, GDThumb.big_thumb.width, GDThumb.big_thumb.height, true);
136      }else{
137        best_size.width  = GDThumb.max_height;
138        best_size.height = GDThumb.max_height;
139        GDThumb.resize(first_thumb, GDThumb.t[0].real_width, GDThumb.t[0].real_height, GDThumb.t[0].width, GDThumb.t[0].height, true);
140      }
141    } else {
142      if (GDThumb.big_thumb != null && GDThumb.big_thumb.height < main_width * GDThumb.max_first_thumb_width) {
143
144        // Compute best size for landscape picture (we choose bigger height)
145        min_ratio = Math.min(1.05, GDThumb.big_thumb.width/GDThumb.big_thumb.height);
146
147        for(width = GDThumb.big_thumb.width; width/best_size.height>=min_ratio; width--) {
148          width_count = GDThumb.margin;
149          height = GDThumb.margin;
150          max_height = 0;
151          available_width = main_width - (width + GDThumb.margin);
152          line = 1;
153          for (i=1;i<GDThumb.t.length;i++) {
154 
155            width_count += GDThumb.t[i].width + GDThumb.margin;
156            max_height = Math.max(GDThumb.t[i].height, max_height);
157 
158            if (width_count > available_width) {
159              ratio = width_count / available_width;
160              height += Math.round(max_height / ratio);
161              line++;
162              max_height = 0;
163              width_count = GDThumb.margin;
164              if (line > 2) {
165                if (height >= best_size.height && width/height >= min_ratio && height<=GDThumb.big_thumb.height) {
166                  best_size = {width:width,height:height};
167                }
168                break;
169              }
170            }
171          }
172          if (line <= 2) {
173            if (max_height == 0 || line == 1) {
174              height = GDThumb.big_thumb.height;
175            } else {
176              height += max_height;
177            }
178            if (height >= best_size.height && width/height >= min_ratio && height<=GDThumb.big_thumb.height) {
179              best_size = {width:width,height:height}
180            }
181          }
182        }
183        if (GDThumb.big_thumb.src != first_thumb.attr('src')) {
184          first_thumb.attr('src', GDThumb.big_thumb.src).attr({width: GDThumb.big_thumb.width, height: GDThumb.big_thumb.height});
185          GDThumb.t[0].width = GDThumb.big_thumb.width;
186          GDThumb.t[0].height = GDThumb.big_thumb.height;
187        }
188        GDThumb.t[0].crop = best_size.width;
189        GDThumb.resize(first_thumb, GDThumb.big_thumb.width, GDThumb.big_thumb.height, best_size.width, best_size.height, true);
190      }
191    }
192
193    if (best_size.width == 1) {
194      if (GDThumb.small_thumb != null && GDThumb.small_thumb.src != first_thumb.attr('src')) { 
195        first_thumb.prop('src', GDThumb.small_thumb.src).attr({width: GDThumb.small_thumb.width, height: GDThumb.small_thumb.height});
196        GDThumb.t[0].width = GDThumb.small_thumb.width;
197        GDThumb.t[0].height = GDThumb.small_thumb.height;
198      }
199      GDThumb.t[0].crop = false;
200    }
201
202    width_count = GDThumb.margin;
203    max_height = 0;
204    last_height = GDThumb.max_height;
205    line = 1;
206    thumb_process = new Array;
207
208    for (i=GDThumb.t[0].crop!=false?1:0;i<GDThumb.t.length;i++) {
209
210      width_count += GDThumb.t[i].width + GDThumb.margin;
211      max_height = Math.max(GDThumb.t[i].height, max_height);
212      thumb_process.push(GDThumb.t[i]);
213
214      available_width = main_width;
215      if (line <= 2 && GDThumb.t[0].crop !== false) {
216        available_width -= (GDThumb.t[0].crop + GDThumb.margin);
217      }
218
219      if (width_count > available_width) {
220
221        last_thumb = GDThumb.t[i].index;
222        ratio = width_count / available_width;
223        new_height = Math.round(max_height / ratio);
224        round_rest = 0;
225        width_count = GDThumb.margin;
226
227        for (j=0;j<thumb_process.length;j++) {
228
229          if ((GDThumb.method == 'square') || (GDThumb.method == 'slide')) {
230            new_width  = GDThumb.max_height;
231            new_height = GDThumb.max_height;
232          } else {
233            if (thumb_process[j].index == last_thumb) {
234              new_width = available_width - width_count - GDThumb.margin;
235            } else {
236              new_width = (thumb_process[j].width + round_rest) / ratio;
237              round_rest = new_width - Math.round(new_width);
238              new_width = Math.round(new_width);
239            }
240          }
241          GDThumb.resize(jQuery('ul.thumbnails img.thumbnail').eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, new_width, new_height, false);
242          last_height = Math.min(last_height, new_height);
243
244          width_count += new_width + GDThumb.margin;
245        }
246        thumb_process = new Array;
247        width_count = GDThumb.margin;
248        max_height = 0;
249        line++;
250      }
251    }
252
253    if (last_height == 0) {
254      last_height = GDThumb.max_height;
255    }
256
257    // Crop last line only if we have more than one line
258    for (j = 0; j < thumb_process.length; j++) {
259
260      // we have only one line, i.e. the first line is the one and only line and therefor the last line too
261      if (line == 1) {
262        GDThumb.resize(jQuery('ul.thumbnails img.thumbnail').eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, thumb_process[j].width, last_height, false);
263      }
264      // we have more than one line
265      else {
266        if ((GDThumb.method == 'square') || (GDThumb.method == 'slide')) {
267          new_width = GDThumb.max_height;
268          new_height = GDThumb.max_height;
269        }
270        else {
271          new_width = (thumb_process[j].width + round_rest) / ratio;
272          round_rest = new_width - Math.round(new_width);
273          new_width = Math.round(new_width);
274        }
275
276        GDThumb.resize(jQuery('ul.thumbnails img.thumbnail').eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, new_width, new_height, false);
277        last_height = Math.min(last_height, new_height);
278
279        width_count += new_width + GDThumb.margin;
280      }
281    }
282
283    if (main_width != jQuery('ul.thumbnails').width()) {
284      GDThumb.process();
285    }
286  },
287
288  resize: function(thumb, width, height, new_width, new_height, is_big) {
289
290    use_crop = true;
291    if (GDThumb.method == 'slide') {
292      use_crop = false;
293      thumb.css({height: '', width: ''});
294      new_width = new_height;
295
296      if (width < height) {
297        real_height = Math.round(height * new_width / width);
298        real_width  = new_width;
299      } else {
300        real_height = new_width;
301        real_width  = Math.round(width * new_height / height);
302      }
303
304      height_crop = Math.round((real_height - new_height) / 2);
305      width_crop = Math.round((real_width - new_height) / 2);
306      thumb.css({
307        height: real_height+'px',
308        width: real_width+'px'
309      });
310    } else if ((!is_big) && (GDThumb.method == 'square')) {
311      thumb.css({height: '', width: ''});
312      new_width = new_height;
313
314      if (width < height) {
315        real_height = Math.round(height * new_width / width);
316        real_width  = new_width;
317      } else {
318        real_height = new_width;
319        real_width  = Math.round(width * new_height / height);
320      }
321
322      height_crop = Math.round((real_height - new_height) / 2);
323      width_crop = Math.round((real_width - new_width) / 2);
324      thumb.css({
325        height: real_height+'px',
326        width: real_width+'px'
327      });
328    }else if (GDThumb.method == 'resize' || height < new_height || width < new_width) {
329      real_width = new_width;
330      real_height = new_height;
331      width_crop = 0;
332      height_crop = 0;
333
334      if (is_big) {
335        if (width - new_width > height - new_height) {
336          real_width = Math.round(new_height * width / height);
337          width_crop = Math.round((real_width - new_width)/2);
338        } else {
339          real_height = Math.round(new_width * height / width);
340          height_crop = Math.round((real_height - new_height)/2);
341        }
342      }
343      thumb.css({
344        height: real_height+'px',
345        width: real_width+'px'
346      });
347    } else {
348      thumb.css({height: '', width: ''});
349      height_crop = Math.round((height - new_height)/2);
350      width_crop = Math.round((width - new_width)/2);
351    }
352
353    thumb.parents('li').css({ height: new_height+'px', width: new_width+'px' });
354    if (use_crop) {
355      thumb.parent('a').css({ clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)', top: -height_crop+'px', left: -width_crop+'px' });
356    } else {
357      thumb.parent('a').css({ top: -height_crop+'px', left: -width_crop+'px' });
358    }
359  }
360}
Note: See TracBrowser for help on using the repository browser.