├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── bg.jpg ├── Thumbs.db ├── arrow.png └── shadow.png ├── css ├── noscript.css ├── demo.css ├── style.css └── normalize.css ├── ReadMe.txt ├── README.md ├── index.html └── js ├── modernizr.custom.26887.js └── jquery.imgslider.js /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/5.jpg -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/bg.jpg -------------------------------------------------------------------------------- /images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/Thumbs.db -------------------------------------------------------------------------------- /images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/arrow.png -------------------------------------------------------------------------------- /images/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TriplePanelImageSlider/HEAD/images/shadow.png -------------------------------------------------------------------------------- /css/noscript.css: -------------------------------------------------------------------------------- 1 | .fs-slider figure{ 2 | margin: 0 auto; 3 | text-align: center; 4 | padding: 0 0 20px; 5 | } -------------------------------------------------------------------------------- /ReadMe.txt: -------------------------------------------------------------------------------- 1 | Created by Codrops 2 | License (if not mentioned otherwise in the files): http://tympanus.net/codrops/licensing/ 3 | 4 | Background Pattern(s) from http://subtlepatterns.com/ 5 | http://creativecommons.org/licenses/by-sa/3.0/deed.en_US 6 | 7 | normalize.css by Nicolas Gallagher: http://github.com/necolas/normalize.css 8 | 9 | Images by geishaboy500 10 | http://www.flickr.com/photos/geishaboy500/ 11 | http://creativecommons.org/licenses/by/2.0/deed.en 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Triple Panel Image Slider 2 | ========= 3 | 4 | A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=10453) 7 | 8 | [Demo](http://tympanus.net/Tutorials/TriplePanelImageSlider/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | [© Codrops 2014](http://www.codrops.com) -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url('normalize.css'); 2 | 3 | /* General Demo Style */ 4 | body{ 5 | font-family: 'Open Sans Condensed','Arial Narrow', serif; 6 | background: #dbe3e2 url(../images/bg.jpg) fixed no-repeat top center; 7 | font-weight: 400; 8 | font-size: 15px; 9 | color: #333; 10 | -webkit-font-smoothing: antialiased; 11 | overflow-y: scroll; 12 | overflow-x: hidden; 13 | } 14 | a{ 15 | color: #555; 16 | text-decoration: none; 17 | } 18 | .container{ 19 | width: 100%; 20 | position: relative; 21 | } 22 | .clr{ 23 | clear: both; 24 | padding: 0; 25 | height: 0; 26 | margin: 0; 27 | } 28 | .main{ 29 | width: 90%; 30 | margin: 0 auto; 31 | position: relative; 32 | } 33 | .container > header{ 34 | margin: 10px; 35 | padding: 20px 10px 10px 10px; 36 | position: relative; 37 | display: block; 38 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 39 | text-align: center; 40 | } 41 | .container > header h1{ 42 | font-size: 34px; 43 | line-height: 34px; 44 | margin: 0; 45 | position: relative; 46 | font-weight: 300; 47 | color: #666; 48 | text-shadow: 1px 1px 1px rgba(255,255,255,0.9); 49 | } 50 | .container > header h2{ 51 | font-size: 14px; 52 | font-weight: 300; 53 | margin: 0; 54 | padding: 15px 0 5px 0; 55 | color: #888; 56 | font-family: Cambria, Georgia, serif; 57 | font-style: italic; 58 | text-shadow: 1px 1px 1px rgba(255,255,255,0.9); 59 | } 60 | /* Header Style */ 61 | .codrops-top{ 62 | line-height: 24px; 63 | font-size: 11px; 64 | background: #fff; 65 | background: rgba(255, 255, 255, 0.3); 66 | text-transform: uppercase; 67 | z-index: 9999; 68 | position: relative; 69 | font-family: Cambria, Georgia, serif; 70 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 71 | } 72 | .codrops-top a{ 73 | padding: 0px 10px; 74 | letter-spacing: 1px; 75 | color: #333; 76 | display: inline-block; 77 | } 78 | .codrops-top a:hover{ 79 | background: rgba(255,255,255,0.6); 80 | } 81 | .codrops-top span.right{ 82 | float: right; 83 | } 84 | .codrops-top span.right a{ 85 | float: left; 86 | display: block; 87 | } 88 | 89 | .support-note span{ 90 | color: #ac375d; 91 | font-size: 16px; 92 | display: none; 93 | font-weight: bold; 94 | text-align: center; 95 | padding: 5px 0; 96 | } 97 | .no-cssanimations .support-note span.no-cssanimations, 98 | .no-csstransforms .support-note span.no-csstransforms, 99 | .no-csstransforms3d .support-note span.no-csstransforms3d, 100 | .no-csstransitions .support-note span.no-csstransitions, 101 | .no-generatedcontent .support-note span.no-generatedcontent{ 102 | display: block; 103 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Triple Panel Image Slider with jQuery and CSS3 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | « Previous Demo: Circle Hover Effects 28 | 29 | 30 | Images by geishaboy500 31 | 32 | Back to the Codrops Article 33 | 34 | 35 |
36 |
37 | 38 |
39 | 40 |

