https://www.happyhair.sk/js/jquery.slideshow.js

1(function( window, $, undefined ) {
2	
3	$.Slideshow 				= function( options, element ) {
4	
5		this.$el			= $( element );
6		
7		this.$preloader		= $('<div class="cn-loading">Loading...</div>');
8		
9		// images
10		this.$images		= this.$el.find('div.cn-images > img').hide();
11		
12		// total number of images
13		this.imgCount		= this.$images.length;
14		
15		this.isAnimating	= false;
16		
17		this._init( options );
18		
19	};
20	
21	$.Slideshow.defaults 		= {
22		current			: 0
23    };
24	
25	$.Slideshow.prototype 		= {
26		_init 				: function( options ) {
27			
28			this.options 		= $.extend( true, {}, $.Slideshow.defaults, options );
29			
30			// validate options
31			this._validate();
32			
33			this.current		= this.options.current;
34			
35			this.$preloader.appendTo( this.$el );
36			
37			var instance		= this; 
38			
39			this._preloadImages( function() {
40				
41				instance.$preloader.hide();
42				
43				instance.$images.eq( instance.current ).show();
44			
45				instance.bar	= new $.NavigationBar( instance.imgCount, instance._getStatus() );
46				
47				instance.bar.getElement().appendTo( instance.$el );
48				
49				instance._initEvents();
50			
51			});
52			
53		},
54		_preloadImages		: function( callback ) {
55			
56			var loaded	= 0, instance = this;
57			
58			this.$images.each( function(i) {
59			
60				var $img	= $(this);
61					
62				// large image
63				$('<img/>').load( function() {
64					++loaded;
65					if( loaded === instance.imgCount * 2 ) callback.call();
66					
67				}).attr( 'src', $img.attr('src') );
68				// thumb
69				$('<img/>').load( function() {
70					++loaded;
71					if( loaded === instance.imgCount * 2 ) callback.call();
72					
73				}).attr( 'src', $img.data('thumb') );
74				
75			
76			});
77			
78		},
79		_validate			: function() {
80		
81			if( this.options.current < 0 || this.options.current >= this.imgCount )
82				this.options.current = 0;
83		
84		},
85		_getStatus			: function() {
86			
87			var $currentImg	= this.$images.eq( this.current ), $nextImg, $prevImg;
88			
89			( this.current === 0 ) ? $prevImg = this.$images.eq( this.imgCount - 1 ) : $prevImg = $currentImg.prev();
90			( this.current === this.imgCount - 1 ) ? $nextImg = this.$images.eq( 0 ) : $nextImg = $currentImg.next();
91			var newfoto = $currentImg.data('foto');
92			
93			$('.new-makeup').css('background-image','url(//happyhair.sk/img/2015/looks/'+newfoto+'.png)');
94			$('.new-hair').css('background-image','url(//ucesy-sk.happyhair.sk/hair_images/b/'+newfoto+'.png)');
95			return {
96				prevSource		: $prevImg.data( 'thumb' ),
97				nextSource		: $nextImg.data( 'thumb' ),
98				prevTitle		: $prevImg.attr( 'title' ),
99				currentTitle	: $currentImg.attr( 'title' ),
100				nextTitle		: $nextImg.attr( 'title' )
101			};
102			
103		},
104		_initEvents			: function() {
105			
106			var instance	= this;
107			
108			this.bar.$navPrev.bind('click.slideshow', function( event ) {
109				
110				instance._navigate( 'prev' );
111				return false;
112				
113			});
114			
115			this.bar.$navNext.bind('click.slideshow', function( event ) {
116				
117				instance._navigate( 'next' );
118				return false;
119				
120			});
121			
122		},
123		_navigate			: function( dir ) {
124			
125			if( this.isAnimating ) return false;
126			
127			this.isAnimating	= true;
128			
129			var $curr			= this.$images.eq( this.current ).css( 'z-index' , 998 ),
130				instance		= this;
131			
132			( dir === 'prev') 
133				? ( this.current === 0 ) ? this.current = this.imgCount - 1 : --this.current
134				: ( this.current === this.imgCount - 1 ) ? this.current = 0 : ++this.current;
135			
136			this.$images.eq( this.current ).show();
137			
138			$curr.fadeOut( 400, function() {
139			
140				$(this).css( 'z-index' , 1 );
141				instance.isAnimating	= false;
142			
143			});
144			
145			this.bar.set( this._getStatus() );
146		}
147	};
148	
149	$.NavigationBar				= function( imgCount, status ) {
150	
151		this._init( imgCount, status );
152		
153	};
154	
155	$.NavigationBar.prototype 	= {
156	
157		_init 				: function( imgCount, status ) {
158			
159			this.$el 			= $('#barTmpl').tmpl( status );
160			
161			// navigation
162			this.$navPrev		= this.$el.find('a.cn-nav-prev');
163			this.$thumbPrev		= this.$navPrev.children('div');
164			
165			this.$navNext		= this.$el.find('a.cn-nav-next');

166			this.$thumbNext		= this.$navNext.children('div');
167			
168			// navigation status
169			this.$statusPrev	= this.$el.find('div.cn-nav-content-prev > h3');
170			this.$statusCurrent	= this.$el.find('div.cn-nav-content-current > h2');
171			this.$statusNext	= this.$el.find('div.cn-nav-content-next > h3');
172			
173			// just show current image description if only one image
174			if( imgCount <= 1) {
175			
176				this.$navPrev.hide();
177				this.$navNext.hide();
178				this.$statusPrev.parent().hide();
179				this.$statusNext.parent().hide();
180				
181			}
182			
183		},
184		getElement			: function() {
185		
186			return this.$el;
187		
188		},
189		// set the current, previous and next descriptions, and also the previous and next thumbs
190		set					: function( status ) {
191			
192			this.$thumbPrev.css( 'background-image', 'url(' + status.prevSource + ')' );
193			this.$thumbNext.css( 'background-image', 'url(' + status.nextSource + ')' );
194			this.$statusPrev.text( status.prevTitle );
195			this.$statusCurrent.text( status.currentTitle );
196			this.$statusNext.text( status.nextTitle );
197			
198		}
199	
200	};
201	
202	var logError 				= function( message ) {
203		
204		if ( this.console ) {
205			
206			console.error( message );
207			
208		}
209		
210	};
211	
212	$.fn.slideshow 				= function( options ) {
213	
214		if ( typeof options === 'string' ) {
215		
216			var args = Array.prototype.slice.call( arguments, 1 );
217
218			this.each(function() {
219			
220				var instance = $.data( this, 'slideshow' );
221				
222				if ( !instance ) {
223					logError( "cannot call methods on slideshow prior to initialization; " +
224					"attempted to call method '" + options + "'" );
225					return;
226				}
227				
228				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
229					logError( "no such method '" + options + "' for slideshow instance" );
230					return;
231				}
232				
233				instance[ options ].apply( instance, args );
234			
235			});
236		
237		} 
238		else {
239		
240			this.each(function() {
241				var instance = $.data( this, 'slideshow' );
242				if ( !instance ) {
243					$.data( this, 'slideshow', new $.Slideshow( options, this ) );
244				}
245			});
246		
247		}
248		
249		return this;
250		
251	};
252	
253})( window, jQuery );