├── .gitignore
├── tests
    ├── woody.jpg
    ├── logoimgliquid.png
    ├── reset.css
    ├── imgLiquid_simple.html
    ├── imgLiquid_anim.html
    ├── imgLiquid_full.html
    ├── imgLiquid_Responsive.html
    ├── imgLiquid_importants.html
    ├── imgLiquid_changeImg.html
    ├── imgLiquid_visible.html
    ├── imgLiquid_aligns.html
    ├── imgLiquid_Min.html
    ├── imgLiquid.html
    └── imgLiquid_Recall.html
├── bower.json
├── license.txt
├── imgLiquid.jquery.json
├── README.md
└── js
    ├── imgLiquid-min.js
    └── imgLiquid.js


/.gitignore:
--------------------------------------------------------------------------------
1 | examples


--------------------------------------------------------------------------------
/tests/woody.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/karacas/imgLiquid/HEAD/tests/woody.jpg


--------------------------------------------------------------------------------
/tests/logoimgliquid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/karacas/imgLiquid/HEAD/tests/logoimgliquid.png


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "imgLiquid",
3 |     "version": "0.9.944",
4 |     "main": "js/imgLiquid.js",
5 |     "dependencies": {"jquery": ">=1.8.1"},
6 |     "ignore": ["**/.*", "node_modules", "components", "tests", "examples"]
7 | }
8 | 