Triple Panel Image Slider

41 |

A jQuery image slider with three panels and 3D look

42 | 43 |
44 | CSS animations are not supported in your browser 45 | CSS transforms are not supported in your browser 46 | CSS 3D transforms are not supported in your browser 47 | CSS transitions are not supported in your browser 48 | CSS Generated Content is not supported in your browser 49 | Sorry, only modern browsers. 50 |
51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 |
59 | image01 60 |
61 |

Eloquence

62 |

American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic.

63 |
64 |
65 | 66 |
67 | image02 68 |
69 |

Quintessential

70 |

Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag.

71 |
72 |
73 | 74 |
75 | image03 76 |
77 |

Surreptitious

78 |

Truffaut iphone flexitarian, banh mi thundercats cliche wolf biodiesel gastropub.

79 |
80 |
81 | 82 |
83 | image04 84 |
85 |

Imbroglio

86 |

Scenester fixie pickled, shoreditch fugiat enim craft beer retro mustache.

87 |
88 |
89 | 90 |
91 | image05 92 |
93 |

Lissome

94 |

Aute sunt aliqua do sapiente. Food truck ut sustainable thundercats four loko.

95 |
96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 | 105 | 112 | 113 | -------------------------------------------------------------------------------- /js/modernizr.custom.26887.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-generatedcontent-csstransforms-csstransforms3d-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function A(a){j.cssText=a}function B(a,b){return A(n.join(a+";")+(b||""))}function C(a,b){return typeof a===b}function D(a,b){return!!~(""+a).indexOf(b)}function E(a,b){for(var d in a){var e=a[d];if(!D(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function F(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:C(f,"function")?f.bind(d||b):f}return!1}function G(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return C(b,"string")||C(b,"undefined")?E(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),F(e,b,c))}var d="2.6.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={},s={},t={},u=[],v=u.slice,w,x=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["­",'"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},y={}.hasOwnProperty,z;!C(y,"undefined")&&!C(y.call,"undefined")?z=function(a,b){return y.call(a,b)}:z=function(a,b){return b in a&&C(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=v.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e}),r.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:x(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},r.csstransforms=function(){return!!G("transform")},r.csstransforms3d=function(){var a=!!G("perspective");return a&&"webkitPerspective"in g.style&&x("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},r.csstransitions=function(){return G("transition")},r.generatedcontent=function(){var a;return x(['#modernizr:after{content:"',l,'";visibility:hidden}'].join(""),function(b){a=b.offsetHeight>=1}),a};for(var H in r)z(r,H)&&(w=H.toLowerCase(),e[w]=r[H](),u.push((e[w]?"":"no-")+w));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)z(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},A(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.testProp=function(a){return E([a])},e.testAllProps=G,e.testStyles=x,e.prefixed=function(a,b,c){return b?G(a,b,c):G(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+u.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f' ).hide(); 235 | 236 | this.$initElems 237 | .filter( ':lt(3)' ) 238 | .clone() 239 | .show() 240 | .prependTo( this.$el ) 241 | .wrap( '
' ); 242 | 243 | this.$el 244 | .wrap( '
' ) 245 | .wrap( '
' ); 246 | 247 | this.$blocks = this.$el.children( 'div.fs-block' ); 248 | 249 | // cache the 3 main blocks 250 | this.$blockL = this.$blocks.eq( 0 ); 251 | this.$blockC = this.$blocks.eq( 1 ); 252 | this.$blockR = this.$blocks.eq( 2 ); 253 | 254 | this.$blockC.find( 'figcaption' ).addClass( 'fs-transition' ); 255 | 256 | // all items 257 | this.$temp = this.$el.find( 'div.fs-temp' ); 258 | 259 | // resize images 260 | this._resizeBlocks(); 261 | 262 | // add navigation if needed 263 | if( this.initElemsCount > 3 ) { 264 | 265 | var $nav = $( '' ).appendTo( this.$el.parent() ); 266 | 267 | // next and previous 268 | this.$navPrev = $nav.find( 'span:first' ); 269 | this.$navNext = $nav.find( 'span:last' ); 270 | 271 | this._initNavigationEvents(); 272 | 273 | } 274 | 275 | }, 276 | // gets the image size and position in order to make it fullscreen and centered. 277 | _getImageDim : function( src, limits ) { 278 | 279 | var img = new Image(); 280 | 281 | img.src = src; 282 | 283 | var l_w = limits.width, 284 | l_h = limits.height, 285 | r_w = l_h / l_w, 286 | i_w = img.width, 287 | i_h = img.height, 288 | r_i = i_h / i_w, 289 | new_w, new_h, new_left, new_top; 290 | 291 | if( r_w > r_i ) { 292 | 293 | new_h = l_h; 294 | new_w = l_h / r_i; 295 | 296 | } 297 | else { 298 | 299 | new_h = l_w * r_i; 300 | new_w = l_w; 301 | 302 | } 303 | 304 | return { 305 | width : new_w, 306 | height : new_h, 307 | left : ( l_w - new_w ) / 2, 308 | top : ( l_h - new_h ) / 2 309 | }; 310 | 311 | }, 312 | _initNavigationEvents : function() { 313 | 314 | var _self = this; 315 | 316 | this.$navPrev.on( 'click.imgslider', function() { 317 | 318 | if( _self.options.autoplay ) { 319 | 320 | clearTimeout( _self.slideshow ); 321 | _self.options.autoplay = false; 322 | 323 | } 324 | 325 | _self._navigate( 'left' ); 326 | 327 | } ); 328 | this.$navNext.on( 'click.imgslider', function() { 329 | 330 | if( _self.options.autoplay ) { 331 | 332 | clearTimeout( _self.slideshow ); 333 | _self.options.autoplay = false; 334 | 335 | } 336 | 337 | _self._navigate( 'right' ); 338 | 339 | } ); 340 | 341 | }, 342 | _initEvents : function() { 343 | 344 | var _self = this; 345 | 346 | $window.on( 'debouncedresize.imgslider', function() { 347 | 348 | _self._resizeBlocks(); 349 | 350 | } ); 351 | 352 | }, 353 | // resize the images 354 | _resizeBlocks : function() { 355 | 356 | var _self = this; 357 | 358 | this.$blocks.each( function( i ) { 359 | 360 | var $el = $( this ).children( 'figure' ), 361 | $img = $el.children( 'img' ), 362 | dim = _self._getImageDim( $img.attr( 'src' ), { width : $el.width(), height : $el.height() } ); 363 | 364 | // save the image dimentions 365 | switch( i ) { 366 | case 0 : _self.$blockL.data( 'imgstyle', dim ); break; 367 | case 1 : _self.$blockC.data( 'imgstyle', dim ); break; 368 | case 2 : _self.$blockR.data( 'imgstyle', dim ); break; 369 | }; 370 | 371 | // apply style 372 | $img.css( dim ); 373 | 374 | } ); 375 | 376 | }, 377 | _navigate : function( dir ) { 378 | 379 | if( this.isAnimating === true ) { 380 | 381 | return false; 382 | 383 | } 384 | 385 | this.isAnimating = true; 386 | 387 | var _self = this, 388 | $items = this.$temp.children(), 389 | LIndex, CIndex, RIndex; 390 | 391 | this.$blocks.find( 'figcaption' ).hide().css( 'transition', 'none' ).removeClass( 'fs-transition' ); 392 | 393 | if( dir === 'right' ) { 394 | 395 | LIndex = this.current + 1; 396 | CIndex = this.current + 2; 397 | RIndex = this.current + 3; 398 | 399 | if( LIndex >= this.initElemsCount ) { 400 | 401 | LIndex -= this.initElemsCount 402 | 403 | } 404 | 405 | if( CIndex >= this.initElemsCount ) { 406 | 407 | CIndex -= this.initElemsCount 408 | 409 | } 410 | 411 | } 412 | else if( dir === 'left' ) { 413 | 414 | LIndex = this.current - 1; 415 | CIndex = this.current; 416 | RIndex = this.current + 1; 417 | 418 | if( LIndex < 0 ) { 419 | 420 | LIndex = this.initElemsCount - 1 421 | 422 | } 423 | 424 | } 425 | 426 | if( RIndex >= this.initElemsCount ) { 427 | 428 | RIndex -= this.initElemsCount 429 | 430 | } 431 | 432 | var $elL = $items.eq( LIndex ).clone().show(), 433 | $elC = $items.eq( CIndex ).clone().show(), 434 | $elR = $items.eq( RIndex ).clone().show(); 435 | 436 | // resize images 437 | $elL.children( 'img' ).css( this.$blockL.data( 'imgstyle' ) ); 438 | $elC.children( 'img' ).css( this.$blockC.data( 'imgstyle' ) ); 439 | $elR.children( 'img' ).css( this.$blockR.data( 'imgstyle' ) ); 440 | 441 | this.$blockL.append( $elL ); 442 | this.$blockC.append( $elC ); 443 | this.$blockR.append( $elR ); 444 | 445 | // now show new images 446 | 447 | var $slides = this.$blocks.find( 'figure:first' ).css( 'width', '0%'); 448 | 449 | if( Modernizr.csstransitions ) { 450 | 451 | $slides.on( this.transEndEventName, function( event ) { 452 | 453 | var $this = $( this ), 454 | blockIdx = $this.parent().index(''); 455 | 456 | _self._slideEnd( dir, blockIdx, $elC ); 457 | 458 | $this.off( _self.transEndEventName ).remove(); 459 | 460 | } ); 461 | 462 | } 463 | else { 464 | 465 | $slides.each( function() { 466 | 467 | var $this = $( this ), 468 | blockIdx = $this.parent().index(''); 469 | 470 | _self._slideEnd( dir, blockIdx, $elC ); 471 | 472 | } ); 473 | 474 | this._slideEnd(); 475 | 476 | } 477 | 478 | }, 479 | _slideEnd : function( dir, blockIdx, $main ) { 480 | 481 | if( blockIdx === 0 ) { 482 | 483 | if( this.current === this.initElemsCount - 1 && dir === 'right' ) { 484 | 485 | this.current = 0; 486 | 487 | } 488 | else if( this.current === 0 && dir === 'left' ) { 489 | 490 | this.current = this.initElemsCount - 1; 491 | 492 | } 493 | else { 494 | 495 | ( dir === 'right' ) ? ++this.current : --this.current; 496 | 497 | } 498 | 499 | this.isAnimating = false; 500 | 501 | } 502 | else if( blockIdx === 1 ) { 503 | 504 | $main.find( 'figcaption' ).addClass( 'fs-transition' ); 505 | 506 | } 507 | 508 | }, 509 | // auto slideshow 510 | _startSlideshow : function() { 511 | 512 | var _self = this; 513 | 514 | this.slideshow = setTimeout( function() { 515 | 516 | _self._navigate( 'right' ); 517 | 518 | if( _self.options.autoplay ) { 519 | 520 | _self._startSlideshow(); 521 | 522 | } 523 | 524 | }, this.options.interval ); 525 | 526 | }, 527 | 528 | }; 529 | 530 | var logError = function( message ) { 531 | 532 | if ( window.console ) { 533 | 534 | window.console.error( message ); 535 | 536 | } 537 | 538 | }; 539 | 540 | $.fn.imgslider = function( options ) { 541 | 542 | if ( typeof options === 'string' ) { 543 | 544 | var args = Array.prototype.slice.call( arguments, 1 ); 545 | 546 | this.each(function() { 547 | 548 | var instance = $.data( this, 'imgslider' ); 549 | 550 | if ( !instance ) { 551 | 552 | logError( "cannot call methods on imgslider prior to initialization; " + 553 | "attempted to call method '" + options + "'" ); 554 | return; 555 | 556 | } 557 | 558 | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 559 | 560 | logError( "no such method '" + options + "' for imgslider instance" ); 561 | return; 562 | 563 | } 564 | 565 | instance[ options ].apply( instance, args ); 566 | 567 | }); 568 | 569 | } 570 | else { 571 | 572 | this.each(function() { 573 | 574 | var instance = $.data( this, 'imgslider' ); 575 | 576 | if ( instance ) { 577 | 578 | instance._init(); 579 | 580 | } 581 | else { 582 | 583 | $.data( this, 'imgslider', new $.ImgSlider( options, this ) ); 584 | 585 | } 586 | 587 | }); 588 | 589 | } 590 | 591 | return this; 592 | 593 | }; 594 | 595 | } )( jQuery, window ); --------------------------------------------------------------------------------