[12678] | 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 | |
---|
[12680] | 28 | if (jQuery(this).attr('src') == '') { |
---|
[12678] | 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, 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; |
---|
[12679] | 80 | max_height = 0; |
---|
[12678] | 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; |
---|
[12679] | 86 | max_height = Math.max(this.t[i].height, max_height); |
---|
[12678] | 87 | |
---|
| 88 | if (width_count > available_width) { |
---|
| 89 | ratio = width_count / available_width; |
---|
[12679] | 90 | height += Math.round(max_height / ratio); |
---|
[12678] | 91 | line++; |
---|
[12679] | 92 | max_height = 0; |
---|
[12678] | 93 | width_count = this.margin; |
---|
| 94 | if (line > 2) { |
---|
[12679] | 95 | if (height >= best_size.height && width/height >= min_ratio && height<=this.big_thumb.height) { |
---|
[12678] | 96 | best_size = {width:width,height:height} |
---|
| 97 | } |
---|
| 98 | break; |
---|
| 99 | } |
---|
| 100 | } |
---|
| 101 | } |
---|
| 102 | if (line <= 2) { |
---|
[12679] | 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 | } |
---|
[12678] | 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, 'crop'); |
---|
| 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, this.method); |
---|
| 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, this.method); |
---|
| 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, method) { |
---|
| 188 | |
---|
| 189 | if (method == 'resize') { |
---|
| 190 | thumb.css({ |
---|
| 191 | height: new_height+'px', |
---|
| 192 | width: new_width+'px' |
---|
| 193 | }); |
---|
| 194 | height_crop = 0; |
---|
| 195 | width_crop = 0; |
---|
| 196 | } else { |
---|
| 197 | thumb.css({height: '', width: ''}); |
---|
| 198 | height_crop = Math.round((height - new_height)/2); |
---|
| 199 | width_crop = Math.round((width - new_width)/2); |
---|
| 200 | } |
---|
| 201 | |
---|
| 202 | thumb.parents('li').css({ |
---|
| 203 | height: new_height+'px', |
---|
| 204 | width: new_width+'px' |
---|
| 205 | }); |
---|
| 206 | thumb.parent('a').css({ |
---|
| 207 | clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)', |
---|
| 208 | top: -height_crop+'px', |
---|
| 209 | left: -width_crop+'px' |
---|
| 210 | }); |
---|
| 211 | } |
---|
| 212 | } |
---|