--------------------------------------------------------------------------------
/tests/reset.css:
--------------------------------------------------------------------------------
1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2012 Alejandro Emparan
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/imgLiquid.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "imgLiquid",
 3 |     "version": "0.9.944",
 4 |     "title": "imgLiquid",
 5 |     "description": "A jQuery Plugin to resize images to fit in a container.",
 6 |     "homepage": "https://github.com/karacas/imgLiquid",
 7 |     "docs": "https://github.com/karacas/imgLiquid",
 8 |     "demo": "http://goo.gl/Wk8bU",
 9 |     "licenses": [{
10 |         "type": "MIT",
11 |         "url": "https://raw.github.com/karacas/imgLiquid/master/license.txt"
12 |     }],
13 |     "keywords": ["resize", "image", "images", "fit", "responsive", "fill", "container", "img", "thumbnails"],
14 |     "author": {
15 |         "name": "Alejandro Emparan",
16 |         "url": "https://github.com/karacas"
17 |     },
18 |     "maintainers": [{
19 |         "name": "Alejandro Emparan",
20 |         "url": "https://github.com/karacas"
21 |     }],
22 |     "repository": {
23 |         "type": "git",
24 |         "url": "git://github.com/karacas/imgLiquid.git"
25 |     },
26 |     "bugs": "https://github.com/karacas/imgLiquid/issues",
27 |     "dependencies": {
28 |         "jquery": ">=1.8.1"
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>imgLiquid Jquery Plugin</title>
 6 | 
 7 | 	<!-- RESET ______________________ -->
 8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
 9 | 
10 | 	<!-- JQUERY ______________________ -->
11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
13 | 
14 | 
15 | 	<!-- IMGLIQUID ______________________ -->
16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
17 | 
18 | 
19 | 	<!-- EXAMPLE ______________________ -->
20 | 	<script type="text/javascript">
21 | 	$(document).ready(function () {
22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
23 | 	});
24 | 	</script>
25 | 
26 | </head>
27 | 
28 | 
29 | <body>
30 | 	<div class="boxSep" >
31 | 		<div class="imgLiquidFill imgLiquid" style="width:300px; height:300px; background-color:#000" >
32 | 			<img alt="TEST" src="woody.jpg"/>
33 | 		</div>
34 | 	</div>
35 | </body>
36 | 
37 | 
38 | </html>
39 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_anim.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>imgLiquid Jquery Plugin</title>
 6 | 
 7 | 	<!-- RESET ______________________ -->
 8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
 9 | 
10 | 	<!-- JQUERY ______________________ -->
11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
13 | 
14 | 
15 | 	<!-- IMGLIQUID ______________________ -->
16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
17 | 
18 | 
19 | 	<!-- EXAMPLE ______________________ -->
20 | 	<script type="text/javascript">
21 | 	$(document).ready(function () {
22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
23 | 	});
24 | 	</script>
25 | 
26 | 	<style type="text/css" media="screen">
27 | 	.imgLiquidanim{
28 | 		opacity: 0;
29 | 		transition: opacity  0.5s ease-out;
30 | 		transition-delay: 0.5s;
31 | 	}
32 | 	.imgLiquidanim.imgLiquid_ready{
33 | 		opacity: 1;
34 | 	}
35 | 	</style>
36 | </head>
37 | 
38 | 
39 | <body>
40 | 	<div class="boxSep" >
41 | 		<div class="imgLiquidFill imgLiquid imgLiquidanim" style="width:300px; height:300px; background-color:#000" >
42 | 			<img alt="TEST" src="woody.jpg"/>
43 | 		</div>
44 | 	</div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_full.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>imgLiquid Jquery Plugin</title>
 6 | 
 7 | 	<!-- RESET ______________________ -->
 8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
 9 | 
10 | 	<!-- JQUERY ______________________ -->
11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
13 | 
14 | 
15 | 	<!-- IMGLIQUID ______________________ -->
16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
17 | 
18 | 
19 | 	<!-- EXAMPLE ______________________ -->
20 | 	<script type="text/javascript">
21 | 	$(document).ready(function () {
22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
23 | 	});
24 | 	</script>
25 | 
26 | 
27 | 	<!-- EXAMPLE ______________________ -->
28 | 	<style type="text/css">
29 | 	body, html {
30 | 		margin:0;
31 | 		padding:0;
32 | 		width:100%;
33 | 		height:100%;
34 | 	}
35 | 	.full{
36 | 		width:100%;
37 | 		height:100%;
38 | 		background-color: #000;
39 | 		display: block;
40 | 		position: absolute;
41 | 		top: 0;
42 | 		bottom: 0;
43 | 	}
44 | 	</style>
45 | </head>
46 | 
47 | 
48 | 
49 | <body>
50 | 	<div class="boxSep" >
51 | 		<div class="imgLiquidFill imgLiquid full" >
52 | 			<img alt="TEST" src="woody.jpg"/>
53 | 		</div>
54 | 	</div>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![ScreenShot](https://raw.github.com/karacas/imgLiquid/master/tests/logoimgliquid.png)
 2 | 
 3 | imgLiquid v0.9.944 / 11-04-2013
 4 | ##### A jQuery Plugin to resize images to fit in a container.
 5 | Alejandro Emparan (karacas) / @krc_ale
 6 | Dual licensed under the MIT and GPL licenses.
 7 | ## 
 8 | # Usage
 9 | 
10 | #### Include:
11 | ```html
12 | <script src="js/imgLiquid-min.js"></script>
13 | ```
14 | 
15 | #### js:
16 | ```js
17 | $(document).ready(function() {
18 | 	$(".imgLiquidFill").imgLiquid();
19 | });
20 | ```
21 | 
22 | #### Html:
23 | ```html
24 | <div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
25 | 	<img alt="Woody" src="woody.jpg" />
26 | </div>
27 | ```
28 | #### View in action:
29 | http://jsfiddle.net/karacas/3CRx7/#base
30 | 
31 | http://codepen.io/karacas/pen/nlugd
32 | 
33 | 
34 | ### Features:
35 | ```
36 |     - Uses CSS Background-size when is available. (new!)
37 |     - Bootstrap compatible.
38 |     - Lightweight: < 2.0KBs gzipped.
39 | 	- Fill / Crop.
40 |     - Align.
41 | 	- Responsive.
42 | 	- Svg support.
43 | 	- CallBacks.
44 |     - HTML5 data-* attributes.
45 | 	- All browsers (Incl. ie6).
46 | ```
47 |  
48 | ### Options:
49 | ```
50 | 
51 |     >js
52 |         fill: true,
53 |         verticalAlign:      // 'center' //  'top'   //  'bottom' // '50%'  // '10%'
54 |         horizontalAlign:    // 'center' //  'left'  //  'right'  // '50%'  // '10%'
55 | 
56 |         //CallBacks
57 |         onStart:        function(){},
58 |         onFinish:       function(){},
59 |         onItemStart:    function(index, container, img){},
60 |         onItemFinish:   function(index, container, img){}
61 | 
62 |     >hml5 data attr (overwrite js options)
63 |         data-imgLiquid-fill="true"
64 |         data-imgLiquid-horizontalAlign="center"
65 |         data-imgLiquid-verticalAlign="50%"
66 | 
67 | ```
68 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_Responsive.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>imgLiquid Jquery Plugin</title>
 6 | 
 7 | 	<!-- RESET ______________________ -->
 8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
 9 | 
10 | 	<!-- JQUERY ______________________ -->
11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
13 | 
14 | 
15 | 	<!-- IMGLIQUID ______________________ -->
16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
17 | 
18 | 
19 | 	<!-- EXAMPLE ______________________ -->
20 | 	<script type="text/javascript">
21 | 	$(document).ready(function () {
22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
23 | 		$(".imgLiquidNoFill").imgLiquid({fill:false});
24 | 	});
25 | 	</script>
26 | 
27 | 
28 | 	<!-- CSS  ========================================-->
29 | 	<style type="text/css">
30 | 
31 | 	body {
32 | 		margin:0;
33 | 		padding:0;
34 | 		background-color:#fff;
35 | 		font-family: 'Open Sans', arial, sans-serif;
36 | 		font-weight:300;
37 | 		margin:30px;
38 | 	}
39 | 	.boxSep{
40 | 		background-color:#f7f7f7;
41 | 		border: 1px solid #ddd;
42 | 		margin:10px;
43 | 		float:left;
44 | 		margin-right:30px;
45 | 		width: 100%;
46 | 	}
47 | 	.imgLiquid{
48 | 		width: 100%;
49 | 		height: 500px;
50 | 	}
51 | 	.LogSep{
52 | 		margin:10px;
53 | 	}
54 | 	h1{
55 | 		margin:10px;
56 | 		margin-bottom:60px;
57 | 		font-size:30px;
58 | 		font-family: 'Open Sans', arial, sans-serif!Important;
59 | 		font-weight:300;
60 | 		color:#888;
61 | 	}
62 | 	h2{
63 | 		margin:10px;
64 | 		margin-top:0;
65 | 		margin-bottom:2px;
66 | 		font-size:20px;
67 | 		font-family: 'Open Sans', arial, sans-serif!Important;
68 | 		font-weight:300;
69 | 		color:#bbb;
70 | 		margin-top:80px;
71 | 	}
72 | 	</style>
73 | 
74 | </head>
75 | 
76 | 
77 | <body>
78 | 	<div class="boxSep">
79 | 		<div class="imgLiquidNoFill imgLiquid">
80 | 			<a href="woody.jpg"  target="_blank"  title="test">
81 | 				<img alt="TEST" src="woody.jpg"/>
82 | 			</a>
83 | 		</div>
84 | 	</div>
85 | </body>
86 | 
87 | </html>
88 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_importants.html:
--------------------------------------------------------------------------------
 1 | <!-- [WIP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!] -->
 2 | 
 3 | <!DOCTYPE html>
 4 | <html lang="es">
 5 | <head>
 6 | 	<meta charset="utf-8">
 7 | 	<title>imgLiquid Jquery Plugin</title>
 8 | 
 9 | 	<!-- RESET ______________________ -->
10 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
11 | 
12 | 	<!-- JQUERY ______________________ -->
13 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
14 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
15 | 
16 | 
17 | 	<!-- IMGLIQUID ______________________ -->
18 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
19 | 
20 | 
21 | 	<!-- EXAMPLE ______________________ -->
22 | 	<script type="text/javascript">
23 | 	$(document).ready(function () {
24 | 		$(".imgLiquidFill").imgLiquid({fill:false, horizontalAlign:'right', useBackgroundSize: false});
25 | 	});
26 | 	</script>
27 | 
28 | 
29 | 	<!-- EXAMPLE ______________________ -->
30 | 	<style type="text/css">
31 | 	body {
32 | 		margin:0;
33 | 		padding:0;
34 | 		background-color:#fff;
35 | 		font-family: 'Open Sans', arial, sans-serif;
36 | 		font-weight:300;
37 | 		margin:30px;
38 | 		width: 100%;
39 | 	}
40 | 	.boxSep{
41 | 		background-color:#f7f7f7;
42 | 		border: 1px solid #ddd;
43 | 		margin:10px;
44 | 		float:left;
45 | 		margin-right:30px;
46 | 	}
47 | 	.boxSep2{
48 | 		background-color:#f7f7f7;
49 | 		border: 1px solid #ddd;
50 | 	}
51 | 	.LogSep{
52 | 		margin:10px;
53 | 	}
54 | 	h1{
55 | 		margin:10px;
56 | 		margin-bottom:60px;
57 | 		font-size:30px;
58 | 		font-family: 'Open Sans', arial, sans-serif!Important;
59 | 		font-weight:300;
60 | 		color:#888;
61 | 	}
62 | 	h2{
63 | 		margin:10px;
64 | 		margin-top:0;
65 | 		margin-bottom:2px;
66 | 		font-size:20px;
67 | 		font-family: 'Open Sans', arial, sans-serif!Important;
68 | 		font-weight:300;
69 | 		color:#bbb;
70 | 		margin-top:80px;
71 | 	}
72 | 	.imgLiquid_ img{
73 | 		/* TODO: RESET */
74 | 		width: 100px !important;
75 | 	}
76 | 	</style>
77 | </head>
78 | 
79 | 
80 | <body>
81 | 	<br>
82 | 	<div style='clear:both'></div>
83 | 	<br>
84 | 
85 | 	<div>
86 | 		<div class="imgLiquidFill imgLiquid boxSep2" style="width:200px; height:200px;">
87 | 			<a href="woody.jpg" target="_blank" title="test">
88 | 				<img class="miImg" alt="TEST" src="woody.jpg"/>
89 | 			</a>
90 | 		</div>
91 | 	</div>
92 | 
93 | </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_changeImg.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>imgLiquid Jquery Plugin</title>
 6 | 
 7 | 	<!-- RESET ______________________ -->
 8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
 9 | 
10 | 	<!-- JQUERY ______________________ -->
11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
13 | 
14 | 
15 | 	<!-- IMGLIQUID ______________________ -->
16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
17 | 
18 | 
19 | 	<!-- EXAMPLE ______________________ -->
20 | 	<script type="text/javascript">
21 | 	$(document).ready(function () {
22 | 		$(".imgLiquidFill").imgLiquid({fill:false, horizontalAlign:'right', useBackgroundSize: false});
23 | 		$('.recall').click(function(){
24 | 			$('.miImg').attr('src', 'logoimgliquid.png')
25 | 			$(".imgLiquidFill").imgLiquid();
26 | 		})
27 | 	});
28 | 	</script>
29 | 
30 | 
31 | 	<!-- CSS ______________________ -->
32 | 	<style type="text/css">
33 | 
34 | 
35 | 	body {
36 | 		margin:0;
37 | 		padding:0;
38 | 		background-color:#fff;
39 | 		font-family: 'Open Sans', arial, sans-serif;
40 | 		font-weight:300;
41 | 		margin:30px;
42 | 		width: 100%;
43 | 	}
44 | 	.boxSep{
45 | 		background-color:#f7f7f7;
46 | 		border: 1px solid #ddd;
47 | 		margin:10px;
48 | 		float:left;
49 | 		margin-right:30px;
50 | 	}
51 | 	.boxSep2{
52 | 		background-color:#f7f7f7;
53 | 		border: 1px solid #ddd;
54 | 	}
55 | 	.LogSep{
56 | 		margin:10px;
57 | 	}
58 | 	h1{
59 | 		margin:10px;
60 | 		margin-bottom:60px;
61 | 		font-size:30px;
62 | 		font-family: 'Open Sans', arial, sans-serif!Important;
63 | 		font-weight:300;
64 | 		color:#888;
65 | 	}
66 | 	h2{
67 | 		margin:10px;
68 | 		margin-top:0;
69 | 		margin-bottom:2px;
70 | 		font-size:20px;
71 | 		font-family: 'Open Sans', arial, sans-serif!Important;
72 | 		font-weight:300;
73 | 		color:#bbb;
74 | 		margin-top:80px;
75 | 	}
76 | 	</style>
77 | 
78 | </head>
79 | 
80 | 
81 | 
82 | <body>
83 | 	<a href="#" class='recall' title="">Change Image</a>
84 | 	<br>
85 | 	<div style='clear:both'></div>
86 | 	<br>
87 | 	<div class="" >
88 | 		<div class="imgLiquidFill imgLiquid boxSep2" style="width:400px; height:400px;">
89 | 			<a href="woody.jpg" target="_blank" title="test">
90 | 				<img class="miImg" alt="TEST" src="woody.jpg"/>
91 | 			</a>
92 | 		</div>
93 | 	</div>
94 | </body>
95 | 
96 | </html>
97 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_visible.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<title>imgLiquid Jquery Plugin</title>
  6 | 
  7 | 	<!-- RESET ______________________ -->
  8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
  9 | 
 10 | 	<!-- JQUERY ______________________ -->
 11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
 12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
 13 | 
 14 | 
 15 | 	<!-- IMGLIQUID ______________________ -->
 16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
 17 | 
 18 | 
 19 | 	<!-- EXAMPLE ______________________ -->
 20 | 	<script type="text/javascript">
 21 | 	$(document).ready(function () {
 22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
 23 | 		$(".imgLiquidNoFill").imgLiquid({fill:false});
 24 | 		$('.recall').click(function(){
 25 | 			$(".boxSep").show();
 26 | 			return false
 27 | 		})
 28 | 	});
 29 | 	</script>
 30 | 
 31 | 
 32 | 	<!-- CSS ______________________ -->
 33 | 	<style type="text/css">
 34 | 
 35 | 	body {
 36 | 		margin:0;
 37 | 		padding:0;
 38 | 		background-color:#fff;
 39 | 		font-family: 'Open Sans', arial, sans-serif;
 40 | 		font-weight:300;
 41 | 		margin:30px;
 42 | 	}
 43 | 	.boxSep{
 44 | 		background-color:#f7f7f7;
 45 | 		border: 1px solid #ddd;
 46 | 		margin:10px;
 47 | 		float:left;
 48 | 		margin-right:30px;
 49 | 		display: none;
 50 | 	}
 51 | 	.LogSep{
 52 | 		margin:10px;
 53 | 	}
 54 | 	h1{
 55 | 		margin:10px;
 56 | 		margin-bottom:60px;
 57 | 		font-size:30px;
 58 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 59 | 		font-weight:300;
 60 | 		color:#888;
 61 | 	}
 62 | 	h2{
 63 | 		margin:10px;
 64 | 		margin-top:0;
 65 | 		margin-bottom:2px;
 66 | 		font-size:20px;
 67 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 68 | 		font-weight:300;
 69 | 		color:#bbb;
 70 | 		margin-top:80px;
 71 | 	}
 72 | 	</style>
 73 | 
 74 | </head>
 75 | <body>
 76 | 
 77 | 
 78 | 	<a href="#" class='recall' title="">Show</a>
 79 | 	<div style='clear:both'></div>
 80 | 
 81 | 	<div class="boxSep" >
 82 | 		<div class="imgLiquidFill imgLiquid" style="width:200px; height:200px;">
 83 | 			<a href="woody.jpg"  target="_blank"  title="test">
 84 | 				<img alt="TEST" src="woody.jpg"/>
 85 | 			</a>
 86 | 		</div>
 87 | 	</div>
 88 | 
 89 | 	<div class="boxSep" >
 90 | 		<div class="imgLiquidFill imgLiquid" style="width:150px; height:200px;" data-imgLiquid-verticalAlign="bottom"  data-imgLiquid-fill="false">
 91 | 			<a href="woody.jpg" target="_blank"  title="test">
 92 | 				<img alt="TEST" src="woody.jpg"/>
 93 | 			</a>
 94 | 		</div>
 95 | 	</div>
 96 | 
 97 | 	<div class="boxSep" >
 98 | 		<div class="imgLiquidFill imgLiquid" style="width:350px; height:200px;">
 99 | 			<a href="woody.jpg"  target="_blank" title="test">
100 | 				<img alt="TEST" src="woody.jpg"/>
101 | 			</a>
102 | 		</div>
103 | 	</div>
104 | 
105 | 	<div style='clear:both'></div>
106 | 	<div class="boxSep" >
107 | 		<div class="imgLiquidNoFill imgLiquid" style="width:200px; height:200px;" >
108 | 			<a href="woody.jpg"  target="_blank" title="test">
109 | 				<img alt="TEST" src="woody.jpg"/>
110 | 			</a>
111 | 		</div>
112 | 	</div>
113 | 
114 | 	<div class="boxSep" >
115 | 		<div class="imgLiquidNoFill imgLiquid" style="width:150px; height:200px;" data-imgLiquid-fill="true">
116 | 			<a href="woody.jpg"  target="_blank" title="test">
117 | 				<img alt="TEST" src="woody.jpg"/>
118 | 			</a>
119 | 		</div>
120 | 	</div>
121 | 
122 | 	<div class="boxSep" >
123 | 		<div class="imgLiquidNoFill imgLiquid" style="width:350px; height:200px;">
124 | 			<a href="woody.jpg" target="_blank"  title="test">
125 | 				<img alt="TEST" src="woody.jpg"/>
126 | 			</a>
127 | 		</div>
128 | 	</div>
129 | 
130 | 
131 | </body>
132 | </html>
133 | 


--------------------------------------------------------------------------------
/js/imgLiquid-min.js:
--------------------------------------------------------------------------------
1 | var imgLiquid=imgLiquid||{VER:"0.9.944"};imgLiquid.bgs_Available=!1,imgLiquid.bgs_CheckRunned=!1,imgLiquid.injectCss=".imgLiquid img {visibility:hidden}",function(i){function t(){if(!imgLiquid.bgs_CheckRunned){imgLiquid.bgs_CheckRunned=!0;var t=i('<span style="background-size:cover" />');i("body").append(t),!function(){var i=t[0];if(i&&window.getComputedStyle){var e=window.getComputedStyle(i,null);e&&e.backgroundSize&&(imgLiquid.bgs_Available="cover"===e.backgroundSize)}}(),t.remove()}}i.fn.extend({imgLiquid:function(e){this.defaults={fill:!0,verticalAlign:"center",horizontalAlign:"center",useBackgroundSize:!0,useDataHtmlAttr:!0,responsive:!0,delay:0,fadeInTime:0,removeBoxBackground:!0,hardPixels:!0,responsiveCheckTime:500,timecheckvisibility:500,onStart:null,onFinish:null,onItemStart:null,onItemFinish:null,onItemError:null},t();var a=this;return this.options=e,this.settings=i.extend({},this.defaults,this.options),this.settings.onStart&&this.settings.onStart(),this.each(function(t){function e(){-1===u.css("background-image").indexOf(encodeURI(c.attr("src")))&&u.css({"background-image":'url("'+encodeURI(c.attr("src"))+'")'}),u.css({"background-size":g.fill?"cover":"contain","background-position":(g.horizontalAlign+" "+g.verticalAlign).toLowerCase(),"background-repeat":"no-repeat"}),i("a:first",u).css({display:"block",width:"100%",height:"100%"}),i("img",u).css({display:"none"}),g.onItemFinish&&g.onItemFinish(t,u,c),u.addClass("imgLiquid_bgSize"),u.addClass("imgLiquid_ready"),l()}function d(){function e(){c.data("imgLiquid_error")||c.data("imgLiquid_loaded")||c.data("imgLiquid_oldProcessed")||(u.is(":visible")&&c[0].complete&&c[0].width>0&&c[0].height>0?(c.data("imgLiquid_loaded",!0),setTimeout(r,t*g.delay)):setTimeout(e,g.timecheckvisibility))}if(c.data("oldSrc")&&c.data("oldSrc")!==c.attr("src")){var a=c.clone().removeAttr("style");return a.data("imgLiquid_settings",c.data("imgLiquid_settings")),c.parent().prepend(a),c.remove(),c=a,c[0].width=0,setTimeout(d,10),void 0}return c.data("imgLiquid_oldProcessed")?(r(),void 0):(c.data("imgLiquid_oldProcessed",!1),c.data("oldSrc",c.attr("src")),i("img:not(:first)",u).css("display","none"),u.css({overflow:"hidden"}),c.fadeTo(0,0).removeAttr("width").removeAttr("height").css({visibility:"visible","max-width":"none","max-height":"none",width:"auto",height:"auto",display:"block"}),c.on("error",n),c[0].onerror=n,e(),o(),void 0)}function o(){(g.responsive||c.data("imgLiquid_oldProcessed"))&&c.data("imgLiquid_settings")&&(g=c.data("imgLiquid_settings"),u.actualSize=u.get(0).offsetWidth+u.get(0).offsetHeight/1e4,u.sizeOld&&u.actualSize!==u.sizeOld&&r(),u.sizeOld=u.actualSize,setTimeout(o,g.responsiveCheckTime))}function n(){c.data("imgLiquid_error",!0),u.addClass("imgLiquid_error"),g.onItemError&&g.onItemError(t,u,c),l()}function s(){var i={};if(a.settings.useDataHtmlAttr){var t=u.attr("data-imgLiquid-fill"),e=u.attr("data-imgLiquid-horizontalAlign"),d=u.attr("data-imgLiquid-verticalAlign");("true"===t||"false"===t)&&(i.fill=Boolean("true"===t)),void 0===e||"left"!==e&&"center"!==e&&"right"!==e&&-1===e.indexOf("%")||(i.horizontalAlign=e),void 0===d||"top"!==d&&"bottom"!==d&&"center"!==d&&-1===d.indexOf("%")||(i.verticalAlign=d)}return imgLiquid.isIE&&a.settings.ieFadeInDisabled&&(i.fadeInTime=0),i}function r(){var i,e,a,d,o,n,s,r,m=0,h=0,f=u.width(),v=u.height();void 0===c.data("owidth")&&c.data("owidth",c[0].width),void 0===c.data("oheight")&&c.data("oheight",c[0].height),g.fill===f/v>=c.data("owidth")/c.data("oheight")?(i="100%",e="auto",a=Math.floor(f),d=Math.floor(f*(c.data("oheight")/c.data("owidth")))):(i="auto",e="100%",a=Math.floor(v*(c.data("owidth")/c.data("oheight"))),d=Math.floor(v)),o=g.horizontalAlign.toLowerCase(),s=f-a,"left"===o&&(h=0),"center"===o&&(h=.5*s),"right"===o&&(h=s),-1!==o.indexOf("%")&&(o=parseInt(o.replace("%",""),10),o>0&&(h=.01*s*o)),n=g.verticalAlign.toLowerCase(),r=v-d,"left"===n&&(m=0),"center"===n&&(m=.5*r),"bottom"===n&&(m=r),-1!==n.indexOf("%")&&(n=parseInt(n.replace("%",""),10),n>0&&(m=.01*r*n)),g.hardPixels&&(i=a,e=d),c.css({width:i,height:e,"margin-left":Math.floor(h),"margin-top":Math.floor(m)}),c.data("imgLiquid_oldProcessed")||(c.fadeTo(g.fadeInTime,1),c.data("imgLiquid_oldProcessed",!0),g.removeBoxBackground&&u.css("background-image","none"),u.addClass("imgLiquid_nobgSize"),u.addClass("imgLiquid_ready")),g.onItemFinish&&g.onItemFinish(t,u,c),l()}function l(){t===a.length-1&&a.settings.onFinish&&a.settings.onFinish()}var g=a.settings,u=i(this),c=i("img:first",u);return c.length?(c.data("imgLiquid_settings")?(u.removeClass("imgLiquid_error").removeClass("imgLiquid_ready"),g=i.extend({},c.data("imgLiquid_settings"),a.options)):g=i.extend({},a.settings,s()),c.data("imgLiquid_settings",g),g.onItemStart&&g.onItemStart(t,u,c),imgLiquid.bgs_Available&&g.useBackgroundSize?e():d(),void 0):(n(),void 0)})}})}(jQuery),!function(){var i=imgLiquid.injectCss,t=document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",e.styleSheet?e.styleSheet.cssText=i:e.appendChild(document.createTextNode(i)),t.appendChild(e)}();


--------------------------------------------------------------------------------
/tests/imgLiquid_aligns.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<title>imgLiquid Jquery Plugin</title>
  6 | 
  7 | 	<!-- RESET ______________________ -->
  8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
  9 | 
 10 | 	<!-- JQUERY ______________________ -->
 11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
 12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
 13 | 
 14 | 
 15 | 	<!-- IMGLIQUID ______________________ -->
 16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
 17 | 
 18 | 
 19 | 	<!-- EXAMPLE ______________________ -->
 20 | 	<script type="text/javascript">
 21 | 	$(document).ready(function () {
 22 | 		$(".imgLiquid1").imgLiquid({fill:false, horizontalAlign:'5%', useBackgroundSize:false});
 23 | 		$(".imgLiquid2").imgLiquid({fill:false, horizontalAlign:'5%', useBackgroundSize:true});
 24 | 
 25 | 		$(".imgLiquid3").imgLiquid({fill:!false, horizontalAlign:'5%', useBackgroundSize:false});
 26 | 		$(".imgLiquid4").imgLiquid({fill:!false, horizontalAlign:'5%', useBackgroundSize:true});
 27 | 	});
 28 | 	</script>
 29 | 
 30 | 
 31 | 	<!-- CSS ______________________ -->
 32 | 	<style type="text/css">
 33 | 
 34 | 	body {
 35 | 		margin:0;
 36 | 		padding:0;
 37 | 		background-color:#fff;
 38 | 		font-family: 'Open Sans', arial, sans-serif;
 39 | 		font-weight:300;
 40 | 		margin:30px;
 41 | 	}
 42 | 	.boxSep{
 43 | 		background-color:#f7f7f7;
 44 | 		border: 1px solid #ddd;
 45 | 		margin:10px;
 46 | 		float:left;
 47 | 		margin-right:30px;
 48 | 	}
 49 | 	.LogSep{
 50 | 		margin:10px;
 51 | 	}
 52 | 	h1{
 53 | 		margin:10px;
 54 | 		margin-bottom:60px;
 55 | 		font-size:30px;
 56 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 57 | 		font-weight:300;
 58 | 		color:#888;
 59 | 	}
 60 | 	h2{
 61 | 		margin:10px;
 62 | 		margin-top:0;
 63 | 		margin-bottom:2px;
 64 | 		font-size:20px;
 65 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 66 | 		font-weight:300;
 67 | 		color:#bbb;
 68 | 		margin-top:80px;
 69 | 	}
 70 | 	</style>
 71 | 
 72 | </head>
 73 | <body>
 74 | 
 75 | 	<div class="boxSep" >
 76 | 		<div class="imgLiquid2 imgLiquid" style="width:400px; height:200px;">
 77 | 			<a href="woody.jpg"  target="_blank"  title="test">
 78 | 				<img alt="TEST" src="woody.jpg"/>
 79 | 			</a>
 80 | 		</div>
 81 | 	</div>
 82 | 	<div class="boxSep" >
 83 | 		<div class="imgLiquid2 imgLiquid" data-imgLiquid-horizontalAlign="95%" style="width:400px; height:200px;">
 84 | 			<a href="woody.jpg"  target="_blank"  title="test">
 85 | 				<img alt="TEST" src="woody.jpg"/>
 86 | 			</a>
 87 | 		</div>
 88 | 	</div>
 89 | 	<div class="boxSep" >
 90 | 		<div class="imgLiquid1 imgLiquid" data-imgLiquid-horizontalAlign="95%" style="width:400px; height:200px;">
 91 | 			<a href="woody.jpg"  target="_blank"  title="test">
 92 | 				<img alt="TEST" src="woody.jpg"/>
 93 | 			</a>
 94 | 		</div>
 95 | 	</div>
 96 | 
 97 | 
 98 | 
 99 | 	<div style="clear:both"></div>
100 | 	<br>
101 | 
102 | 
103 | 
104 | 	<div class="boxSep" >
105 | 		<div class="imgLiquid2 imgLiquid" data-imgLiquid-verticalAlign="95%" style="width:200px; height:500px;">
106 | 			<a href="woody.jpg"  target="_blank"  title="test">
107 | 				<img alt="TEST" src="woody.jpg"/>
108 | 			</a>
109 | 		</div>
110 | 	</div>
111 | 	<div class="boxSep" >
112 | 		<div class="imgLiquid1 imgLiquid" data-imgLiquid-verticalAlign="95%" style="width:200px; height:500px;">
113 | 			<a href="woody.jpg"  target="_blank"  title="test">
114 | 				<img alt="TEST" src="woody.jpg"/>
115 | 			</a>
116 | 		</div>
117 | 	</div>
118 | 
119 | 
120 | 
121 | 	<div style="clear:both"></div>
122 | 	<br>
123 | 
124 | 
125 | 
126 | 	<div class="boxSep" >
127 | 		<div class="imgLiquid4 imgLiquid" data-imgLiquid-verticalAlign="95%" style="width:400px; height:200px;">
128 | 			<a href="woody.jpg"  target="_blank"  title="test">
129 | 				<img alt="TEST" src="woody.jpg"/>
130 | 			</a>
131 | 		</div>
132 | 	</div>
133 | 	<div class="boxSep" >
134 | 		<div class="imgLiquid3 imgLiquid" data-imgLiquid-verticalAlign="95%" style="width:400px; height:200px;">
135 | 			<a href="woody.jpg"  target="_blank"  title="test">
136 | 				<img alt="TEST" src="woody.jpg"/>
137 | 			</a>
138 | 		</div>
139 | 	</div>
140 | 
141 | 
142 | 
143 | 	<div style="clear:both"></div>
144 | 	<br>
145 | 
146 | 
147 | 
148 | 	<div class="boxSep" >
149 | 		<div class="imgLiquid4 imgLiquid" data-imgLiquid-horizontalAlign="95%" style="width:200px; height:500px;">
150 | 			<a href="woody.jpg"  target="_blank"  title="test">
151 | 				<img alt="TEST" src="woody.jpg"/>
152 | 			</a>
153 | 		</div>
154 | 	</div>
155 | 	<div class="boxSep" >
156 | 		<div class="imgLiquid3 imgLiquid" data-imgLiquid-horizontalAlign="95%" style="width:200px; height:500px;">
157 | 			<a href="woody.jpg"  target="_blank"  title="test">
158 | 				<img alt="TEST" src="woody.jpg"/>
159 | 			</a>
160 | 		</div>
161 | 	</div>
162 | 
163 | 
164 | </body>
165 | </html>
166 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_Min.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<title>imgLiquid Jquery Plugin</title>
  6 | 
  7 | 	<!-- RESET ______________________ -->
  8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
  9 | 
 10 | 	<!-- JQUERY ______________________ -->
 11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
 12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
 13 | 
 14 | 
 15 | 	<!-- IMGLIQUID ______________________ -->
 16 | 	<script src ="../js/imgLiquid-min.js" type="text/javascript"></script>
 17 | 
 18 | 
 19 | 	<!-- EXAMPLE ______________________ -->
 20 | 	<script type="text/javascript">
 21 | 	$(document).ready(function () {
 22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
 23 | 		$(".imgLiquidNoFill").imgLiquid({fill:false});
 24 | 	});
 25 | 	</script>
 26 | 
 27 | 	<!-- CSS ______________________ -->
 28 | 	<style type="text/css">
 29 | 	/*github-ribbon*/
 30 | 	.github-ribbon{background-color:#121621;top:3.2em;right:-3.7em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-moz-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-ms-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-o-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;color:rgba(255,255,255,0.90);display:block;padding:.6em 3.5em;position:absolute;font:bold .82em sans-serif;text-align:center;text-decoration:none;text-shadow:1px -1px 8px rgba(0,0,0,0.60);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
 31 | 
 32 | 	body {
 33 | 		margin:0;
 34 | 		padding:0;
 35 | 		background-color:#fff;
 36 | 		font-family: 'Open Sans', arial, sans-serif;
 37 | 		font-weight:300;
 38 | 		margin:30px;
 39 | 	}
 40 | 	.boxSep{
 41 | 		background-color:#f7f7f7;
 42 | 		border: 1px solid #ddd;
 43 | 		margin:10px;
 44 | 		float:left;
 45 | 		margin-right:30px;
 46 | 	}
 47 | 	.LogSep{
 48 | 		margin:10px;
 49 | 	}
 50 | 	h1{
 51 | 		margin:10px;
 52 | 		margin-bottom:60px;
 53 | 		font-size:30px;
 54 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 55 | 		font-weight:300;
 56 | 		color:#888;
 57 | 	}
 58 | 	h2{
 59 | 		margin:10px;
 60 | 		margin-top:0;
 61 | 		margin-bottom:2px;
 62 | 		font-size:20px;
 63 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 64 | 		font-weight:300;
 65 | 		color:#bbb;
 66 | 		margin-top:80px;
 67 | 	}
 68 | 	</style>
 69 | </head>
 70 | 
 71 | 
 72 | 
 73 | <body>
 74 | 
 75 | 	<a href="https://github.com/karacas/imgLiquid" class="github-ribbon">Fork me on GitHub</a>
 76 | 	<div class="LogSep" >
 77 | 		<img src="logoimgliquid.png" alt="imgliquid"><br><br>
 78 | 		<p style='line-height:24px'>jQuery plugin to resize images to fit in a container.
 79 | 			<br>All of the images src of Woody's are the same.
 80 | 			<br>More info & usage in <a href="https://github.com/karacas/imgLiquid" >gitHub</a>.
 81 | 		</p>
 82 | 	</div>
 83 | 
 84 | 	<h2 style='clear:both'>ImageBox fill: true</h2>
 85 | 	<div class="boxSep" >
 86 | 		<div class="imgLiquidFill imgLiquid" style="width:200px; height:200px;" data-imgLiquid-fill="false">
 87 | 			<a href="woody.jpg"  target="_blank"  title="test">
 88 | 				<img alt="TEST" src="woody___().jpg"/>
 89 | 			</a>
 90 | 		</div>
 91 | 	</div>
 92 | 
 93 | 	<div class="boxSep" >
 94 | 		<div class="imgLiquidFill imgLiquid" style="width:150px; height:200px;" data-imgLiquid-verticalAlign="bottom"  data-imgLiquid-fill="false">
 95 | 			<a href="woody.jpg" target="_blank"  title="test">
 96 | 				<img alt="TEST" src="woody.jpg"/>
 97 | 			</a>
 98 | 		</div>
 99 | 	</div>
100 | 
101 | 	<div class="boxSep" >
102 | 		<div class="imgLiquidFill imgLiquid" style="width:350px; height:200px;">
103 | 			<a href="woody.jpg"  target="_blank" title="test">
104 | 				<img alt="TEST" src="woody.jpg"/>
105 | 			</a>
106 | 		</div>
107 | 	</div>
108 | 
109 | 
110 | 	<div style='clear:both'></div>
111 | 	<h2 style='clear:both'>ImageBox fill: false</h2>
112 | 	<div class="boxSep" >
113 | 		<div class="imgLiquidNoFill imgLiquid" style="width:200px; height:200px;" >
114 | 			<a href="woody.jpg"  target="_blank" title="test">
115 | 				<img alt="TEST" src="woody.jpg"/>
116 | 			</a>
117 | 		</div>
118 | 	</div>
119 | 
120 | 	<div class="boxSep" >
121 | 		<div class="imgLiquidNoFill imgLiquid" style="width:150px; height:200px;">
122 | 			<a href="woody.jpg"  target="_blank" title="test">
123 | 				<img alt="TEST" src="woody.jpg"/>
124 | 			</a>
125 | 		</div>
126 | 	</div>
127 | 
128 | 	<div class="boxSep" >
129 | 		<div class="imgLiquidNoFill imgLiquid" style="width:350px; height:200px;">
130 | 			<a href="woody.jpg" target="_blank"  title="test">
131 | 				<img alt="TEST" src="woody.jpg"/>
132 | 			</a>
133 | 		</div>
134 | 	</div>
135 | 
136 | 
137 | </body>
138 | </html>
139 | 


--------------------------------------------------------------------------------
/tests/imgLiquid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<title>imgLiquid Jquery Plugin</title>
  6 | 
  7 | 	<!-- RESET ______________________ -->
  8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
  9 | 
 10 | 	<!-- JQUERY ______________________ -->
 11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
 12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
 13 | 
 14 | 
 15 | 	<!-- IMGLIQUID ______________________ -->
 16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
 17 | 
 18 | 
 19 | 	<!-- EXAMPLE ______________________ -->
 20 | 	<script type="text/javascript">
 21 | 	$(document).ready(function () {
 22 | 		$(".imgLiquidFill").imgLiquid({fill:true});
 23 | 		$(".imgLiquidNoFill").imgLiquid({fill:false});
 24 | 	});
 25 | 	</script>
 26 | 
 27 | 
 28 | 	<!-- EXAMPLE ______________________ -->
 29 | 	<style type="text/css">
 30 | 	/*github-ribbon*/
 31 | 	.github-ribbon{background-color:#121621;top:3.2em;right:-3.7em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-moz-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-ms-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-o-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;color:rgba(255,255,255,0.90);display:block;padding:.6em 3.5em;position:absolute;font:bold .82em sans-serif;text-align:center;text-decoration:none;text-shadow:1px -1px 8px rgba(0,0,0,0.60);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
 32 | 	body {
 33 | 		margin:0;
 34 | 		padding:0;
 35 | 		background-color:#fff;
 36 | 		font-family: 'Open Sans', arial, sans-serif;
 37 | 		font-weight:300;
 38 | 		margin:30px;
 39 | 	}
 40 | 	.boxSep{
 41 | 		background-color:#f7f7f7;
 42 | 		border: 1px solid #ddd;
 43 | 		margin:10px;
 44 | 		float:left;
 45 | 		margin-right:30px;
 46 | 	}
 47 | 	.LogSep{
 48 | 		margin:10px;
 49 | 	}
 50 | 	h1{
 51 | 		margin:10px;
 52 | 		margin-bottom:60px;
 53 | 		font-size:30px;
 54 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 55 | 		font-weight:300;
 56 | 		color:#888;
 57 | 	}
 58 | 	h2{
 59 | 		margin:10px;
 60 | 		margin-top:0;
 61 | 		margin-bottom:2px;
 62 | 		font-size:20px;
 63 | 		font-family: 'Open Sans', arial, sans-serif!Important;
 64 | 		font-weight:300;
 65 | 		color:#bbb;
 66 | 		margin-top:80px;
 67 | 	}
 68 | 	</style>
 69 | </head>
 70 | 
 71 | 
 72 | <body>
 73 | 
 74 | 	<a href="https://github.com/karacas/imgLiquid" class="github-ribbon">Fork me on GitHub</a>
 75 | 	<div class="LogSep" >
 76 | 		<img src="logoimgliquid.png" alt="imgliquid"><br><br>
 77 | 		<p style='line-height:24px'>jQuery plugin to resize images to fit in a container.
 78 | 			<br>All of the images src of Woody's are the same.
 79 | 			<br>More info & usage in <a href="https://github.com/karacas/imgLiquid" >gitHub</a>.
 80 | 		</p>
 81 | 	</div>
 82 | 
 83 | 	<h2 style='clear:both'>ImageBox fill: true</h2>
 84 | 	<div class="boxSep" >
 85 | 		<div class="imgLiquidFill imgLiquid" style="width:200px; height:200px;" data-imgLiquid-fill="false" data-imgLiquid-verticalAlign="50%">
 86 | 			<a href="woody.jpg"  target="_blank"  title="test">
 87 | 				<img alt="TEST" src="woody.jpg?á()"/>
 88 | 			</a>
 89 | 		</div>
 90 | 	</div>
 91 | 
 92 | 	<div class="boxSep" >
 93 | 		<div class="imgLiquidFill imgLiquid" style="width:150px; height:200px;" data-imgLiquid-verticalAlign="bottom"  data-imgLiquid-fill="false">
 94 | 			<a href="woody.jpg" target="_blank"  title="test">
 95 | 				<img alt="TEST" src="woody.jpg"/>
 96 | 			</a>
 97 | 		</div>
 98 | 	</div>
 99 | 
100 | 	<div class="boxSep" >
101 | 		<div class="imgLiquidFill imgLiquid" style="width:350px; height:200px;">
102 | 			<a href="woody.jpg"  target="_blank" title="test">
103 | 				<img alt="TEST" src="woody.jpg"/>
104 | 			</a>
105 | 		</div>
106 | 	</div>
107 | 
108 | 
109 | 	<div style='clear:both'></div>
110 | 	<h2 style='clear:both'>ImageBox fill: false</h2>
111 | 	<div class="boxSep" >
112 | 		<div class="imgLiquidNoFill imgLiquid" style="width:200px; height:200px;" >
113 | 			<a href="woody.jpg"  target="_blank" title="test">
114 | 				<img alt="TEST" src="woody.jpg"/>
115 | 			</a>
116 | 		</div>
117 | 	</div>
118 | 
119 | 	<div class="boxSep" >
120 | 		<div class="imgLiquidNoFill imgLiquid" style="width:150px; height:200px;">
121 | 			<a href="woody.jpg"  target="_blank" title="test">
122 | 				<img alt="TEST" src="woody.jpg"/>
123 | 			</a>
124 | 		</div>
125 | 	</div>
126 | 
127 | 	<div class="boxSep" >
128 | 		<div class="imgLiquidNoFill imgLiquid" style="width:350px; height:200px;">
129 | 			<a href="woody.jpg" target="_blank"  title="test">
130 | 				<img alt="TEST" src="woody.jpg"/>
131 | 			</a>
132 | 		</div>
133 | 	</div>
134 | 
135 | 
136 | </body>
137 | </html>
138 | 


--------------------------------------------------------------------------------
/tests/imgLiquid_Recall.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<title>imgLiquid Jquery Plugin</title>
  6 | 
  7 | 	<!-- RESET ______________________ -->
  8 | 	<link   href="reset.css"	type="text/css" rel="stylesheet" />
  9 | 
 10 | 	<!-- JQUERY ______________________ -->
 11 | 	<!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <![endif]-->
 12 | 	<!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <!--<![endif]-->
 13 | 
 14 | 
 15 | 	<!-- IMGLIQUID ______________________ -->
 16 | 	<script src ="../js/imgLiquid.js" type="text/javascript"></script>
 17 | 
 18 | 
 19 | 	<!-- EXAMPLE ______________________ -->
 20 | 	<script type="text/javascript">
 21 | 	$(document).ready(function () {
 22 | 
 23 | 		$(".imgLiquidOld").imgLiquid({fill:false, horizontalAlign:'right', useBackgroundSize: !true, onItemError:function(i){console.log('Error__' + i)}});
 24 | 		$(".imgLiquidNoNew").imgLiquid({fill:false, horizontalAlign:'right', useBackgroundSize: true, onItemError:function(i){console.log('Error__' + i)}});
 25 | 
 26 | 
 27 | 		$('.recall').click(function(){
 28 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid({fill:false, horizontalAlign:'right', verticalAlign: 'bottom'});
 29 | 			return false;
 30 | 		});
 31 | 
 32 | 		$('.recall2').click(function(){
 33 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid({fill:true});
 34 | 			return false;
 35 | 		});
 36 | 
 37 | 		$('.recall3').click(function(){
 38 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid();
 39 | 			return false;
 40 | 		});
 41 | 
 42 | 		$('.recall4').click(function(){
 43 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid({fill:true, horizontalAlign:'center', verticalAlign:'center'});
 44 | 			return false;
 45 | 		});
 46 | 
 47 | 		$('.recall5').click(function(){
 48 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid({fill:!true});
 49 | 			return false;
 50 | 		});
 51 | 
 52 | 		$('.recall6').click(function(){
 53 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid({horizontalAlign:'left', verticalAlign:'top'});
 54 | 			return false;
 55 | 		});
 56 | 
 57 | 		$('.recall7').click(function(){
 58 | 			$(".imgLiquidOld, .imgLiquidNoNew").imgLiquid({horizontalAlign:'center', verticalAlign:'center'});
 59 | 			return false;
 60 | 		});
 61 | 
 62 | 
 63 | 	});
 64 | </script>
 65 | 
 66 | 
 67 | <!-- CSS ______________________ -->
 68 | <style type="text/css">
 69 | body {
 70 | 	margin:0;
 71 | 	padding:0;
 72 | 	background-color:#fff;
 73 | 	font-family: 'Open Sans', arial, sans-serif;
 74 | 	font-weight:300;
 75 | 	margin:20px;
 76 | 	width: 100%;
 77 | }
 78 | .boxSep{
 79 | 	background-color:#f7f7f7;
 80 | 	border: 1px solid #ddd;
 81 | 	float:left;
 82 | 	margin-right:10px;
 83 | 	margin-top: 10px;
 84 | }
 85 | .boxSep2{
 86 | 	background-color:#f7f7f7;
 87 | 	border: 1px solid #ddd;
 88 | 	width: 40%;
 89 | 	margin-right:10px;
 90 | 	margin-top: 10px;
 91 | }
 92 | .recalls a{
 93 | 	margin-right: 10px;
 94 | 	font-size: 13px;
 95 | 	text-decoration: none;
 96 | 	text-transform: uppercase;
 97 | }
 98 | .recalls a:hover{
 99 | 	text-decoration: underline;
100 | }
101 | </style>
102 | 
103 | </head>
104 | <body>
105 | 
106 | 	<div class="recalls">
107 | 		<a href="#" class='recall3' title="">None</a>
108 | 		<a href="#" class='recall2' title="">Fill</a>
109 | 		<a href="#" class='recall5' title="">NoFill</a>
110 | 		<a href="#" class='recall4' title="">Fill center/center</a>
111 | 		<a href="#" class='recall'  title="">NoFill right-bottom</a>
112 | 		<a href="#" class='recall6' title="">left/top</a>
113 | 		<a href="#" class='recall7' title="">center/center</a>
114 | 	</div>
115 | 
116 | 	<br><br>
117 | 
118 | 	OLD
119 | 	<div class="boxSep2" >
120 | 		<div class="imgLiquidOld imgLiquid" style="width:100%; height:150px;">
121 | 			<a href="woody.jpg" target="_blank" title="test">
122 | 				<img alt="TEST" src="woody.jpg"/>
123 | 			</a>
124 | 		</div>
125 | 	</div>
126 | 	<div style='clear:both'></div>
127 | 
128 | 	<div class="boxSep" >
129 | 		<div class="imgLiquidOld imgLiquid" style="width:150px; height:150px;" data-imgLiquid-verticalAlign="bottom" data-imgLiquid-horizontalAlign="left">
130 | 			<a href="woody.jpg" target="_blank" title="test">
131 | 				<img alt="TEST" src="woody.jpg"/>
132 | 			</a>
133 | 		</div>
134 | 	</div>
135 | 	<div class="boxSep" >
136 | 		<div class="imgLiquidOld imgLiquid" style="width:220px; height:150px;">
137 | 			<a href="woody.jpg" target="_blank" title="test">
138 | 				<img alt="TEST" src="woody.jpg"/>
139 | 			</a>
140 | 		</div>
141 | 	</div>
142 | 
143 | 
144 | 	<div style='clear:both'></div>
145 | 	<br><br><br>
146 | 
147 | 	NEW
148 | 	<div class="boxSep2" >
149 | 		<div class="imgLiquidNoNew imgLiquid" style="width:100%; height:150px;">
150 | 			<a href="woody.jpg" target="_blank" title="test">
151 | 				<img alt="TEST" src="woody.jpg"/>
152 | 			</a>
153 | 		</div>
154 | 	</div>
155 | 	<div style='clear:both'></div>
156 | 
157 | 	<div class="boxSep" >
158 | 		<div class="imgLiquidNoNew imgLiquid" style="width:150px; height:150px;" data-imgLiquid-verticalAlign="bottom" data-imgLiquid-horizontalAlign="left">
159 | 			<a href="woody.jpg" target="_blank" title="test">
160 | 				<img alt="TEST" src="woody.jpg"/>
161 | 			</a>
162 | 		</div>
163 | 	</div>
164 | 	<div class="boxSep" >
165 | 		<div class="imgLiquidNoNew imgLiquid" style="width:220px; height:150px;">
166 | 			<a href="woody.jpg" target="_blank" title="test">
167 | 				<img alt="TEST" src="woody.jpg"/>
168 | 			</a>
169 | 		</div>
170 | 	</div>
171 | 
172 | 
173 | </body>
174 | </html>
175 | 


--------------------------------------------------------------------------------
/js/imgLiquid.js:
--------------------------------------------------------------------------------
  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 | 
 33 | var imgLiquid = imgLiquid || {VER: '0.9.944'};
 34 | imgLiquid.bgs_Available = false;
 35 | imgLiquid.bgs_CheckRunned = false;
 36 | imgLiquid.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 | 
 65 | 	// ___________________________________________________________________
 66 | 
 67 | 	$.fn.extend({
 68 | 		imgLiquid: function (options) {
 69 | 
 70 | 			this.defaults = {
 71 | 				fill: true,
 72 | 				verticalAlign: 'center',			//	'top'	//	'bottom' // '50%'  // '10%'
 73 | 				horizontalAlign: 'center',			//	'left'	//	'right'  // '50%'  // '10%'
 74 | 				useBackgroundSize: true,
 75 | 				useDataHtmlAttr: true,
 76 | 
 77 | 				responsive: true,					/* Only for use with BackgroundSize false (or old browsers) */
 78 | 				delay: 0,							/* Only for use with BackgroundSize false (or old browsers) */
 79 | 				fadeInTime: 0,						/* Only for use with BackgroundSize false (or old browsers) */
 80 | 				removeBoxBackground: true,			/* Only for use with BackgroundSize false (or old browsers) */
 81 | 				hardPixels: true,					/* Only for use with BackgroundSize false (or old browsers) */
 82 | 				responsiveCheckTime: 500,			/* Only for use with BackgroundSize false (or old browsers) */ /* time to check div resize */
 83 | 				timecheckvisibility: 500,			/* Only for use with BackgroundSize false (or old browsers) */ /* time to recheck if visible/loaded */
 84 | 
 85 | 				// CALLBACKS
 86 | 				onStart: null,						// no-params
 87 | 				onFinish: null,						// no-params
 88 | 				onItemStart: null,					// params: (index, container, img )
 89 | 				onItemFinish: null,					// params: (index, container, img )
 90 | 				onItemError: null					// params: (index, container, img )
 91 | 			};
 92 | 
 93 | 
 94 | 			checkBgsIsavailable();
 95 | 			var imgLiquidRoot = this;
 96 | 
 97 | 			// Extend global settings
 98 | 			this.options = options;
 99 | 			this.settings = $.extend({}, this.defaults, this.options);
100 | 
101 | 			// CallBack
102 | 			if (this.settings.onStart) this.settings.onStart();
103 | 
104 | 
105 | 
106 | 
107 | 			// ___________________________________________________________________
108 | 
109 | 			return this.each(function ($i) {
110 | 
111 | 				// MAIN >> each for image
112 | 
113 | 				var settings = imgLiquidRoot.settings,
114 | 				$imgBoxCont = $(this),
115 | 				$img = $('img:first',$imgBoxCont);
116 | 				if (!$img.length) {onError(); return;}
117 | 
118 | 
119 | 				// Extend settings
120 | 				if (!$img.data('imgLiquid_settings')) {
121 | 					// First time
122 | 					settings = $.extend({}, imgLiquidRoot.settings, getSettingsOverwrite());
123 | 				} else {
124 | 					// Recall
125 | 					// Remove Classes
126 | 					$imgBoxCont.removeClass('imgLiquid_error').removeClass('imgLiquid_ready');
127 | 					settings = $.extend({}, $img.data('imgLiquid_settings'), imgLiquidRoot.options);
128 | 				}
129 | 				$img.data('imgLiquid_settings', settings);
130 | 
131 | 
132 | 				// Start CallBack
133 | 				if (settings.onItemStart) settings.onItemStart($i, $imgBoxCont, $img); /* << CallBack */
134 | 
135 | 
136 | 				// Process
137 | 				if (imgLiquid.bgs_Available && settings.useBackgroundSize)
138 | 					processBgSize();
139 | 				else
140 | 					processOldMethod();
141 | 
142 | 
143 | 				// END MAIN <<
144 | 
145 | 
146 | 
147 | 
148 | 				// ___________________________________________________________________
149 | 
150 | 				function processBgSize() {
151 | 
152 | 					// Check change img src
153 | 					if ($imgBoxCont.css('background-image').indexOf(encodeURI($img.attr('src'))) === -1) {
154 | 						// Change
155 | 						$imgBoxCont.css({'background-image': 'url("' + encodeURI($img.attr('src')) + '")'});
156 | 					}
157 | 
158 | 					$imgBoxCont.css({
159 | 						'background-size':		(!settings.fill && $img[0].width <= $imgBoxCont.width() && $img[0].height <= $imgBoxCont.height()) ? 'auto' : (settings.fill) ? 'cover' : 'contain',
160 | 						'background-position':	(settings.horizontalAlign + ' ' + settings.verticalAlign).toLowerCase(),
161 | 						'background-repeat':	'no-repeat'
162 | 					});
163 | 
164 | 					$('a:first', $imgBoxCont).css({
165 | 						'display':	'block',
166 | 						'width':	'100%',
167 | 						'height':	'100%'
168 | 					});
169 | 
170 | 					$('img', $imgBoxCont).css({'display': 'none'});
171 | 
172 | 					if (settings.onItemFinish) settings.onItemFinish($i, $imgBoxCont, $img); /* << CallBack */
173 | 
174 | 					$imgBoxCont.addClass('imgLiquid_bgSize');
175 | 					$imgBoxCont.addClass('imgLiquid_ready');
176 | 					checkFinish();
177 | 				}
178 | 
179 | 
180 | 
181 | 
182 | 				// ___________________________________________________________________
183 | 
184 | 				function processOldMethod() {
185 | 
186 | 					// Check change img src
187 | 					if ($img.data('oldSrc') && $img.data('oldSrc') !== $img.attr('src')) {
188 | 
189 | 						/* Clone & Reset img */
190 | 						var $imgCopy = $img.clone().removeAttr('style');
191 | 						$imgCopy.data('imgLiquid_settings', $img.data('imgLiquid_settings'));
192 | 						$img.parent().prepend($imgCopy);
193 | 						$img.remove();
194 | 						$img = $imgCopy;
195 | 						$img[0].width = 0;
196 | 
197 | 						// Bug ie with > if (!$img[0].complete && $img[0].width) onError();
198 | 						setTimeout(processOldMethod, 10);
199 | 						return;
200 | 					}
201 | 
202 | 
203 | 					// Reproceess?
204 | 					if ($img.data('imgLiquid_oldProcessed')) {
205 | 						makeOldProcess(); return;
206 | 					}
207 | 
208 | 
209 | 					// Set data
210 | 					$img.data('imgLiquid_oldProcessed', false);
211 | 					$img.data('oldSrc', $img.attr('src'));
212 | 
213 | 
214 | 					// Hide others images
215 | 					$('img:not(:first)', $imgBoxCont).css('display', 'none');
216 | 
217 | 
218 | 					// CSSs
219 | 					$imgBoxCont.css({'overflow': 'hidden'});
220 | 					$img.fadeTo(0, 0).removeAttr('width').removeAttr('height').css({
221 | 						'visibility': 'visible',
222 | 						'max-width': 'none',
223 | 						'max-height': 'none',
224 | 						'width': 'auto',
225 | 						'height': 'auto',
226 | 						'display': 'block'
227 | 					});
228 | 
229 | 
230 | 					// CheckErrors
231 | 					$img.on('error', onError);
232 | 					$img[0].onerror = onError;
233 | 
234 | 
235 | 					// loop until load
236 | 					function onLoad() {
237 | 						if ($img.data('imgLiquid_error') || $img.data('imgLiquid_loaded') || $img.data('imgLiquid_oldProcessed')) return;
238 | 						if ($imgBoxCont.is(':visible') && $img[0].complete && $img[0].width > 0 && $img[0].height > 0) {
239 | 							$img.data('imgLiquid_loaded', true);
240 | 							setTimeout(makeOldProcess, $i * settings.delay);
241 | 						} else {
242 | 							setTimeout(onLoad, settings.timecheckvisibility);
243 | 						}
244 | 					}
245 | 
246 | 
247 | 					onLoad();
248 | 					checkResponsive();
249 | 				}
250 | 
251 | 
252 | 
253 | 
254 | 				// ___________________________________________________________________
255 | 
256 | 				function checkResponsive() {
257 | 
258 | 					/* Only for oldProcessed method (background-size dont need) */
259 | 
260 | 					if (!settings.responsive && !$img.data('imgLiquid_oldProcessed')) return;
261 | 					if (!$img.data('imgLiquid_settings')) return;
262 | 
263 | 					settings = $img.data('imgLiquid_settings');
264 | 
265 | 					$imgBoxCont.actualSize = $imgBoxCont.get(0).offsetWidth + ($imgBoxCont.get(0).offsetHeight / 10000);
266 | 					if ($imgBoxCont.sizeOld && $imgBoxCont.actualSize !== $imgBoxCont.sizeOld) makeOldProcess();
267 | 
268 | 					$imgBoxCont.sizeOld = $imgBoxCont.actualSize;
269 | 					setTimeout(checkResponsive, settings.responsiveCheckTime);
270 | 				}
271 | 
272 | 
273 | 
274 | 
275 | 				// ___________________________________________________________________
276 | 
277 | 				function onError() {
278 | 					$img.data('imgLiquid_error', true);
279 | 					$imgBoxCont.addClass('imgLiquid_error');
280 | 					if (settings.onItemError) settings.onItemError($i, $imgBoxCont, $img); /* << CallBack */
281 | 					checkFinish();
282 | 				}
283 | 
284 | 
285 | 
286 | 
287 | 				// ___________________________________________________________________
288 | 
289 | 				function getSettingsOverwrite() {
290 | 					var SettingsOverwrite = {};
291 | 
292 | 					if (imgLiquidRoot.settings.useDataHtmlAttr) {
293 | 						var dif = $imgBoxCont.attr('data-imgLiquid-fill'),
294 | 						ha =  $imgBoxCont.attr('data-imgLiquid-horizontalAlign'),
295 | 						va =  $imgBoxCont.attr('data-imgLiquid-verticalAlign');
296 | 
297 | 						if (dif === 'true' || dif === 'false') SettingsOverwrite.fill = Boolean (dif === 'true');
298 | 						if (ha !== undefined && (ha === 'left' || ha === 'center' || ha === 'right' || ha.indexOf('%') !== -1)) SettingsOverwrite.horizontalAlign = ha;
299 | 						if (va !== undefined && (va === 'top' ||  va === 'bottom' || va === 'center' || va.indexOf('%') !== -1)) SettingsOverwrite.verticalAlign = va;
300 | 					}
301 | 
302 | 					if (imgLiquid.isIE && imgLiquidRoot.settings.ieFadeInDisabled) SettingsOverwrite.fadeInTime = 0; //ie no anims
303 | 					return SettingsOverwrite;
304 | 				}
305 | 
306 | 
307 | 
308 | 
309 | 
310 | 				// ___________________________________________________________________
311 | 
312 | 				function makeOldProcess() { /* Only for old browsers, or useBackgroundSize seted false */
313 | 
314 | 					// Calculate size
315 | 					var w, h, wn, hn, ha, va, hdif, vdif,
316 | 					margT = 0,
317 | 					margL = 0,
318 | 					$imgCW = $imgBoxCont.width(),
319 | 					$imgCH = $imgBoxCont.height();
320 | 
321 | 
322 | 					// Save original sizes
323 | 					if ($img.data('owidth')	=== undefined) $img.data('owidth',	$img[0].width);
324 | 					if ($img.data('oheight') === undefined) $img.data('oheight', $img[0].height);
325 | 
326 | 
327 | 					// Compare ratio
328 | 					if (!settings.fill && $img.data('owidth') <= $imgCW && $img.data('oheight') <= $imgCH) {
329 | 						w = 'auto';
330 | 						h = 'auto';
331 | 						wn = $img.data('owidth');
332 | 						hn = $img.data('oheight');
333 | 					} else {
334 | 						if (settings.fill === ($imgCW / $imgCH) >= ($img.data('owidth') / $img.data('oheight'))) {
335 | 							w = '100%';
336 | 							h = 'auto';
337 | 							wn = Math.floor($imgCW);
338 | 							hn = Math.floor($imgCW * ($img.data('oheight') / $img.data('owidth')));
339 | 						} else {
340 | 							w = 'auto';
341 | 							h = '100%';
342 | 							wn = Math.floor($imgCH * ($img.data('owidth') / $img.data('oheight')));
343 | 							hn = Math.floor($imgCH);
344 | 						}
345 | 					}
346 | 
347 | 					// Align X
348 | 					ha = settings.horizontalAlign.toLowerCase();
349 | 					hdif = $imgCW - wn;
350 | 					if (ha === 'left') margL = 0;
351 | 					if (ha === 'center') margL = hdif * 0.5;
352 | 					if (ha === 'right') margL = hdif;
353 | 					if (ha.indexOf('%') !== -1){
354 | 						ha = parseInt (ha.replace('%',''), 10);
355 | 						if (ha > 0) margL = hdif * ha * 0.01;
356 | 					}
357 | 
358 | 
359 | 					// Align Y
360 | 					va = settings.verticalAlign.toLowerCase();
361 | 					vdif = $imgCH - hn;
362 | 					if (va === 'top') margT = 0;
363 | 					if (va === 'center') margT = vdif * 0.5;
364 | 					if (va === 'bottom') margT = vdif;
365 | 					if (va.indexOf('%') !== -1){
366 | 						va = parseInt (va.replace('%',''), 10);
367 | 						if (va > 0) margT = vdif * va * 0.01;
368 | 					}
369 | 
370 | 
371 | 					// Add Css
372 | 					if (settings.hardPixels) {w = wn; h = hn;}
373 | 					$img.css({
374 | 						'width': w,
375 | 						'height': h,
376 | 						'margin-left': Math.floor(margL),
377 | 						'margin-top': Math.floor(margT)
378 | 					});
379 | 
380 | 
381 | 					// FadeIn > Only first time
382 | 					if (!$img.data('imgLiquid_oldProcessed')) {
383 | 						$img.fadeTo(settings.fadeInTime, 1);
384 | 						$img.data('imgLiquid_oldProcessed', true);
385 | 						if (settings.removeBoxBackground) $imgBoxCont.css('background-image', 'none');
386 | 						$imgBoxCont.addClass('imgLiquid_nobgSize');
387 | 						$imgBoxCont.addClass('imgLiquid_ready');
388 | 					}
389 | 
390 | 
391 | 					if (settings.onItemFinish) settings.onItemFinish($i, $imgBoxCont, $img); /* << CallBack */
392 | 					checkFinish();
393 | 				}
394 | 
395 | 
396 | 
397 | 
398 | 				// ___________________________________________________________________
399 | 
400 | 				function checkFinish() { /* Check callBack */
401 | 					if ($i === imgLiquidRoot.length - 1) if (imgLiquidRoot.settings.onFinish) imgLiquidRoot.settings.onFinish();
402 | 				}
403 | 
404 | 
405 | 			});
406 | 		}
407 | 	});
408 | })(jQuery);
409 | 
410 | 
411 | 
412 | // Inject css styles ______________________________________________________
413 | !function () {
414 | 	var css = imgLiquid.injectCss,
415 | 	head = document.getElementsByTagName('head')[0],
416 | 	style = document.createElement('style');
417 | 	style.type = 'text/css';
418 | 	if (style.styleSheet) {
419 | 		style.styleSheet.cssText = css;
420 | 	} else {
421 | 		style.appendChild(document.createTextNode(css));
422 | 	}
423 | 	head.appendChild(style);
424 | }();
425 | 


--------------------------------------------------------------------------------