https://jcomm.co.kr/vendor/circle-flip-slideshow/js/jquery.flipshow.js

1/**
2 * jquery.flipshow.js v1.0.0
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 *
8 * Copyright 2013, Codrops
9 * http://www.codrops.com
10 */
11;( function( $, window, undefined ) {
12
13	'use strict';
14
15	// ======================= imagesLoaded Plugin ===============================
16	// https://github.com/desandro/imagesloaded
17
18	// $('#my-container').imagesLoaded(myFunction)
19	// execute a callback when all images have loaded.
20	// needed because .load() doesn't work on cached images
21
22	// callback function gets image collection as argument
23	//  this is the container
24
25	// original: mit license. paul irish. 2010.
26	// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
27
28	// blank image data-uri bypasses webkit log warning (thx doug jones)
29	// blank image data-uri bypasses webkit log warning (thx doug jones)
30	var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
31
32	$.fn.imagesLoaded = function( callback ) {
33		var $this = this,
34			deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
35			hasNotify = $.isFunction(deferred.notify),
36			$images = $this.find('img').add( $this.filter('img') ),
37			loaded = [],
38			proper = [],
39			broken = [];
40
41		// Register deferred callbacks
42		if ($.isPlainObject(callback)) {
43			$.each(callback, function (key, value) {
44				if (key === 'callback') {
45					callback = value;
46				} else if (deferred) {
47					deferred[key](value);
48				}
49			});
50		}
51
52		function doneLoading() {
53			var $proper = $(proper),
54				$broken = $(broken);
55
56			if ( deferred ) {
57				if ( broken.length ) {
58					deferred.reject( $images, $proper, $broken );
59				} else {
60					deferred.resolve( $images );
61				}
62			}
63
64			if ( $.isFunction( callback ) ) {
65				callback.call( $this, $images, $proper, $broken );
66			}
67		}
68
69		function imgLoadedHandler( event ) {
70			imgLoaded( event.target, event.type === 'error' );
71		}
72
73		function imgLoaded( img, isBroken ) {
74			// don't proceed if BLANK image, or image is already loaded
75			if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
76				return;
77			}
78
79			// store element in loaded images array
80			loaded.push( img );
81
82			// keep track of broken and properly loaded images
83			if ( isBroken ) {
84				broken.push( img );
85			} else {
86				proper.push( img );
87			}
88
89			// cache image and its state for future calls
90			$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
91
92			// trigger deferred progress method if present
93			if ( hasNotify ) {
94				deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
95			}
96
97			// call doneLoading and clean listeners if all images are loaded
98			if ( $images.length === loaded.length ) {
99				setTimeout( doneLoading );
100				$images.unbind( '.imagesLoaded', imgLoadedHandler );
101			}
102		}
103
104		// if no images, trigger immediately
105		if ( !$images.length ) {
106			doneLoading();
107		} else {
108			$images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoadedHandler )
109			.each( function( i, el ) {
110				var src = el.src;
111
112				// find out if this image has been already checked for status
113				// if it was, and src has not changed, call imgLoaded on it
114				var cached = $.data( el, 'imagesLoaded' );
115				if ( cached && cached.src === src ) {
116					imgLoaded( el, cached.isBroken );
117					return;
118				}
119
120				// if complete is true and browser supports natural sizes, try
121				// to check for image status manually
122				if ( el.complete && el.naturalWidth !== undefined ) {
123					imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
124					return;
125				}
126
127				// cached images don't fire load sometimes, so we reset src, but only when
128				// dealing with IE, or image is complete (loaded) and failed manual check
129				// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
130				if ( el.readyState || el.complete ) {
131					el.src = BLANK;
132					el.src = src;
133				}
134			});
135		}
136
137		return deferred ? deferred.promise( $this ) : $this;
138	};
139
140	// global
141	var Modernizr = window.Modernizr;
142
143	$.Flipshow = function( options, element ) {
144		this.$el = $( element );
145		this._init( options );
146	};
147
148	// the options
149	$.Flipshow.defaults = {
150		// default transition speed (ms)
151		speed : 700,
152		// default transition easing
153		easing : 'ease-out'
154	};
155
156	$.Flipshow.prototype = {
157		_init : function( options ) {
158
159			// options
160			this.options = $.extend( true, {}, $.Flipshow.defaults, options );
161			// support for CSS Transitions & 3D transforms
162			this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && !(/MSIE (\d+\.\d+);/.test(navigator.userAgent));
163			// transition end event name and transform name
164			var transEndEventNames = {
165					'WebkitTransition' : 'webkitTransitionEnd',
166					'MozTransition' : 'transitionend',
167					'OTransition' : 'oTransitionEnd',
168					'msTransition' : 'MSTransitionEnd',
169					'transition' : 'transitionend'
170				},
171				transformNames = {
172					'WebkitTransform' : '-webkit-transform',
173					'MozTransform' : '-moz-transform',
174					'OTransform' : '-o-transform',
175					'msTransform' : '-ms-transform',
176					'transform' : 'transform'
177				};
178
179			if( this.support ) {
180				this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.cbpFWSlider';
181				this.transformName = transformNames[ Modernizr.prefixed( 'transform' ) ];
182			}
183			this.transitionProperties = this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing;
184
185			// the list of items
186			this.$listItems = this.$el.children( 'ul.fc-slides' );
187			// the items
188			this.$items = this.$listItems.children( 'li' ).hide();
189			// total number of items
190			this.itemsCount = this.$items.length;
191			// current item´s index
192			this.current = 0;
193			this.$listItems.imagesLoaded( $.proxy( function() {
194				// show first item
195				this.$items.eq( this.current ).show();
196				// add navigation and flipping structure
197				if( this.itemsCount > 0 ) {
198					this._addNav();
199					if( this.support ) {
200						this._layout();
201					}
202				}
203			}, this ) );
204
205		},
206		_addNav : function() {
207
208			var self = this,
209				$navLeft = $( '<div class="fc-left"><span></span><span></span><span></span><i class="fa fa-arrow-left"></i></div>' ),
210				$navRight = $( '<div class="fc-right"><span></span><span></span><span></span><i class="fa fa-arrow-right"></i></div>' );
211
212			$( '<nav></nav>' ).append( $navLeft, $navRight ).appendTo( this.$el );
213
214			$navLeft.find( 'span' ).on( 'click.flipshow touchstart.flipshow', function() {
215				self._navigate( $( this ), 'left' );
216			} );
217
218			$navRight.find( 'span' ).on( 'click.flipshow touchstart.flipshow', function() {
219				self._navigate( $( this ), 'right' );
220			} );
221
222		},
223		_layout : function( $current, $next ) {
224
225			this.$flipFront = $( '<div class="fc-front"><div></div></div>' );
226			this.$frontContent = this.$flipFront.children( 'div:first' );
227			this.$flipBack = $( '<div class="fc-back"><div></div></div>' );
228			this.$backContent = this.$flipBack.children( 'div:first' );
229			this.$flipEl = $( '<div class="fc-flip"></div>' ).append( this.$flipFront, this.$flipBack ).hide().appendTo( this.$el );
230
231		},
232		_navigate : function( $nav, dir ) {
233
234			if( this.isAnimating && this.support ) {
235				return false;

236			}
237			this.isAnimating = true;
238
239			var $currentItem = this.$items.eq( this.current ).hide();
240
241			if( dir === 'right' ) {
242				this.current < this.itemsCount - 1 ? ++this.current : this.current = 0;
243			}
244			else if( dir === 'left' ) {
245				this.current > 0 ? --this.current : this.current = this.itemsCount - 1;
246			}
247
248			var $nextItem = this.$items.eq( this.current );
249
250			if( this.support ) {
251				this._flip( $currentItem, $nextItem, dir, $nav.index() );
252			}
253			else {
254				$nextItem.show();
255			}
256
257		},
258		_flip : function( $currentItem, $nextItem, dir, angle ) {
259
260			var transformProperties = '',
261				// overlays
262				$overlayLight = $( '<div class="fc-overlay-light"></div>' ),
263				$overlayDark = $( '<div class="fc-overlay-dark"></div>' );
264
265			if(typeof this.$flipEl == 'undefined') {
266				return;
267			}
268
269			this.$flipEl.css( 'transition', this.transitionProperties );
270
271			this.$flipFront.find( 'div.fc-overlay-light, div.fc-overlay-dark' ).remove();
272			this.$flipBack.find( 'div.fc-overlay-light, div.fc-overlay-dark' ).remove();
273
274			if( dir === 'right' ) {
275				this.$flipFront.append( $overlayLight );
276				this.$flipBack.append( $overlayDark );
277				$overlayDark.css( 'opacity', 1 );
278			}
279			else if( dir === 'left' ) {
280				this.$flipFront.append( $overlayDark );
281				this.$flipBack.append( $overlayLight );
282				$overlayLight.css( 'opacity', 1 );
283			}
284			var overlayStyle = { transition : 'opacity ' + ( this.options.speed / 1.3 ) + 'ms' };
285			$overlayLight.css( overlayStyle );
286			$overlayDark.css( overlayStyle );
287
288			switch( angle ) {
289				case 0 :
290					transformProperties = dir === 'left' ? 'rotate3d(-1,1,0,-179deg) rotate3d(-1,1,0,-1deg)' : 'rotate3d(1,1,0,180deg)';
291					break;
292				case 1 :
293					transformProperties = dir === 'left' ? 'rotate3d(0,1,0,-179deg) rotate3d(0,1,0,-1deg)' : 'rotate3d(0,1,0,180deg)';
294					break;
295				case 2 :
296					transformProperties = dir === 'left' ? 'rotate3d(1,1,0,-179deg) rotate3d(1,1,0,-1deg)' : 'rotate3d(-1,1,0,179deg) rotate3d(-1,1,0,1deg)';
297					break;
298			}
299
300			this.$flipBack.css( 'transform', transformProperties );
301
302			this.$frontContent.empty().html( $currentItem.html() );
303			this.$backContent.empty().html( $nextItem.html() );
304			this.$flipEl.show();
305
306			var self = this;
307			setTimeout( function() {
308
309				self.$flipEl.css( 'transform', transformProperties );
310				$overlayLight.css( 'opacity', dir === 'right' ? 1 : 0 );
311				$overlayDark.css( 'opacity', dir === 'right' ? 0 : 1 );
312				self.$flipEl.on( self.transEndEventName, function( event ) {
313					if( event.target.className === 'fc-overlay-light' || event.target.className === 'fc-overlay-dark' ) return;
314					self._ontransitionend( $nextItem );
315				} );
316
317			}, 25 );
318
319		},
320		_ontransitionend : function( $nextItem ) {
321			$nextItem.show();
322			this.$flipEl.off( this.transEndEventName ).css( {
323				transition : 'none',
324				transform : 'none'
325			} ).hide();
326			this.isAnimating = false;
327		}
328	};
329
330	var logError = function( message ) {
331		if ( window.console ) {
332			window.console.error( message );
333		}
334	};
335
336	$.fn.flipshow = function( options ) {
337		if ( typeof options === 'string' ) {
338			var args = Array.prototype.slice.call( arguments, 1 );
339			this.each(function() {
340				var instance = $.data( this, 'flipshow' );
341				if ( !instance ) {
342					logError( "cannot call methods on flipshow prior to initialization; " +
343					"attempted to call method '" + options + "'" );
344					return;
345				}
346				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
347					logError( "no such method '" + options + "' for flipshow instance" );
348					return;
349				}
350				instance[ options ].apply( instance, args );
351			});
352		}
353		else {
354			this.each(function() {
355				var instance = $.data( this, 'flipshow' );
356				if ( instance ) {
357					instance._init();
358				}
359				else {
360					instance = $.data( this, 'flipshow', new $.Flipshow( options, this ) );
361				}
362			});
363		}
364		return this;
365	};
366
367} )( jQuery, window );