source: extensions/GThumb/js/gthumb.js @ 12696

Last change on this file since 12696 was 12696, checked in by patdenice, 12 years ago

Bug corrected with smaller thumbnails than normal size.

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