Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * jquery.flipshow.js v1.0.0
- * http://www.codrops.com
- *
- * Licensed under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Copyright 2013, Codrops
- * http://www.codrops.com
- */
- ;( function( $, window, undefined ) {
- 'use strict';
- // ======================= imagesLoaded Plugin ===============================
- // https://github.com/desandro/imagesloaded
- // $('#my-container').imagesLoaded(myFunction)
- // execute a callback when all images have loaded.
- // needed because .load() doesn't work on cached images
- // callback function gets image collection as argument
- // this is the container
- // original: mit license. paul irish. 2010.
- // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
- // blank image data-uri bypasses webkit log warning (thx doug jones)
- // blank image data-uri bypasses webkit log warning (thx doug jones)
- var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
- $.fn.imagesLoaded = function( callback ) {
- var $this = this,
- deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
- hasNotify = $.isFunction(deferred.notify),
- $images = $this.find('img').add( $this.filter('img') ),
- loaded = [],
- proper = [],
- broken = [];
- // Register deferred callbacks
- if ($.isPlainObject(callback)) {
- $.each(callback, function (key, value) {
- if (key === 'callback') {
- callback = value;
- } else if (deferred) {
- deferred[key](value);
- }
- });
- }
- function doneLoading() {
- var $proper = $(proper),
- $broken = $(broken);
- if ( deferred ) {
- if ( broken.length ) {
- deferred.reject( $images, $proper, $broken );
- } else {
- deferred.resolve( $images );
- }
- }
- if ( $.isFunction( callback ) ) {
- callback.call( $this, $images, $proper, $broken );
- }
- }
- function imgLoadedHandler( event ) {
- imgLoaded( event.target, event.type === 'error' );
- }
- function imgLoaded( img, isBroken ) {
- // don't proceed if BLANK image, or image is already loaded
- if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
- return;
- }
- // store element in loaded images array
- loaded.push( img );
- // keep track of broken and properly loaded images
- if ( isBroken ) {
- broken.push( img );
- } else {
- proper.push( img );
- }
- // cache image and its state for future calls
- $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
- // trigger deferred progress method if present
- if ( hasNotify ) {
- deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
- }
- // call doneLoading and clean listeners if all images are loaded
- if ( $images.length === loaded.length ) {
- setTimeout( doneLoading );
- $images.unbind( '.imagesLoaded', imgLoadedHandler );
- }
- }
- // if no images, trigger immediately
- if ( !$images.length ) {
- doneLoading();
- } else {
- $images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoadedHandler )
- .each( function( i, el ) {
- var src = el.src;
- // find out if this image has been already checked for status
- // if it was, and src has not changed, call imgLoaded on it
- var cached = $.data( el, 'imagesLoaded' );
- if ( cached && cached.src === src ) {
- imgLoaded( el, cached.isBroken );
- return;
- }
- // if complete is true and browser supports natural sizes, try
- // to check for image status manually
- if ( el.complete && el.naturalWidth !== undefined ) {
- imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
- return;
- }
- // cached images don't fire load sometimes, so we reset src, but only when
- // dealing with IE, or image is complete (loaded) and failed manual check
- // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
- if ( el.readyState || el.complete ) {
- el.src = BLANK;
- el.src = src;
- }
- });
- }
- return deferred ? deferred.promise( $this ) : $this;
- };
- // global
- var Modernizr = window.Modernizr;
- $.Flipshow = function( options, element ) {
- this.$el = $( element );
- this._init( options );
- };
- // the options
- $.Flipshow.defaults = {
- // default transition speed (ms)
- speed : 700,
- // default transition easing
- easing : 'cubic-bezier(.29,1.44,.86,1.06)'
- };
- $.Flipshow.prototype = {
- _init : function( options ) {
- // options
- this.options = $.extend( true, {}, $.Flipshow.defaults, options );
- // support for CSS Transitions & 3D transforms
- this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
- // transition end event name and transform name
- var transProperties = {
- 'WebkitTransition' : { transitionEndEvent : 'webkitTransitionEnd', transformName : '-webkit-transform' },
- 'MozTransition' : { transitionEndEvent : 'transitionend', transformName : '-moz-transform' },
- 'OTransition' : { transitionEndEvent : 'oTransitionEnd', transformName : '-o-transform' },
- 'msTransition' : { transitionEndEvent : 'MSTransitionEnd', transformName : '-ms-transform' },
- 'transition' : { transitionEndEvent : 'transitionend', transformName : 'transform' }
- };
- if( this.support ) {
- this.transEndEventName = transProperties[ Modernizr.prefixed( 'transition' ) ].transitionEndEvent + '.flipshow';
- this.transformName = transProperties[ Modernizr.prefixed( 'transition' ) ].transformName;
- }
- this.transitionProperties = this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing;
- // the list of items
- this.$listItems = this.$el.children( 'ul.fc-slides' );
- // the items
- this.$items = this.$listItems.children( 'li' ).hide();
- // total number of items
- this.itemsCount = this.$items.length;
- // current item´s index
- this.current = 0;
- this.$listItems.imagesLoaded( $.proxy( function() {
- // show first item
- this.$items.eq( this.current ).show();
- // add navigation and flipping structure
- if( this.itemsCount > 0 ) {
- this._addNav();
- if( this.support ) {
- this._layout();
- }
- }
- }, this ) );
- },
- _addNav : function() {
- var self = this,
- $navLeft = $( '<div class="fc-left"><span></span><span></span><span></span><i class="icon-arrow-left"><img src="images/left_arrow.png"/></i></div>' ),
- $navRight = $( '<div class="fc-right"><span></span><span></span><span></span><i class="icon-arrow-right"><img src="images/right_arrow.png"/></i></div>' );
- $( '<nav></nav>' ).append( $navLeft, $navRight ).appendTo( this.$el );
- $navLeft.find( 'span' ).on( 'click.flipshow touchstart.flipshow', function() {
- self._navigate( $( this ), 'left' );
- } );
- $navRight.find( 'span' ).on( 'click.flipshow touchstart.flipshow', function() {
- self._navigate( $( this ), 'right' );
- } );
- },
- _layout : function( $current, $next ) {
- this.$flipFront = $( '<div class="fc-front"><div></div></div>' );
- this.$frontContent = this.$flipFront.children( 'div:first' );
- this.$flipBack = $( '<div class="fc-back"><div></div></div>' );
- this.$backContent = this.$flipBack.children( 'div:first' );
- this.$flipEl = $( '<div class="fc-flip"></div>' ).append( this.$flipFront, this.$flipBack ).hide().appendTo( this.$el );
- },
- _navigate : function( $nav, dir ) {
- if( this.isAnimating && this.support ) {
- return false;
- }
- this.isAnimating = true;
- var $currentItem = this.$items.eq( this.current ).hide();
- if( dir === 'right' ) {
- this.current < this.itemsCount - 1 ? ++this.current : this.current = 0;
- }
- else if( dir === 'left' ) {
- this.current > 0 ? --this.current : this.current = this.itemsCount - 1;
- }
- var $nextItem = this.$items.eq( this.current );
- if( this.support ) {
- this._flip( $currentItem, $nextItem, dir, $nav.index() );
- }
- else {
- $nextItem.show();
- }
- },
- _flip : function( $currentItem, $nextItem, dir, angle ) {
- var transformProperties = '',
- // overlays
- $overlayLight = $( '<div class="fc-overlay-light"></div>' ),
- $overlayDark = $( '<div class="fc-overlay-dark"></div>' );
- this.$flipEl.css( 'transition', this.transitionProperties );
- this.$flipFront.find( 'div.fc-overlay-light, div.fc-overlay-dark' ).remove();
- this.$flipBack.find( 'div.fc-overlay-light, div.fc-overlay-dark' ).remove();
- if( dir === 'right' ) {
- this.$flipFront.append( $overlayLight );
- this.$flipBack.append( $overlayDark );
- $overlayDark.css( 'opacity', 1 );
- }
- else if( dir === 'left' ) {
- this.$flipFront.append( $overlayDark );
- this.$flipBack.append( $overlayLight );
- $overlayLight.css( 'opacity', 1 );
- }
- var overlayStyle = { transition : 'opacity ' + ( this.options.speed / 1.3 ) + 'ms' };
- $overlayLight.css( overlayStyle );
- $overlayDark.css( overlayStyle );
- switch( angle ) {
- case 0 :
- transformProperties = dir === 'left' ? 'rotate3d(-1,1,0,-179deg) rotate3d(-1,1,0,-1deg)' : 'rotate3d(1,1,0,180deg)';
- break;
- case 1 :
- transformProperties = dir === 'left' ? 'rotate3d(0,1,0,-179deg) rotate3d(0,1,0,-1deg)' : 'rotate3d(0,1,0,180deg)';
- break;
- case 2 :
- transformProperties = dir === 'left' ? 'rotate3d(1,1,0,-179deg) rotate3d(1,1,0,-1deg)' : 'rotate3d(-1,1,0,179deg) rotate3d(-1,1,0,1deg)';
- break;
- }
- this.$flipBack.css( 'transform', transformProperties );
- this.$frontContent.empty().html( $currentItem.html() );
- this.$backContent.empty().html( $nextItem.html() );
- this.$flipEl.show();
- var self = this;
- setTimeout( function() {
- self.$flipEl.css( 'transform', transformProperties );
- $overlayLight.css( 'opacity', dir === 'right' ? 1 : 0 );
- $overlayDark.css( 'opacity', dir === 'right' ? 0 : 1 );
- self.$flipEl.on( self.transEndEventName, function( event ) {
- if( event.target.className === 'fc-overlay-light' || event.target.className === 'fc-overlay-dark' ) return;
- self._ontransitionend( $nextItem );
- } );
- }, 25 );
- },
- _ontransitionend : function( $nextItem ) {
- $nextItem.show();
- this.$flipEl.off( this.transEndEventName ).css( {
- transition : 'none',
- transform : 'none'
- } ).hide();
- this.isAnimating = false;
- }
- };
- var logError = function( message ) {
- if ( window.console ) {
- window.console.error( message );
- }
- };
- $.fn.flipshow = function( options ) {
- if ( typeof options === 'string' ) {
- var args = Array.prototype.slice.call( arguments, 1 );
- this.each(function() {
- var instance = $.data( this, 'flipshow' );
- if ( !instance ) {
- logError( "cannot call methods on flipshow prior to initialization; " +
- "attempted to call method '" + options + "'" );
- return;
- }
- if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
- logError( "no such method '" + options + "' for flipshow instance" );
- return;
- }
- instance[ options ].apply( instance, args );
- });
- }
- else {
- this.each(function() {
- var instance = $.data( this, 'flipshow' );
- if ( instance ) {
- instance._init();
- }
- else {
- instance = $.data( this, 'flipshow', new $.Flipshow( options, this ) );
- }
- });
- }
- return this;
- };
- } )( jQuery, window );
Add Comment
Please, Sign In to add comment