https://www.meigetsuso.co.jp/js/dist/jquery.zoomslider.js

1/*
2 *  zoomSlider - v0.2.3
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 ) {
10setTimeout(function(){
11	var pluginName = "zoomSlider",
12		defaults = {
13			src: null,
14			speed: 8000,
15			switchSpeed: 800,
16			interval: 4500,
17			autoplay: true,
18			bullets: true,
19			overlay: 'plain' // false, plain, dots
20		};
21
22	// The actual plugin constructor
23	function Plugin ( element, options ) {
24		this.element = element;
25		this.$el = $(element);
26		this._defaults = defaults;
27		this._name = pluginName;
28
29		var elData = this.$el.data();
30		var elDataObj = {};
31		for (var key in elData) {
32			if ( elData.hasOwnProperty(key) ) {
33				if ( key.match(/zs[A-Z]/) ) {
34					var keyName = key.substr(2);
35					keyName = keyName.charAt(0).toLowerCase() + keyName.slice(1);
36					elDataObj[keyName] = elData[key]
37				}
38			}
39		}
40		this.settings = $.extend( {}, defaults, elDataObj, options );
41
42		if ( this.settings.src == null || this.settings.src.length < 1 ) {
43			console.log('ZoomSlider terminated - invalid input.');
44			return;
45		}
46		this.init();
47	}
48
49	// Avoid Plugin.prototype conflicts
50	$.extend(Plugin.prototype, {
51		init: function () {
52			// Place initialization logic here
53			// You already have access to the DOM element and
54			// the options via the instance, e.g. this.element
55			// and this.settings
56			// you can add more functions like the one below and
57			// call them like so: this.yourOtherFunction(this.element, this.settings).
58			
59			// make sure src is an Array
60			if ($.isArray(this.settings.src) == false) {
61				this.settings.src = [this.settings.src];
62			}
63
64			// https://github.com/twitter/bootstrap/issues/2870
65			this.transEndEventNames = {
66				'WebkitTransition' : 'webkitTransitionEnd',
67				'MozTransition' : 'transitionend',
68				'OTransition' : 'oTransitionEnd',
69				'msTransition' : 'MSTransitionEnd',
70				'transition' : 'transitionend'
71			};
72			this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
73
74			// suport for css transforms and css transitions
75			this.support = Modernizr.csstransitions && Modernizr.csstransforms;
76
77			// set inline CSS3 transition properties
78			var transformPrefixed = Modernizr.prefixed('transform');
79			transformPrefixed = transformPrefixed.replace(/([A-Z])/g, function(transformPrefixed,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
80			this.transitionProp = { 
81				'transition': transformPrefixed+' '+this.settings.speed+'ms ease-out, opacity '+this.settings.switchSpeed+'ms'
82			};
83
84			this.numSlides = this.settings.src.length;
85
86			// make sure the container is not [position: static]
87			switch(this.$el.css('position')) {
88				case 'relative':
89				case 'absolute':
90				case 'fixed':
91					break;
92				default:
93					this.$el.css('position', 'relative');
94					break;
95			}
96
97			// make sure the first image has been loaded.
98			var self = this;
99			var $img = $('<img />');
100			$img.load( function() {
101				if (self.numSlides == 1) {
102					self.initSingle();
103				} else {
104					self.initSlideshow();
105				}
106			});
107			$img.attr('src', this.settings.src[0]);
108		},
109		initSlideshow: function () {
110			var self = this;
111			var $slideshow = $('<div class="zs-slideshow"></div>'),
112				$slidesWrap = $('<div class="zs-slides"></div>'),
113				$bulletsWrap = $('<div class="zs-bullets"></div>');
114
115			for (i = 0; i < this.numSlides; i++) {
116				var $slide = $('<div class="zs-slide zs-slide-' + i + '"></div>');
117				$slide.css({ 'background-image': "url('" + this.settings.src[i] + "')" }).appendTo( $slidesWrap );
118
119				var $bullet = $('<div class="zs-bullet zs-bullet-' + i + '"></div>')
120				$bullet.appendTo( $bulletsWrap );
121
122				if (i == 0) {
123					$slide.addClass('active').css('opacity', 1);
124					$bullet.addClass('active');
125				}
126			}
127
128			self._promoteChildren();
129
130			$slideshow.append( $slidesWrap ).prependTo( this.$el );
131			if ( this.settings.bullets == true ) {
132				$slideshow.append( $bulletsWrap );
133				$slideshow.on('click', '.zs-bullet', function(e){
134					self.jump( $(this).index() );
135				});
136			}
137
138			this.pos = 0;
139			this.pending = null;
140			this.switching = false;

141			this.$slideshow = $slideshow;
142			this.$slides = $slidesWrap.children( '.zs-slide' );
143			this.$bullets = $bulletsWrap.children( '.zs-bullet' );
144			this.$el.addClass('zs-enabled');
145
146			if (this.settings.overlay == 'dots') {
147				this.$el.addClass('overlay-dots');
148			} else if (this.settings.overlay == 'plain') {
149				this.$el.addClass('overlay-plain')
150			}
151
152			if (this.support) {
153				var $firstSlide = this.$slides.eq(0);
154				$firstSlide.css('opacity', 0).css( this.transitionProp );
155				setTimeout(function(){
156					$firstSlide.css( { 'opacity': 1.0, 'transform': 'scale(1.0, 1.0)', 'z-index': 2 } );
157				}, 50);
158			}
159
160			if (this.settings.autoplay == true) {
161				this.play();
162			}
163		},
164		initSingle: function() {
165			var self = this;
166			var $slideshow = $('<div class="zs-slideshow"></div>'),
167				$slidesWrap = $('<div class="zs-slides"></div>'),
168				$slide = $('<div class="zs-slide zs-slide-0"></div>');
169
170			$slide.css({ 'background-image': "url('" + this.settings.src[0] + "')" }).appendTo( $slidesWrap );
171			$slide.addClass('active').css('opacity', 1);
172
173			self._promoteChildren();
174
175			$slideshow.append( $slidesWrap ).prependTo( this.$el );
176			this.$el.addClass('zs-enabled');
177
178			if (this.settings.overlay == 'dots') {
179				this.$el.addClass('overlay-dots');
180			} else if (this.settings.overlay == 'plain') {
181				this.$el.addClass('overlay-plain')
182			}
183
184			if (this.support) {
185				$slide.css('opacity', 0).css( this.transitionProp );
186				setTimeout(function(){
187					$slide.css( { 'opacity': 1.0, 'transform': 'scale(1.0, 1.0)', 'z-index': 2 } );
188				}, 50);
189			}
190		},
191		_promoteChildren: function() {
192			// make sure every children have high enough z-index
193			this.$el.children().each(function(index){
194				$this = $(this);
195				if ($this.css('z-index') == 'auto') {
196					$this.css('z-index', 2);
197				}
198				if ($this.css('position') == 'static') {
199					$this.css('position', 'relative');
200				}
201			});
202		},
203		jump: function( pos ) {
204			if ( pos >= this.numSlides ) {
205				console.log('ZoomSlider: jump(pos) aborted. supplied index out of range.');
206				return;
207			}
208
209			if ( this.pos == pos ) return;
210
211			if ( this.switching ) {
212				this.pending = pos;
213				return;
214			}
215
216			var self = this;
217			var $lastSlide = this.$slides.eq( this.pos );
218			var $nowSlide = this.$slides.eq( pos );
219
220			if ( this.support ) {
221				this.switching = true;
222				$lastSlide.css('z-index', 1);
223				$nowSlide.addClass('active')
224					.css( this.transitionProp )
225					.css( { 'opacity': 1.0, 'transform': 'scale(1.0, 1.0)', 'z-index': 2 } )
226					.on( this.transEndEventName, function(e) {
227						if (e.originalEvent.propertyName == 'opacity') {
228							lastSlideBg = $lastSlide.css('background-image');
229							$lastSlide.removeClass('active')
230								.removeAttr('style')
231								.css('background-image', lastSlideBg);
232							$nowSlide.off( self.transEndEventName );
233							self.switching = false;
234							if ( self.pending != null ) {
235								setTimeout(function(){
236									var newPos = self.pending;
237									self.pending = null;
238									self.$bullets.eq(newPos).click();
239								}, 30)
240							}
241						}
242					});
243			} else {
244				$lastSlide.removeClass('active');
245				$nowSlide.addClass('active');
246			}
247			this.$bullets.eq(this.pos).removeClass('active');
248			this.$bullets.eq(pos).addClass('active');
249			this.pos = pos;
250
251			if (this.settings.autoplay) {
252				this.play();
253			}
254		},
255		prev: function() {
256			var posPrev = this.pos - 1;
257			if (posPrev < 0) posPrev = this.numSlides - 1;
258			this.jump( posPrev );
259		},
260		next: function() {
261			var posNext = this.pos + 1;
262			if (posNext >= this.numSlides) posNext = 0;
263			this.jump( posNext );
264		},
265		play: function() {
266			// clear any existing timer
267			if (this.timer != null) {
268				clearInterval(this.timer);
269			}
270			var self = this;
271			this.settings.autoplay = true;
272			// add timer
273			this.timer = setInterval( function(){
274				self.next();
275			}, this.settings.interval );
276		},
277		stop: function() {
278			this.settings.autoplay = false;
279			clearInterval(this.timer);
280			this.timer = null;
281		}
282	});
283
284	// A really lightweight plugin wrapper around the constructor,
285	// preventing against multiple instantiations
286	$.fn[ pluginName ] = function ( options ) {
287		return this.each(function() {
288			if ( !$.data( this, "plugin_" + pluginName ) ) {
289				$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
290			}
291		});
292	};
293
294	// auto create slideshow on [data-zs-enabled] instances.
295	var $instances = $('[data-zs-src]');
296	if ($instances.length > 0) {
297		$instances.each( function(index) {
298			var $this = $(this);
299			$this.zoomSlider();
300		});
301	}
302},4200);
303})( jQuery, window, document );