https://www.rhumz.com/wp-content/plugins/lte-ext/elementor/shortcodes/zoomslider/jquery.zoomslider.js

1/*
2 *  zoomSlider - v0.2.6
3 *  CSS3 background zoom slideshow
4 *  http://mingthings.com
5 *
6 *  Made by Ming Yeung
7 *  Under MIT License
8 */
9;(function ( $, window, document, undefined ) {
10
11	var pluginName = "zoomSlider",
12		defaults = {
13			src: null,
14			src2: null,
15			speed: 8000,
16			initzoom: 1.2,
17			switchSpeed: 1000,
18			interval: 4600,
19			autoplay: true,
20			bullets: true,
21			overlay: 'plain' // false, plain, dots
22		};
23
24	// The actual plugin constructor
25	function Plugin ( element, options ) {
26		this.element = element;
27		this.$el = $(element);
28		this._defaults = defaults;
29		this._name = pluginName;
30
31		var elData = this.$el.data();
32		var elDataObj = {};
33		for (var key in elData) {
34			if ( elData.hasOwnProperty(key) ) {
35				if ( key.match(/zs[A-Z]/) ) {
36					var keyName = key.substr(2);
37					keyName = keyName.charAt(0).toLowerCase() + keyName.slice(1);
38					elDataObj[keyName] = elData[key]
39				}
40			}
41		}
42		this.settings = $.extend( {}, defaults, elDataObj, options );
43
44		if ( this.settings.src == null || this.settings.src.length < 1 ) {
45			console.log('ZoomSlider terminated - invalid input.');
46			return;
47		}
48
49		this.init();
50	}
51
52	// Avoid Plugin.prototype conflicts
53	$.extend(Plugin.prototype, {
54		init: function () {
55			// Place initialization logic here
56			// You already have access to the DOM element and
57			// the options via the instance, e.g. this.element
58			// and this.settings
59			// you can add more functions like the one below and
60			// call them like so: this.yourOtherFunction(this.element, this.settings).
61
62			// make sure src is an Array
63			if ($.isArray(this.settings.src) == false) {
64				this.settings.src = [this.settings.src];
65			}
66
67			if ($.isArray(this.settings.src2) == false) {
68				this.settings.src2 = [this.settings.src2];
69			}			
70
71			// https://github.com/twitter/bootstrap/issues/2870
72			this.transEndEventNames = {
73				'WebkitTransition' : 'webkitTransitionEnd',
74				'MozTransition' : 'transitionend',
75				'OTransition' : 'oTransitionEnd',
76				'msTransition' : 'MSTransitionEnd',
77				'transition' : 'transitionend'
78			};
79			this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
80
81			// suport for css transforms and css transitions
82			this.support = Modernizr.csstransitions && Modernizr.csstransforms;

83
84			// set inline CSS3 transition properties
85			var transformPrefixed = Modernizr.prefixed('transform');
86			transformPrefixed = transformPrefixed.replace(/([A-Z])/g, function(transformPrefixed,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
87			this.transitionProp = { 
88				'transition': transformPrefixed+' '+this.settings.speed+'ms ease-out, opacity '+this.settings.switchSpeed+'ms'
89			};
90
91			this.numSlides = this.settings.src.length;
92
93			// make sure the container is not [position: static]
94			switch(this.$el.css('position')) {
95				case 'relative':
96				case 'absolute':
97				case 'fixed':
98					break;
99				default:
100					this.$el.css('position', 'relative');
101					break;
102			}
103
104			// make sure the first image has been loaded.
105			var self = this;
106			var $img = $('<img />');
107			//$img.load( function() {
108				if (self.numSlides == 1) {
109					self.initSingle();
110				} else {
111					self.initSlideshow();
112				}
113			//});
114
115			$img.attr('src', this.settings.src[0]);
116		},
117		initSlideshow: function () {
118			var self = this;
119			var $slideshow = $('<div class="zs-slideshow"></div>'),
120				$slidesWrap = $('<div class="zs-slides"></div>'),
121				$arrowsWrap = $('<div class="zs-arrows"></div>'),
122				$zslayer = $('<div class="zs-layer"></div>'),
123				$bulletsWrap = $('<div class="zs-bullets"></div>');
124
125			for (i = 0; i < this.numSlides; i++) {
126
127				var $slide = $('<div class="zs-slide zs-slide-' + i + '"></div>');
128				$slide.css({ 'background-image': "url('" + this.settings.src[i] + "')" }).appendTo( $slidesWrap );
129
130				var $bullet = $('<div class="zs-bullet zs-bullet-' + i + '"></div>')
131				$bullet.appendTo( $bulletsWrap );
132
133				if (i == 0) {
134					$slide.addClass('active').css('opacity', 1);
135					$bullet.addClass('active');
136
137					$('.zs-enabled .lte-zs-slider-inner.lte-zs-slide-' + i).addClass('visible');
138				}
139			}
140
141			self._promoteChildren();
142
143			$slideshow.append( $zslayer );
144
145			$slideshow.append( $slidesWrap ).prependTo( this.$el );
146
147			if ( this.settings.bullets == true ) {
148				$slideshow.append( $bulletsWrap );
149				$slideshow.on('click', '.zs-bullet', function(e){
150					self.jump( $(this).index() );
151				});
152			}
153
154			if ( this.settings.arrows == true || this.settings.arrows == 'right' || this.settings.arrows == 'bottom'  ) {
155

156				var container_class = '';
157				if ( this.settings.arrows == 'bottom' ) {
158
159					container_class = 'container';
160				}
161
162				$('<div class="'+container_class+'"><span class="lte-arrow-left">'+this.settings.prev+'</span><span class="lte-arrow-right">'+this.settings.next+'</span></div>').appendTo( $arrowsWrap );
163				this.$el.append( $arrowsWrap );
164
165				this.$el.on('click', '.lte-arrow-left', function(e){
166					self.prev();
167				});
168
169				this.$el.on('click', '.lte-arrow-right', function(e){
170					self.next()	;
171				});
172			}			
173	
174
175			this.pos = 0;
176			this.pending = null;
177			this.switching = false;
178			this.$slideshow = $slideshow;
179			this.$slides = $slidesWrap.children( '.zs-slide' );
180			this.$bullets = $bulletsWrap.children( '.zs-bullet' );
181			this.$el.addClass('zs-enabled');
182
183			var $firstBlock = $('.zs-enabled .lte-zs-slider-inner');
184
185			var minHeight = 0;
186			$('.lte-zs-slider-inner').each(function(i, el) {
187
188				if ( $(el).height() > minHeight ) {
189
190					minHeight = $(el).height();
191				}
192			});
193
194			if (this.support) {
195				var $firstSlide = this.$slides.eq(0);
196				var $initzoom = this.settings.initzoom;
197				$firstSlide.css('opacity', 0).css( this.transitionProp );
198
199
200
201				$('.lte-zs-slider-wrapper').css('min-height', minHeight + 'px' );
202				$('.zs-slideshow').css('min-height', minHeight + 'px' );
203				jQuery(window).on('resize', function(){
204
205					var minHeight = 0;
206					$('.lte-zs-slider-inner').each(function(i, el) {
207
208						if ( $(el).height() > minHeight ) {
209
210							minHeight = $(el).height();
211						}
212					});
213
214					$('.lte-zs-slider-wrapper').css('min-height', minHeight + 'px' );
215					$('.zs-slideshow').css('min-height', minHeight + 'px' );
216				});
217
218				setTimeout(function(){
219
220					$firstSlide.css( { 'opacity': 1.0, 'transform': 'scale('+ $initzoom +', '+ $initzoom +')', 'z-index': 2 } );
221				}, 50);
222			}
223
224			if (this.settings.autoplay == true) {
225				this.play();
226			}
227		},
228		initSingle: function() {
229			var self = this;
230			var $slideshow = $('<div class="zs-slideshow"></div>'),
231				$slidesWrap = $('<div class="zs-slides"></div>'),
232				$slide = $('<div class="zs-slide zs-slide-0"></div>');
233
234			$slide.css({ 'background-image': "url('" + this.settings.src[0] + "')" }).appendTo( $slidesWrap );
235			$slide.addClass('active').css('opacity', 1);
236
237			$('.zs-enabled .lte-zs-slider-inner.lte-zs-slide-0').addClass('visible').addClass('single');
238
239			self._promoteChildren();
240
241			$slideshow.append( $slidesWrap ).prependTo( this.$el );
242			this.$el.addClass('zs-enabled');
243
244			if (this.settings.overlay == 'dots') {
245				this.$el.addClass('overlay-dots');
246			} else if (this.settings.overlay == 'plain') {
247				this.$el.addClass('overlay-plain')
248			}
249
250			if (this.support) {
251				$slide.css('opacity', 1).css( this.transitionProp );
252
253				if (this.settings) {
254
255					setTimeout(function(){
256						$slide.css( { 'opacity': 1.0, 'transform': 'scale(1)', 'z-index': 2 } )			
257					}, 50);
258				}
259			}
260		},
261		_promoteChildren: function() {
262			// make sure every children have high enough z-index
263			this.$el.children().each(function(index){
264				$this = $(this);
265				if ($this.css('z-index') == 'auto') {
266					$this.css('z-index', 2);
267				}
268				if ($this.css('position') == 'static') {
269					$this.css('position', 'relative');
270				}
271			});
272		},
273		jump: function( pos ) {
274			if ( pos >= this.numSlides ) {
275				console.log('ZoomSlider: jump(pos) aborted. supplied index out of range.');
276				return;
277			}
278
279			if ( this.pos == pos ) return;
280
281			if ( this.switching ) {
282				this.pending = pos;
283				return;
284			}
285
286			var self = this;
287			var $lastSlide = this.$slides.eq( this.pos );
288			var $nowSlide = this.$slides.eq( pos );
289
290			$('.zs-enabled .lte-zoompages .current').html(pos + 1);
291			$('.zs-enabled .lte-zs-slider-inner.visible').removeClass('visible');
292			$('.zs-enabled .lte-zs-slider-inner.lte-zs-slide-' + pos).addClass('visible');
293
294			if ( this.support ) {
295
296				this.switching = true;
297				$lastSlide.css('z-index', 1);
298				$nowSlide.addClass('active')
299					.css( this.transitionProp )
300						.css( { 'opacity': 1.0, 'transform': 'scale('+this.settings.initzoom+', '+this.settings.initzoom+')', 'z-index': 2 } )
301					.on( this.transEndEventName, function(e) {
302						if (e.originalEvent.propertyName == 'opacity') {
303							lastSlideBg = $lastSlide.css('background-image');
304							$lastSlide.removeClass('active')
305								.removeAttr('style')
306								.css('background-image', lastSlideBg);
307							$nowSlide.off( self.transEndEventName );
308							self.switching = false;
309							if ( self.pending != null ) {
310								setTimeout(function(){
311									var newPos = self.pending;
312									self.pending = null;
313									self.$bullets.eq(newPos).click();
314								}, 30)
315							}
316						}
317					});

318				
319			} else {
320				$lastSlide.removeClass('active');
321				$nowSlide.addClass('active');
322			}
323			this.$bullets.eq(this.pos).removeClass('active');
324			this.$bullets.eq(pos).addClass('active');
325			this.pos = pos;
326
327			if (this.settings.autoplay) {
328				this.play();
329			}
330		},
331		prev: function() {
332			var posPrev = this.pos - 1;
333			if (posPrev < 0) posPrev = this.numSlides - 1;
334			this.jump( posPrev );
335		},
336		next: function() {
337			var posNext = this.pos + 1;
338			if (posNext >= this.numSlides) posNext = 0;
339			this.jump( posNext );
340		},
341		play: function() {
342			// clear any existing timer
343			if (this.timer != null) {
344				clearInterval(this.timer);
345			}
346			var self = this;
347			this.settings.autoplay = true;
348			// add timer
349			this.timer = setInterval( function(){
350				self.next();
351			}, this.settings.interval );
352		},
353		stop: function() {
354			this.settings.autoplay = false;
355			clearInterval(this.timer);
356			this.timer = null;
357		}
358	});
359
360	// A really lightweight plugin wrapper around the constructor,
361	// preventing against multiple instantiations
362	$.fn[ pluginName ] = function ( options ) {
363		return this.each(function() {
364			if ( !$.data( this, "plugin_" + pluginName ) ) {
365				$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
366			}
367		});
368	};
369
370    var WidgetZoomsliderHandler = function ($scope, $) {
371
372		// auto create slideshow on [data-zs-enabled] instances.
373		var $instances = $('[data-zs-src]');
374		if ($instances.length > 0) {
375			$instances.each( function(index) {
376				var $this = $(this);
377				$this.zoomSlider();
378
379			});
380		}
381    };	
382
383    $(window).on('elementor/frontend/init', function () {
384
385        elementorFrontend.hooks.addAction('frontend/element_ready/lte-zoomslider.default', WidgetZoomsliderHandler);
386    });	
387
388})( jQuery, window, document );