Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fix onload

  • Loading branch information...
commit e12e94bb5907b340d54cacaa0cf600f1acdc9bcc 1 parent 4dc103f
@karacas authored
View
2  README.md
@@ -1,6 +1,6 @@
![ScreenShot](https://raw.github.com/karacas/imgLiquid/master/dev/logoimgliquid.png)
-imgLiquid.js v0.8.1 - 30-03-13
+imgLiquid.js v0.8.2 - 30-03-13
#####A jQuery Plugin to resize images to fit in a container.
Alejandro Emparan (karacas), twitter: @krc_ale
Dual licensed under the MIT and GPL licenses.
View
9 dev/imgLiquidDev.html
@@ -5,8 +5,7 @@
<title>imgLiquid Jquery Plugin</title>
<link href="reset.css" type="text/css" rel="stylesheet" />
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<!-- JS & CSS ====================================-->
@@ -32,7 +31,7 @@
margin:0;
padding:0;
background-color:#fff;
- font-family: 'Open Sans', sans-serif;
+ font-family: 'Open Sans', arial, sans-serif;
font-weight:300;
margin:30px;
}
@@ -47,7 +46,7 @@
margin:10px;
margin-bottom:60px;
font-size:30px;
- font-family: 'Open Sans', sans-serif!Important;
+ font-family: 'Open Sans', arial, sans-serif!Important;
font-weight:300;
color:#888;
}
@@ -55,7 +54,7 @@
margin:10px;
margin-bottom:2px;
font-size:20px;
- font-family: 'Open Sans', sans-serif!Important;
+ font-family: 'Open Sans', arial, sans-serif!Important;
font-weight:300;
color:#bbb;
margin-top:80px;
View
9 examples/imgLiquid.html
@@ -5,8 +5,7 @@
<title>imgLiquid Jquery Plugin</title>
<link href="reset.css" type="text/css" rel="stylesheet" />
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<!-- JS & CSS ====================================-->
@@ -34,7 +33,7 @@
margin:0;
padding:0;
background-color:#fff;
- font-family: 'Open Sans', sans-serif;
+ font-family: 'Open Sans', arial, sans-serif;
font-weight:300;
margin:30px;
}
@@ -52,7 +51,7 @@
margin:10px;
margin-bottom:60px;
font-size:30px;
- font-family: 'Open Sans', sans-serif!Important;
+ font-family: 'Open Sans', arial, sans-serif!Important;
font-weight:300;
color:#888;
}
@@ -61,7 +60,7 @@
margin-top:0;
margin-bottom:2px;
font-size:20px;
- font-family: 'Open Sans', sans-serif!Important;
+ font-family: 'Open Sans', arial, sans-serif!Important;
font-weight:300;
color:#bbb;
margin-top:80px;
View
4 imgliquid.jquery.json
@@ -1,6 +1,6 @@
{
"name": "imgliquid",
- "version": "0.8.1",
+ "version": "0.8.2",
"title": "imgLiquid",
"description": "A jQuery Plugin to resize images to fit in a container.",
"homepage": "https://github.com/karacas/imgLiquid",
@@ -25,6 +25,6 @@
},
"bugs": "https://github.com/karacas/imgLiquid/issues",
"dependencies": {
- "jquery": ">=1.4"
+ "jquery": ">=1.8.1"
}
}
View
2  imgliquid.jquery.json.orig
@@ -1,6 +1,6 @@
{
"name": "imgliquid",
- "version": "0.8.1",
+ "version": "0.8.2",
"title": "imgLiquid",
"description": "A jQuery Plugin to resize images to fit in a container.",
"homepage": "https://github.com/karacas/imgLiquid",
View
5 src/js/imgLiquid-min.js
@@ -1,5 +1,5 @@
/*
-jQuery Plugin: imgLiquid v0.8.0 / 27-03-13
+jQuery Plugin: imgLiquid v0.8.2 / 30-03-13
jQuery plugin to resize images to fit in a container.
Copyright (c) 2012 Alejandro Emparan (karacas), twitter: @krc_ale
Dual licensed under the MIT and GPL licenses
@@ -35,6 +35,5 @@ ex:
data-imgLiquid-horizontalAlign="center"
data-imgLiquid-verticalAlign="center"
data-imgLiquid-fadeInTime="500"
-
*/
-(function($){$.fn.extend({imgLiquid:function(options){var isIE= /*@cc_on!@*/ false;this.defaultOptions={};var settings=$.extend({fill:true,verticalAlign:"center",horizontalAlign:"center",fadeInTime:0,responsive:false,responsiveCheckTime:500,delay:1,removeBoxBackground:true,ieFadeInDisabled:true,useDataHtmlAttr:true,useCssAligns:false,imageRendering:"auto"},this.defaultOptions,options);return this.each(function($i){var $imgBox=$(this);var $img=$("img:first",$imgBox);if(!$img||$img===null||$img.size()===0){onError();return null}if($img.ILprocessed){process($imgBox,$img);return}$img.ILprocessed=false;$img.ILerror=false;$img.fadeTo(0,0);$("img:not(:first)",$imgBox).css("display","none");$img.css({visibility:"visible","max-width":"none","max-height":"none",width:"auto",height:"auto",display:"block","image-rendering":settings.imageRendering});$img.removeAttr("width");$img.removeAttr("height");$imgBox.css({overflow:"hidden"});if(isIE&&settings.imageRendering=="optimizeQuality"){$img.css("-ms-interpolation-mode","bicubic")}if(settings.useCssAligns){var cha=$imgBox.css("text-align");var cva=$imgBox.css("vertical-align");if(cha=="left"||cha=="center"||cha=="right"){settings.horizontalAlign=cha}if(cva=="top"||cva=="middle"||cva=="bottom"||cva=="center"){settings.verticalAlign=cva}}if(settings.useDataHtmlAttr){if($imgBox.attr("data-imgLiquid-fill")=="true"){settings.fill=true}if($imgBox.attr("data-imgLiquid-fill")=="false"){settings.fill=false}if($imgBox.attr("data-imgLiquid-responsive")=="true"){settings.responsive=true}if($imgBox.attr("data-imgLiquid-responsive")=="false"){settings.responsive=false}if(Number($imgBox.attr("data-imgLiquid-fadeInTime"))>0){settings.fadeInTime=Number($imgBox.attr("data-imgLiquid-fadeInTime"))}var ha=$imgBox.attr("data-imgLiquid-horizontalAlign");var va=$imgBox.attr("data-imgLiquid-verticalAlign");if(ha=="left"||ha=="center"||ha=="right"){settings.horizontalAlign=ha}if(va=="top"||va=="middle"||va=="bottom"||va=="center"){settings.verticalAlign=va}}if(isIE&&settings.ieFadeInDisabled){settings.fadeInTime=0}function checkElementSize(){setTimeout(function(){var actualSize=$imgBox.width()+($imgBox.height()/100000);if(actualSize!==$imgBox.sizeOld){$imgBox.sizeOld=actualSize;process($imgBox,$img)}checkElementSize()},settings.responsiveCheckTime)}if(settings.responsive){checkElementSize()}$img.load(function(){if(!Boolean($img[0].width===0&&$img[0].height===0)){setTimeout(function(){process($imgBox,$img)},$i*settings.delay)}}).each(function(){if(this.complete){$img.trigger("load")}}).error(function(){onError();return null});function onError(){$img.ILerror=true;$imgBox.css("visibility","hidden")}function process($imgBox,$img){if(settings.fill==($imgBox.width()/$imgBox.height())>=($img[0].width/$img[0].height)){$img.css({width:"100%",height:"auto"})}else{$img.css({width:"auto",height:"100%"})}var ha=settings.horizontalAlign.toLowerCase();var hdif=$imgBox.width()-$img[0].width;var margL=0;if(ha=="center"||ha=="middle"){margL=hdif/2}if(ha=="right"){margL=hdif}$img.css("margin-left",Math.round(margL));var va=settings.verticalAlign.toLowerCase();var vdif=$imgBox.height()-$img[0].height;var margT=0;if(va=="center"||va=="middle"){margT=vdif/2}if(va=="bottom"){margT=vdif}$img.css("margin-top",Math.round(margT));if(!$img.ILprocessed){if(settings.removeBoxBackground){$imgBox.css("background-image","none")}$img.fadeTo(settings.fadeInTime,1);$img.ILprocessed=true}}})}})})(jQuery);
+;(function($){$.fn.extend({imgLiquid:function(options){var isIE= /*@cc_on!@*/ false;var totalItems=this.length;var processedItems=0;this.defaultOptions={};var settings=$.extend({fill:true,verticalAlign:"center",horizontalAlign:"center",fadeInTime:0,responsive:false,responsiveCheckTime:100,delay:0,removeBoxBackground:true,ieFadeInDisabled:true,useDataHtmlAttr:true,useCssAligns:false,imageRendering:"auto",onStart:null,onFinish:null,onItemResize:null,onItemStart:null,onItemFinish:null},this.defaultOptions,options);if(settings.onStart){settings.onStart()}return this.each(function($i){var $imgBox=$(this);var $img=$("img:first",$imgBox);if(!$img||$img===null||$img.size()===0){onError();return null}if($img.ILprocessed){process($imgBox,$img,$i);return}$img.ILprocessed=false;$img.ILerror=false;if(settings.onItemStart){settings.onItemStart($i,$imgBox,$img)}$img.fadeTo(0,0);$("img:not(:first)",$imgBox).css("display","none");$img.css({visibility:"visible","max-width":"none","max-height":"none",width:"auto",height:"auto",display:"block","image-rendering":settings.imageRendering});$img.removeAttr("width");$img.removeAttr("height");if(settings.delay<1){settings.delay=1}$imgBox.css({overflow:"hidden"});if(isIE&&settings.imageRendering=="optimizeQuality"){$img.css("-ms-interpolation-mode","bicubic")}if(settings.useCssAligns){var cha=$imgBox.css("text-align");var cva=$imgBox.css("vertical-align");if(cha=="left"||cha=="center"||cha=="right"){settings.horizontalAlign=cha}if(cva=="top"||cva=="middle"||cva=="bottom"||cva=="center"){settings.verticalAlign=cva}}if(settings.useDataHtmlAttr){if($imgBox.attr("data-imgLiquid-fill")=="true"){settings.fill=true}if($imgBox.attr("data-imgLiquid-fill")=="false"){settings.fill=false}if($imgBox.attr("data-imgLiquid-responsive")=="true"){settings.responsive=true}if($imgBox.attr("data-imgLiquid-responsive")=="false"){settings.responsive=false}if(Number($imgBox.attr("data-imgLiquid-fadeInTime"))>0){settings.fadeInTime=Number($imgBox.attr("data-imgLiquid-fadeInTime"))}var ha=$imgBox.attr("data-imgLiquid-horizontalAlign");var va=$imgBox.attr("data-imgLiquid-verticalAlign");if(ha=="left"||ha=="center"||ha=="right"){settings.horizontalAlign=ha}if(va=="top"||va=="middle"||va=="bottom"||va=="center"){settings.verticalAlign=va}}if(isIE&&settings.ieFadeInDisabled){settings.fadeInTime=0}function checkElementSize(){setTimeout(function(){$imgBox.actualSize=$imgBox.get(0).offsetWidth+($imgBox.get(0).offsetHeight/100000);if($imgBox.actualSize!==$imgBox.sizeOld){if($img.ILprocessed&&$imgBox.sizeOld!==undefined){if(settings.onItemResize){settings.onItemResize($i,$imgBox,$img)}if(settings.responsive){process($imgBox,$img,$i)}}}$imgBox.sizeOld=$imgBox.actualSize;checkElementSize()},settings.responsiveCheckTime)}if(settings.responsive||settings.onItemResize!==null){checkElementSize()}$img.on("load",onLoad).on("error",onError).load();function onLoad(e){if(!Boolean($img[0].width===0&&$img[0].height===0)){setTimeout(function(){process($imgBox,$img,$i)},$i*settings.delay)}e.preventDefault()}function onError(){$img.ILerror=true;checkFinish($imgBox,$img,$i);$imgBox.css("visibility","hidden")}function process($imgBox,$img,$i){if(settings.fill==($imgBox.width()/$imgBox.height())>=($img[0].width/$img[0].height)){$img.css({width:"100%",height:"auto"})}else{$img.css({width:"auto",height:"100%"})}var ha=settings.horizontalAlign.toLowerCase();var hdif=$imgBox.width()-$img[0].width;var margL=0;if(ha=="center"||ha=="middle"){margL=hdif/2}if(ha=="right"){margL=hdif}$img.css("margin-left",Math.round(margL));var va=settings.verticalAlign.toLowerCase();var vdif=$imgBox.height()-$img[0].height;var margT=0;if(va=="center"||va=="middle"){margT=vdif/2}if(va=="bottom"){margT=vdif}$img.css("margin-top",Math.round(margT));if(!$img.ILprocessed){if(settings.removeBoxBackground){$imgBox.css("background-image","none")}$img.fadeTo(settings.fadeInTime,1);$img.ILprocessed=true;if(settings.onItemFinish){settings.onItemFinish($i,$imgBox,$img)}checkFinish($imgBox,$img,$i)}}function checkFinish($imgBox,$img,$i){processedItems++;if(processedItems==totalItems){if(settings.onFinish){settings.onFinish()}}}})}})})(jQuery);
View
369 src/js/imgLiquid.js
@@ -1,5 +1,5 @@
/*
-jQuery Plugin: imgLiquid v0.8.0 / 27-03-13
+jQuery Plugin: imgLiquid v0.8.2 / 30-03-13
jQuery plugin to resize images to fit in a container.
Copyright (c) 2012 Alejandro Emparan (karacas), twitter: @krc_ale
Dual licensed under the MIT and GPL licenses
@@ -35,167 +35,212 @@ ex:
data-imgLiquid-horizontalAlign="center"
data-imgLiquid-verticalAlign="center"
data-imgLiquid-fadeInTime="500"
-
*/
;(function($){
- $.fn.extend({
- imgLiquid: function(options) {
-
- //is ie?
- var isIE = /*@cc_on!@*/false;
-
- //Options
- this.defaultOptions = {};
- //___________________________________________________________________
- var settings = $.extend({
- fill: true,
- verticalAlign: 'center', //'top' // 'bottom'
- horizontalAlign: 'center', // 'left' // 'right'
- fadeInTime: 0,
- responsive: false,
- responsiveCheckTime: 500, /*time to check div resize, default 2fps > 1000/500*/
- delay: 1,
- /**/
- removeBoxBackground: true,
- ieFadeInDisabled: true,
- useDataHtmlAttr: true,
- useCssAligns: false,
- imageRendering: 'auto'
- }, this.defaultOptions, options);
-
-
- //each
- //___________________________________________________________________
- return this.each(function($i) {
-
- //Obj
- var $imgBox = $(this);
- var $img = $('img:first', $imgBox);
-
- if (!$img || $img === null || $img.size() ===0){
- onError();
- return null;
- }
-
- if ($img.ILprocessed){
- process($imgBox, $img);
- return;
- }
-
- //Status
- $img.ILprocessed = false;
- $img.ILerror = false;
-
- //Alpha to 0 & removes
- $img.fadeTo(0, 0);
- $('img:not(:first)', $imgBox).css('display','none');
- $img.css({'visibility':'visible', 'max-width':'none', 'max-height':'none', 'width':'auto', 'height':'auto', 'display':'block', 'image-rendering':settings.imageRendering });
- $img.removeAttr("width");
- $img.removeAttr("height");
-
-
- //set OverFlow
- $imgBox.css({'overflow':'hidden'});
-
-
- //Settings overwrite
- if (isIE && settings.imageRendering == 'optimizeQuality') $img.css('-ms-interpolation-mode', 'bicubic');
- if (settings.useCssAligns) {
- var cha = $imgBox.css('text-align');
- var cva = $imgBox.css('vertical-align');
- if(cha == 'left' || cha == 'center' || cha == 'right') settings.horizontalAlign = cha;
- if (cva == 'top' || cva == 'middle' || cva == 'bottom' || cva == 'center') settings.verticalAlign = cva;
- }
- if (settings.useDataHtmlAttr) {
- if ($imgBox.attr('data-imgLiquid-fill') =='true') settings.fill = true;
- if ($imgBox.attr('data-imgLiquid-fill') =='false' ) settings.fill = false;
- if ($imgBox.attr('data-imgLiquid-responsive') =='true') settings.responsive = true;
- if ($imgBox.attr('data-imgLiquid-responsive') =='false' ) settings.responsive = false;
- if ( Number ($imgBox.attr('data-imgLiquid-fadeInTime')) > 0) settings.fadeInTime = Number ($imgBox.attr('data-imgLiquid-fadeInTime'));
- var ha = $imgBox.attr('data-imgLiquid-horizontalAlign');
- var va = $imgBox.attr('data-imgLiquid-verticalAlign');
- if (ha == 'left' || ha == 'center' || ha == 'right') settings.horizontalAlign = ha;
- if (va == 'top' || va == 'middle' || va == 'bottom' || va == 'center') settings.verticalAlign = va;
- }
-
-
- //ie OffAnims
- if (isIE && settings.ieFadeInDisabled) settings.fadeInTime = 0;
-
-
-
- //RESPONSIVE
- function checkElementSize(){
- setTimeout(function() {
- var actualSize = $imgBox.width() + ($imgBox.height()/100000);
- if (actualSize !== $imgBox.sizeOld){
- $imgBox.sizeOld = actualSize;
- process($imgBox, $img);
- }
- checkElementSize();
- }, settings.responsiveCheckTime);
- }
- if (settings.responsive) checkElementSize();
-
-
-
- //OnLoad
- $img.load(function () {
- if (!Boolean($img[0].width === 0 && $img[0].height === 0)) {
- setTimeout(function() {
- process($imgBox, $img);
- }, $i * settings.delay );
- }
- }).each(function () {
- if (this.complete) $img.trigger('load');
- }).error(function () {
- onError();
- return null;
- });
- function onError(){
- $img.ILerror = true;
- $imgBox.css('visibility', 'hidden');
- }
-
-
- //Process
- //___________________________________________________________________
- function process($imgBox, $img){
-
- //resize OPTIMIZED
- if (settings.fill == ($imgBox.width() / $imgBox.height()) >= ($img[0].width / $img[0].height)){
- $img.css({'width':'100%', 'height':'auto'});
- }else{
- $img.css({'width':'auto', 'height':'100%'});
- }
-
-
- //align X
- var ha = settings.horizontalAlign.toLowerCase();
- var hdif = $imgBox.width() - $img[0].width;
- var margL = 0;
- if (ha == 'center' || ha == 'middle')margL = hdif/2;
- if (ha == 'right') margL = hdif;
- $img.css('margin-left', Math.round(margL));
-
-
- //align Y
- var va = settings.verticalAlign.toLowerCase();
- var vdif = $imgBox.height() - $img[0].height;
- var margT = 0;
- if (va == 'center' || va == 'middle') margT = vdif/2;
- if (va == 'bottom') margT = vdif;
- $img.css('margin-top', Math.round(margT));
-
-
- //FadeIn
- if (!$img.ILprocessed){
- if (settings.removeBoxBackground) $imgBox.css('background-image', 'none');
- $img.fadeTo(settings.fadeInTime, 1);
- $img.ILprocessed = true;
- }
- }
- });
- }
- });
+ $.fn.extend({
+ imgLiquid: function(options) {
+
+ //is ie?
+ var isIE = /*@cc_on!@*/false;
+
+ //Sizes
+ var totalItems = this.length;
+ var processedItems = 0;
+
+ //Ssettings / Options
+ this.defaultOptions = {};
+
+ //___________________________________________________________________
+ var settings = $.extend({
+ fill: true,
+ verticalAlign: 'center', //'top' // 'bottom'
+ horizontalAlign: 'center', // 'left' // 'right'
+ fadeInTime: 0,
+ responsive: false,
+ responsiveCheckTime: 100, /*time to check div resize, default 10fps > 1000/100*/
+ delay: 0,
+ /**/
+ removeBoxBackground: true,
+ ieFadeInDisabled: true,
+ useDataHtmlAttr: true,
+ useCssAligns: false,
+ imageRendering: 'auto',
+ /**/
+ //callBacks
+ onStart: null, //no-params
+ onFinish: null, //no-params
+ onItemResize: null, //params: (index, container, img )
+ onItemStart: null, //params: (index, container, img )
+ onItemFinish: null //params: (index, container, img )
+ }, this.defaultOptions, options);
+
+
+ //callBack
+ if (settings.onStart) settings.onStart();
+
+
+ //each
+ //___________________________________________________________________
+ return this.each(function($i) {
+
+ //Obj
+ var $imgBox = $(this);
+ var $img = $('img:first', $imgBox);
+
+ if (!$img || $img === null || $img.size() ===0){
+ onError();
+ return null;
+ }
+
+ if ($img.ILprocessed){
+ process($imgBox, $img, $i);
+ return;
+ }
+
+ //Status
+ $img.ILprocessed = false;
+ $img.ILerror = false;
+
+ //callBack ItemStart (index, container, img )
+ if (settings.onItemStart) settings.onItemStart($i , $imgBox , $img);
+
+ //Alpha to 0 & removes
+ $img.fadeTo(0, 0);
+ $('img:not(:first)', $imgBox).css('display','none');
+ $img.css({'visibility':'visible', 'max-width':'none', 'max-height':'none', 'width':'auto', 'height':'auto', 'display':'block', 'image-rendering':settings.imageRendering });
+ $img.removeAttr("width");
+ $img.removeAttr("height");
+
+ //Delay > 1
+ if (settings.delay <1) settings.delay = 1;
+
+ //set OverFlow
+ $imgBox.css({'overflow':'hidden'});
+
+
+ //Settings overwrite
+ if (isIE && settings.imageRendering == 'optimizeQuality') $img.css('-ms-interpolation-mode', 'bicubic');
+ if (settings.useCssAligns) {
+ var cha = $imgBox.css('text-align');
+ var cva = $imgBox.css('vertical-align');
+ if(cha == 'left' || cha == 'center' || cha == 'right') settings.horizontalAlign = cha;
+ if (cva == 'top' || cva == 'middle' || cva == 'bottom' || cva == 'center') settings.verticalAlign = cva;
+ }
+ if (settings.useDataHtmlAttr) {
+ if ($imgBox.attr('data-imgLiquid-fill') =='true') settings.fill = true;
+ if ($imgBox.attr('data-imgLiquid-fill') =='false' ) settings.fill = false;
+ if ($imgBox.attr('data-imgLiquid-responsive') =='true') settings.responsive = true;
+ if ($imgBox.attr('data-imgLiquid-responsive') =='false' ) settings.responsive = false;
+ if ( Number ($imgBox.attr('data-imgLiquid-fadeInTime')) > 0) settings.fadeInTime = Number ($imgBox.attr('data-imgLiquid-fadeInTime'));
+ var ha = $imgBox.attr('data-imgLiquid-horizontalAlign');
+ var va = $imgBox.attr('data-imgLiquid-verticalAlign');
+ if (ha == 'left' || ha == 'center' || ha == 'right') settings.horizontalAlign = ha;
+ if (va == 'top' || va == 'middle' || va == 'bottom' || va == 'center') settings.verticalAlign = va;
+ }
+
+
+ //ie OffAnims
+ if (isIE && settings.ieFadeInDisabled) settings.fadeInTime = 0;
+
+
+ //Responsive
+ function checkElementSize(){
+ setTimeout(function() {
+ //Js width is faaaaster
+ $imgBox.actualSize = $imgBox.get(0).offsetWidth + ($imgBox.get(0).offsetHeight/100000);
+ if ($imgBox.actualSize !== $imgBox.sizeOld){
+ if ($img.ILprocessed && $imgBox.sizeOld !== undefined){
+
+ //callBack onItemResize (index, container, img )
+ if (settings.onItemResize) settings.onItemResize($i , $imgBox , $img);
+
+ //Process again
+ if (settings.responsive) process($imgBox, $img, $i);
+ }
+ }
+ $imgBox.sizeOld = $imgBox.actualSize;
+ checkElementSize();
+ }, settings.responsiveCheckTime);
+ }
+ if (settings.responsive || settings.onItemResize!==null) checkElementSize();
+
+
+ //OnLoad
+ //$img.unbind('load').on('load', onLoad).on('error', onError).load();
+
+ // $img[0].onload = onLoad;
+ // $img.on('error', onError);
+ // if (!$img[0].complete)$img.load();
+
+ $img.on('load', onLoad).on('error', onError).load();
+
+ function onLoad(e){
+ if (!Boolean($img[0].width === 0 && $img[0].height === 0)) {
+ setTimeout(function() {
+ process($imgBox, $img, $i);
+ }, $i * settings.delay );
+ }
+ e.preventDefault();
+ }
+ function onError(){
+ $img.ILerror = true;
+ checkFinish($imgBox, $img, $i);
+ $imgBox.css('visibility', 'hidden');
+ }
+
+ //Process
+ //___________________________________________________________________
+ function process($imgBox, $img, $i){
+ //resize OPTIMIZED
+ if (settings.fill == ($imgBox.width() / $imgBox.height()) >= ($img[0].width / $img[0].height)){
+ $img.css({'width':'100%', 'height':'auto'});
+ }else{
+ $img.css({'width':'auto', 'height':'100%'});
+ }
+
+
+ //align X
+ var ha = settings.horizontalAlign.toLowerCase();
+ var hdif = $imgBox.width() - $img[0].width;
+ var margL = 0;
+ if (ha == 'center' || ha == 'middle')margL = hdif/2;
+ if (ha == 'right') margL = hdif;
+ $img.css('margin-left', Math.round(margL));
+
+
+ //align Y
+ var va = settings.verticalAlign.toLowerCase();
+ var vdif = $imgBox.height() - $img[0].height;
+ var margT = 0;
+ if (va == 'center' || va == 'middle') margT = vdif/2;
+ if (va == 'bottom') margT = vdif;
+ $img.css('margin-top', Math.round(margT));
+
+
+ //FadeIn
+ if (!$img.ILprocessed){
+ if (settings.removeBoxBackground) $imgBox.css('background-image', 'none');
+ $img.fadeTo(settings.fadeInTime, 1);
+
+ $img.ILprocessed = true;
+
+ //callBack onItemFinish (index, container, img )
+ if (settings.onItemFinish) settings.onItemFinish($i , $imgBox , $img);
+
+ checkFinish($imgBox, $img, $i);
+ }
+ }
+
+ //CheckFinish
+ //___________________________________________________________________
+ function checkFinish($imgBox, $img, $i){
+ processedItems ++;
+ //callBack onFinish
+ if (processedItems == totalItems){
+ if (settings.onFinish) settings.onFinish();
+ }
+ }
+ });
+ }
+ });
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.