https://www.desiretotrade.com/wp-content/themes/espresso/js/imgLiquid.js?ver=1.5.4

1/*!
2imgLiquid v0.9.944 / 03-05-2013
3jQuery plugin to resize images to fit in a container.
4Copyright (c) 2012 Alejandro Emparan (karacas) @krc_ale
5Dual licensed under the MIT and GPL licenses
6https://github.com/karacas/imgLiquid
7**/
8/*
9ex:
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
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) ? '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 useBackgroun

312dSize 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 === ($imgCW / $imgCH) >= ($img.data('owidth') / $img.data('oheight'))) {
329						w = '100%';
330						h = 'auto';
331						wn = Math.floor($imgCW);
332						hn = Math.floor($imgCW * ($img.data('oheight') / $img.data('owidth')));
333					} else {
334						w = 'auto';
335						h = '100%';
336						wn = Math.floor($imgCH * ($img.data('owidth') / $img.data('oheight')));
337						hn = Math.floor($imgCH);
338					}
339
340					// Align X
341					ha = settings.horizontalAlign.toLowerCase();
342					hdif = $imgCW - wn;
343					if (ha === 'left') margL = 0;
344					if (ha === 'center') margL = hdif * 0.5;
345					if (ha === 'right') margL = hdif;
346					if (ha.indexOf('%') !== -1){
347						ha = parseInt (ha.replace('%',''), 10);
348						if (ha > 0) margL = hdif * ha * 0.01;
349					}
350
351
352					// Align Y
353					va = settings.verticalAlign.toLowerCase();
354					vdif = $imgCH - hn;
355					if (va === 'top') margT = 0;
356					if (va === 'center') margT = vdif * 0.5;
357					if (va === 'bottom') margT = vdif;
358					if (va.indexOf('%') !== -1){
359						va = parseInt (va.replace('%',''), 10);
360						if (va > 0) margT = vdif * va * 0.01;
361					}
362
363
364					// Add Css
365					if (settings.hardPixels) {w = wn; h = hn;}
366					$img.css({
367						'width': w,
368						'height': h,
369						'margin-left': Math.floor(margL),
370						'margin-top': Math.floor(margT)
371					});
372
373
374					// FadeIn > Only first time
375					if (!$img.data('imgLiquid_oldProcessed')) {
376						$img.fadeTo(settings.fadeInTime, 1);
377						$img.data('imgLiquid_oldProcessed', true);
378						if (settings.removeBoxBackground) $imgBoxCont.css('background-image', 'none');
379						$imgBoxCont.addClass('imgLiquid_nobgSize');
380						$imgBoxCont.addClass('imgLiquid_ready');
381					}
382
383
384					if (settings.onItemFinish) settings.onItemFinish($i, $imgBoxCont, $img); /* << CallBack */
385					checkFinish();
386				}
387
388
389
390
391				// ___________________________________________________________________
392
393				function checkFinish() { /* Check callBack */

394					if ($i === imgLiquidRoot.length - 1) if (imgLiquidRoot.settings.onFinish) imgLiquidRoot.settings.onFinish();
395				}
396
397
398			});
399		}
400	});
401})(jQuery);
402
403
404
405// Inject css styles ______________________________________________________
406!function () {
407	var css = imgLiquid.injectCss,
408	head = document.getElementsByTagName('head')[0],
409	style = document.createElement('style');
410	style.type = 'text/css';
411	if (style.styleSheet) {
412		style.styleSheet.cssText = css;
413	} else {
414		style.appendChild(document.createTextNode(css));
415	}
416	head.appendChild(style);
417}();