1/*! 2 imgLiquid v0.9.944 / 03-05-2013 3 jQuery plugin to resize images to fit in a container. 4 Copyright (c) 2012 Alejandro Emparan (karacas) @krc_ale 5 Dual licensed under the MIT and GPL licenses 6 https://github.com/karacas/imgLiquid 7 **/ 8/* 9 ex: 10 $('.imgLiquid').imgLiquid({fill:true}); 11 12 // OPTIONS: 13 14 > js: 15 fill: true, 16 verticalAlign: // 'center' // 'top' // 'bottom' // '50%' // '10%' 17 horizontalAlign: // 'center' // 'left' // 'right' // '50%' // '10%' 18 19 > CallBacks: 20 onStart: function(){}, 21 onFinish: function(){}, 22 onItemStart: function(index, container, img){}, 23 onItemFinish: function(index, container, img){} 24 25 > hml5 data attr (overwrite all) 26 data-imgLiquid-fill='true' 27 data-imgLiquid-horizontalAlign='center' 28 data-imgLiquid-verticalAlign='center' 29 */ 30// 31 32 33var imgLiquid = imgLiquid || {VER: '0.9.944'}; 34imgLiquid.bgs_Available = false; 35imgLiquid.bgs_CheckRunned = false; 36imgLiquid.injectCss = '.imgLiquid img {visibility:hidden}'; 37 38 39(function ($) { 40 41 // ___________________________________________________________________ 42 43 function checkBgsIsavailable() { 44 if (imgLiquid.bgs_CheckRunned) return; 45 else imgLiquid.bgs_CheckRunned = true; 46 47 var spanBgs = $('<span style="background-size:cover" />'); 48 $('body').append(spanBgs); 49 50 !function () { 51 var bgs_Check = spanBgs[0]; 52 if (!bgs_Check || !window.getComputedStyle) return; 53 var compStyle = window.getComputedStyle(bgs_Check, null); 54 if (!compStyle || !compStyle.backgroundSize) return; 55 imgLiquid.bgs_Available = (compStyle.backgroundSize === 'cover'); 56 }(); 57 58 spanBgs.remove(); 59 } 60 61 62 // ___________________________________________________________________ 63 64 $.fn.extend({ 65 imgLiquid: function (options) { 66 67 this.defaults = { 68 fill: true, 69 verticalAlign: 'center', // 'top' // 'bottom' // '50%' // '10%' 70 horizontalAlign: 'center', // 'left' // 'right' // '50%' // '10%' 71 useBackgroundSize: true, 72 useDataHtmlAttr: true, 73 74 responsive: true, /* Only for use with BackgroundSize false (or old browsers) */ 75 delay: 0, /* Only for use with BackgroundSize false (or old browsers) */ 76 fadeInTime: 0, /* Only for use with BackgroundSize false (or old browsers) */ 77 removeBoxBackground: true, /* Only for use with BackgroundSize false (or old browsers) */ 78 hardPixels: true, /* Only for use with BackgroundSize false (or old browsers) */ 79 responsiveCheckTime: 500, /* Only for use with BackgroundSize false (or old browsers) */ /* time to check div resize */ 80 timecheckvisibility: 500, /* Only for use with BackgroundSize false (or old browsers) */ /* time to recheck if visible/loaded */ 81 82 // CALLBACKS 83 onStart: null, // no-params 84 onFinish: null, // no-params 85 onItemStart: null, // params: (index, container, img ) 86 onItemFinish: null, // params: (index, container, img ) 87 onItemError: null // params: (index, container, img ) 88 }; 89 90 91 checkBgsIsavailable(); 92 var imgLiquidRoot = this; 93 94 // Extend global settings 95 this.options = options; 96 this.settings = $.extend({}, this.defaults, this.options); 97 98 // CallBack 99 if (this.settings.onStart) this.settings.onStart(); 100 101 102 // ___________________________________________________________________ 103 104 return this.each(function ($i) { 105 106 // MAIN >> each for image 107 108 var settings = imgLiquidRoot.settings, 109 $imgBoxCont = $(this), 110 $img = $('img:first', $imgBoxCont); 111 if (!$img.length) { 112 onError(); 113 return; 114 } 115 116 117 // Extend settings 118 if (!$img.data('imgLiquid_settings')) { 119 // First time 120 settings = $.extend({}, imgLiquidRoot.settings, getSettingsOverwrite()); 121 } else { 122 // Recall 123 // Remove Classes 124 $imgBoxCont.removeClass('imgLiquid_error').removeClass('imgLiquid_ready'); 125 settings = $.extend({}, $img.data('imgLiquid_settings'), imgLiquidRoot.options); 126 } 127 $img.data('imgLiquid_settings', settings); 128 129 130 // Start CallBack 131 if (settings.onItemStart) settings.onItemStart($i, $imgBoxCont, $img); 132 /* << CallBack */ 133 134 135 // Process 136 if (imgLiquid.bgs_Available && settings.useBackgroun
136dSize) 137 processBgSize(); 138 else 139 processOldMethod(); 140 141 142 // END MAIN << 143 144 145 // ___________________________________________________________________ 146 147 function processBgSize() { 148 149 // Check change img src 150 if ($imgBoxCont.css('background-image').indexOf(encodeURI($img.attr('src'))) === -1) { 151 // Change 152 $imgBoxCont.css({'background-image': 'url("' + encodeURI($img.attr('src')) + '")'}); 153 } 154 155 $imgBoxCont.css({ 156 'background-size': (settings.fill) ? 'cover' : 'contain', 157 'background-position': (settings.horizontalAlign + ' ' + settings.verticalAlign).toLowerCase(), 158 'background-repeat': 'no-repeat' 159 }); 160 161 $('a:first', $imgBoxCont).css({ 162 'display': 'block', 163 'width': '100%', 164 'height': '100%' 165 }); 166 167 $('img', $imgBoxCont).css({'display': 'none'}); 168 169 if (settings.onItemFinish) settings.onItemFinish($i, $imgBoxCont, $img); 170 /* << CallBack */ 171 172 $imgBoxCont.addClass('imgLiquid_bgSize'); 173 $imgBoxCont.addClass('imgLiquid_ready'); 174 checkFinish(); 175 } 176 177 178 // ___________________________________________________________________ 179 180 function processOldMethod() { 181 182 // Check change img src 183 if ($img.data('oldSrc') && $img.data('oldSrc') !== $img.attr('src')) { 184 185 /* Clone & Reset img */ 186 var $imgCopy = $img.clone().removeAttr('style'); 187 $imgCopy.data('imgLiquid_settings', $img.data('imgLiquid_settings')); 188 $img.parent().prepend($imgCopy); 189 $img.remove(); 190 $img = $imgCopy; 191 $img[0].width = 0; 192 193 // Bug ie with > if (!$img[0].complete && $img[0].width) onError(); 194 setTimeout(processOldMethod, 10); 195 return; 196 } 197 198 199 // Reproceess? 200 if ($img.data('imgLiquid_oldProcessed')) { 201 makeOldProcess(); 202 return; 203 } 204 205 206 // Set data 207 $img.data('imgLiquid_oldProcessed', false); 208 $img.data('oldSrc', $img.attr('src')); 209 210 211 // Hide others images 212 $('img:not(:first)', $imgBoxCont).css('display', 'none'); 213 214 215 // CSSs 216 $imgBoxCont.css({'overflow': 'hidden'}); 217 $img.fadeTo(0, 0).removeAttr('width').removeAttr('height').css({ 218 'visibility': 'visible', 219 'max-width': 'none', 220 'max-height': 'none', 221 'width': 'auto', 222 'height': 'auto', 223 'display': 'block' 224 }); 225 226 227 // CheckErrors 228 $img.on('error', onError); 229 $img[0].onerror = onError; 230 231 232 // loop until load 233 function onLoad() { 234 if ($img.data('imgLiquid_error') || $img.data('imgLiquid_loaded') || $img.data('imgLiquid_oldProcessed')) return; 235 if ($imgBoxCont.is(':visible') && $img[0].complete && $img[0].width > 0 && $img[0].height > 0) { 236 $img.data('imgLiquid_loaded', true); 237 setTimeout(makeOldProcess, $i * settings.delay); 238 } else { 239 setTimeout(onLoad, settings.timecheckvisibility); 240 } 241 } 242 243 244 onLoad(); 245 checkResponsive(); 246 } 247 248 249 // ___________________________________________________________________ 250 251 function checkResponsive() { 252 253 /* Only for oldProcessed method (background-size dont need) */ 254 255 if (!settings.responsive && !$img.data('imgLiquid_oldProcessed')) return; 256 if (!$img.data('imgLiquid_settings')) return; 257 258 settings = $img.data('imgLiquid_settings'); 259 260 $imgBoxCont.actualSize = $imgBoxCont.get(0).offsetWidth + ($imgBoxCont.get(0).offsetHeight / 10000); 261 if ($imgBoxCont.sizeOld && $imgBoxCont.actualSize !== $imgBoxCont.sizeOld) makeOldProcess(); 262 263 $imgBoxCont.sizeOld = $imgBoxCont.actualSize; 264 setTimeout(checkResponsive, settings.responsiveCheckTime); 265 } 266 267 268 // ___________________________________________________________________ 269 270 function onError() { 271 $img.data('imgLiquid_error', true); 272 $imgBoxCont.addClass('imgLiquid_error'); 273 if (settings.onItemError) settings.onItemError($i, $imgBoxCont, $img); 274 /* << CallBack */ 275 checkFinish(); 276 } 277 278 279 // ___________________________________________________________________ 280 281 function getSettingsOverwrite() { 282 var SettingsOverwrite = {}; 283 284 if (imgLiquidRoot.settings.useDataHtmlAttr) { 285 var dif = $imgBoxCont.attr('data-imgLiquid-fill'), 286 ha = $imgBoxCont.attr('data-imgLiquid-horizontalAlign'), 287 va = $imgBoxCont.attr('data-imgLiquid-verticalAlign'); 288 289 if (dif === 'true' || dif === 'false') SettingsOverwrite.fill = Boolean(dif === 'true'); 290 if (ha !== undefined && (ha === 'left' || ha === 'center' || ha === 'right' || ha.indexOf('%') !== -1)) SettingsOverwrite.horizontalAlign = ha; 291 if (va !== undefined && (va === 'top' || va === 'bottom' || va === 'center' || va.indexOf('%') !== -1)) SettingsOverwrite.verticalAlign = va; 292 } 293 294 if (imgLiquid.isIE && imgLiquidRoot.settings.ieFadeInDisabled) SettingsOverwrite.fadeInTime = 0; //ie no anims 295 return SettingsOverwrite; 296 } 297 298 299 // ___________________________________________________________________ 300 301 function makeOldProcess() { /* Only for old browsers, or useBackgroun
301dSize seted false */ 302 303 // Calculate size 304 var w, h, wn, hn, ha, va, hdif, vdif, 305 margT = 0, 306 margL = 0, 307 $imgCW = $imgBoxCont.width(), 308 $imgCH = $imgBoxCont.height(); 309 310 311 // Save original sizes 312 if ($img.data('owidth') === undefined) $img.data('owidth', $img[0].width); 313 if ($img.data('oheight') === undefined) $img.data('oheight', $img[0].height); 314 315 316 // Compare ratio 317 if (settings.fill === ($imgCW / $imgCH) >= ($img.data('owidth') / $img.data('oheight'))) { 318 w = '100%'; 319 h = 'auto'; 320 wn = Math.floor($imgCW); 321 hn = Math.floor($imgCW * ($img.data('oheight') / $img.data('owidth'))); 322 } else { 323 w = 'auto'; 324 h = '100%'; 325 wn = Math.floor($imgCH * ($img.data('owidth') / $img.data('oheight'))); 326 hn = Math.floor($imgCH); 327 } 328 329 // Align X 330 ha = settings.horizontalAlign.toLowerCase(); 331 hdif = $imgCW - wn; 332 if (ha === 'left') margL = 0; 333 if (ha === 'center') margL = hdif * 0.5; 334 if (ha === 'right') margL = hdif; 335 if (ha.indexOf('%') !== -1) { 336 ha = parseInt(ha.replace('%', ''), 10); 337 if (ha > 0) margL = hdif * ha * 0.01; 338 } 339 340 341 // Align Y 342 va = settings.verticalAlign.toLowerCase(); 343 vdif = $imgCH - hn; 344 if (va === 'left') margT = 0; 345 if (va === 'center') margT = vdif * 0.5; 346 if (va === 'bottom') margT = vdif; 347 if (va.indexOf('%') !== -1) { 348 va = parseInt(va.replace('%', ''), 10); 349 if (va > 0) margT = vdif * va * 0.01; 350 } 351 352 353 // Add Css 354 if (settings.hardPixels) { 355 w = wn; 356 h = hn; 357 } 358 $img.css({ 359 'width': w, 360 'height': h, 361 'margin-left': Math.floor(margL), 362 'margin-top': Math.floor(margT) 363 }); 364 365 366 // FadeIn > Only first time 367 if (!$img.data('imgLiquid_oldProcessed')) { 368 $img.fadeTo(settings.fadeInTime, 1); 369 $img.data('imgLiquid_oldProcessed', true); 370 if (settings.removeBoxBackground) $imgBoxCont.css('background-image', 'none'); 371 $imgBoxCont.addClass('imgLiquid_nobgSize'); 372 $imgBoxCont.addClass('imgLiquid_ready'); 373 } 374 375 376 if (settings.onItemFinish) settings.onItemFinish($i, $imgBoxCont, $img); 377 /* << CallBack */ 378 checkFinish(); 379 } 380 381 382 // ___________________________________________________________________ 383 384 function checkFinish() { /* Check callBack */ 385 if ($i === imgLiquidRoot.length - 1) if (img
385LiquidRoot.settings.onFinish) imgLiquidRoot.settings.onFinish(); 386 } 387 388 389 }); 390 } 391 }); 392})(jQuery); 393 394 395// Inject css styles ______________________________________________________ 396!function () { 397 var css = imgLiquid.injectCss, 398 head = document.getElementsByTagName('head')[0], 399 style = document.createElement('style'); 400 style.type = 'text/css'; 401 if (style.styleSheet) { 402 style.styleSheet.cssText = css; 403 } else { 404 style.appendChild(document.createTextNode(css)); 405 } 406 head.appendChild(style); 407}();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.