images
8 years ago
slippry.css
8 years ago
slippry.js
5 years ago
slippry.min.css
8 years ago
slippry.min.js
5 years ago
slippry.js
710 lines
| 1 | /** @preserve |
| 2 | * |
| 3 | * slippry v1.4.0 - Responsive content slider for jQuery |
| 4 | * http://slippry.com |
| 5 | * |
| 6 | * Authors: Lukas Jakob Hafner - @saftsaak |
| 7 | * Thomas Hurd - @SeenNotHurd |
| 8 | * |
| 9 | * Copyright 2016, booncon oy - http://booncon.com |
| 10 | * |
| 11 | * |
| 12 | * Released under the MIT license - http://opensource.org/licenses/MIT |
| 13 | */ |
| 14 | |
| 15 | ( function ( $ ) { |
| 16 | "use strict"; |
| 17 | var defaults; |
| 18 | |
| 19 | defaults = { |
| 20 | // general elements & wrapper |
| 21 | slippryWrapper: '<div class="sy-box" />', // wrapper to wrap everything, including pager |
| 22 | slideWrapper: '<div class="sy-slides-wrap" />', // wrapper to wrap sildes & controls |
| 23 | slideCrop: '<div class="sy-slides-crop" />', //additional wrapper around just the slides |
| 24 | boxClass: 'sy-list', // class that goes to original element |
| 25 | elements: 'li', // elments cointaining slide content |
| 26 | activeClass: 'sy-active', // class for current slide |
| 27 | fillerClass: 'sy-filler', // class for element that acts as intrinsic placholder |
| 28 | loadingClass: 'sy-loading', |
| 29 | |
| 30 | // options |
| 31 | adaptiveHeight: true, // height of the sliders adapts to current slide |
| 32 | start: 1, // num (starting from 1), random |
| 33 | loop: true, // first -> last & last -> first arrows |
| 34 | captionsSrc: 'img', // img, el [img takes caption from alt or title, el from title of slide element] |
| 35 | captions: 'overlay', // Position: overlay, below, custom, false |
| 36 | captionsEl: '.sy-caption', // $ selector for captions wrapper |
| 37 | initSingle: true, // initialise even if there is only one slide |
| 38 | responsive: true, |
| 39 | preload: 'visible', // visible, all | resources to wait for until showing slider |
| 40 | |
| 41 | // pager |
| 42 | pager: true, |
| 43 | pagerClass: 'sy-pager', |
| 44 | |
| 45 | // controls |
| 46 | controls: true, |
| 47 | controlClass: 'sy-controls', |
| 48 | prevClass: 'sy-prev', |
| 49 | prevText: 'Previous', |
| 50 | nextClass: 'sy-next', |
| 51 | nextText: 'Next', |
| 52 | hideOnEnd: true, |
| 53 | |
| 54 | // transitions |
| 55 | transition: 'fade', // fade, horizontal, vertical, kenburns, false |
| 56 | kenZoom: 120, // max zoom for kenburns (in %) |
| 57 | slideMargin: 0, // spacing between slides (in %) |
| 58 | transClass: 'transition', // [Class applied to [element] while a transition is taking place.] |
| 59 | speed: 800, // time the transition takes (ms) |
| 60 | easing: 'swing', // easing to use in the animation [(see... [jquery www])] |
| 61 | continuous: true, // seamless first/ last transistion, only works with loop |
| 62 | useCSS: true, // true, false -> fallback to js if no browser support |
| 63 | |
| 64 | //slideshow |
| 65 | auto: true, |
| 66 | autoDirection: 'next', |
| 67 | autoHover: true, |
| 68 | autoHoverDelay: 100, |
| 69 | autoDelay: 500, |
| 70 | pause: 4000, |
| 71 | |
| 72 | // callback functions |
| 73 | onSliderLoad: function () { // when slider loaded |
| 74 | return this; |
| 75 | }, |
| 76 | onSlideBefore: function () { // before page transition starts |
| 77 | return this; |
| 78 | }, |
| 79 | onSlideAfter: function () { // after page transition happened |
| 80 | return this; |
| 81 | } |
| 82 | }; |
| 83 | |
| 84 | $.fn.slippry = function ( options ) { |
| 85 | var slip, el, prepareFiller, getFillerProportions, init, updateCaption, initPager, initControls, ready, transitionDone, whichTransitionEvent, |
| 86 | initCaptions, updatePager, setFillerProportions, doTransition, updateSlide, openSlide, updateControls, updatePos, supports, preload, start, elFromSel, doKens; |
| 87 | |
| 88 | // reference to the object calling the function |
| 89 | el = this; |
| 90 | |
| 91 | // if no elements just stop |
| 92 | if ( el.length === 0 ) { |
| 93 | return this; |
| 94 | } |
| 95 | // support mutltiple elements |
| 96 | if ( el.length > 1 ) { |
| 97 | el.each( function () { |
| 98 | $( this ).slippry( options ); |
| 99 | } ); |
| 100 | return this; |
| 101 | } |
| 102 | |
| 103 | // variable to access the slider settings across the plugin |
| 104 | slip = { }; |
| 105 | slip.vars = { }; |
| 106 | |
| 107 | whichTransitionEvent = function () { // Thanks! http://stackoverflow.com/a/18672988 |
| 108 | var t, div, transitions; |
| 109 | div = document.createElement( 'div' ); |
| 110 | transitions = { |
| 111 | 'WebkitTransition': 'webkitTransitionEnd', |
| 112 | 'MozTransition': 'transitionend', |
| 113 | 'MSTransition': 'msTransitionEnd', |
| 114 | 'OTransition': 'oTransitionEnd', |
| 115 | 'transition': 'transitionEnd transitionend' |
| 116 | }; |
| 117 | for ( t in transitions ) { |
| 118 | if ( div.style[t] !== undefined ) { |
| 119 | return transitions[t]; |
| 120 | } |
| 121 | } |
| 122 | }; |
| 123 | |
| 124 | supports = ( function () { // Thanks! http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/ |
| 125 | var div = document.createElement( 'div' ), |
| 126 | vendors = [ 'Khtml', 'Ms', 'O', 'Moz', 'Webkit' ], |
| 127 | len = vendors.length; |
| 128 | return function ( prop ) { |
| 129 | if ( prop in div.style ) { |
| 130 | return true; |
| 131 | } |
| 132 | prop = prop.replace( /^[a-z]/, function ( val ) { |
| 133 | return val.toUpperCase(); |
| 134 | } ); |
| 135 | while ( len-- ) { |
| 136 | if ( vendors[len] + prop in div.style ) { |
| 137 | return true; |
| 138 | } |
| 139 | } |
| 140 | return false; |
| 141 | }; |
| 142 | }() ); |
| 143 | |
| 144 | elFromSel = function ( sel, prop ) { |
| 145 | var props, newelement, id, className; |
| 146 | props = prop.split( '.' ); |
| 147 | newelement = $( sel ); |
| 148 | id = ''; |
| 149 | className = ''; |
| 150 | $.each( props, function ( i, val ) { |
| 151 | if ( val.indexOf( '#' ) >= 0 ) { |
| 152 | id += val.replace( /^#/, '' ); |
| 153 | } else { |
| 154 | className += val + ' '; |
| 155 | } |
| 156 | } ); |
| 157 | if ( id.length ) { |
| 158 | newelement.attr( 'id', id ); |
| 159 | } |
| 160 | if ( className.length ) { |
| 161 | newelement.attr( 'class', className.trim() ); |
| 162 | } |
| 163 | return newelement; |
| 164 | }; |
| 165 | |
| 166 | doKens = function () { |
| 167 | var kenStart, kenTime, animProp, cssProp; |
| 168 | animProp = { }; |
| 169 | cssProp = { }; |
| 170 | kenStart = 100 - slip.settings.kenZoom; |
| 171 | cssProp.width = slip.settings.kenZoom + '%'; |
| 172 | if ( slip.vars.active.index() % 2 === 0 ) { |
| 173 | cssProp.left = kenStart + '%'; |
| 174 | cssProp.top = kenStart + '%'; |
| 175 | animProp.left = '0%'; |
| 176 | animProp.top = '0%'; |
| 177 | } else { |
| 178 | cssProp.left = '0%'; |
| 179 | cssProp.top = '0%'; |
| 180 | animProp.left = kenStart + '%'; |
| 181 | animProp.top = kenStart + '%'; |
| 182 | } |
| 183 | kenTime = slip.settings.pause + slip.settings.speed * 2; |
| 184 | slip.vars.active.css( cssProp ); |
| 185 | slip.vars.active.animate( animProp, { duration: kenTime, easing: slip.settings.easing, queue: false } ); |
| 186 | }; |
| 187 | |
| 188 | ready = function () { |
| 189 | if ( slip.vars.fresh ) { |
| 190 | slip.vars.slippryWrapper.removeClass( slip.settings.loadingClass ); |
| 191 | slip.vars.fresh = false; |
| 192 | if ( slip.settings.auto ) { |
| 193 | el.startAuto(); |
| 194 | } |
| 195 | if ( !slip.settings.useCSS && slip.settings.transition === 'kenburns' ) { |
| 196 | doKens(); |
| 197 | } |
| 198 | slip.settings.onSliderLoad.call( undefined, slip.vars.active.index() ); |
| 199 | } else { |
| 200 | $( '.' + slip.settings.fillerClass, slip.vars.slideWrapper ).addClass( 'ready' ); |
| 201 | } |
| 202 | }; |
| 203 | |
| 204 | setFillerProportions = function ( width, height ) { |
| 205 | var ratio, p_top, $filler; |
| 206 | ratio = width / height; |
| 207 | p_top = 1 / ratio * 100 + '%'; //cool intrinsic trick: http://alistapart.com/article/creating-intrinsic-ratios-for-video |
| 208 | $filler = $( '.' + slip.settings.fillerClass, slip.vars.slideWrapper ); |
| 209 | $filler.css( { paddingTop: p_top } ); // resizing without the need of js, true responsiveness :) |
| 210 | ready(); |
| 211 | }; |
| 212 | |
| 213 | // gets the aspect ratio of the filler element |
| 214 | getFillerProportions = function ( $slide ) { |
| 215 | var width, height; |
| 216 | if ( ( $( 'img', $slide ).attr( "src" ) !== undefined ) ) { |
| 217 | $( "<img />" ).on( "load", function () { |
| 218 | width = $slide.width(); |
| 219 | height = $slide.height(); |
| 220 | setFillerProportions( width, height ); |
| 221 | } ).attr( "src", $( 'img', $slide ).attr( "src" ) ); |
| 222 | } else { |
| 223 | width = $slide.width(); |
| 224 | height = $slide.height(); |
| 225 | setFillerProportions( width, height ); |
| 226 | } |
| 227 | }; |
| 228 | |
| 229 | // prepares a div to occupy the needed space |
| 230 | prepareFiller = function () { |
| 231 | if ( $( '.' + slip.settings.fillerClass, slip.vars.slideWrapper ).length === 0 ) { |
| 232 | slip.vars.slideWrapper.append( $( '<div class="' + slip.settings.fillerClass + '" />' ) ); |
| 233 | } |
| 234 | if ( slip.settings.adaptiveHeight === true ) { // if the slides shoud alwas adapt to their content |
| 235 | getFillerProportions( $( '.' + slip.settings.activeClass, el ) ); // set the filler height on the active element |
| 236 | } else { // otherwise get the highest element |
| 237 | var $highest, height, loop; |
| 238 | height = 0; |
| 239 | loop = 0; |
| 240 | $( slip.vars.slides ).each( function () { |
| 241 | if ( $( this ).height() > height ) { |
| 242 | $highest = $( this ); |
| 243 | height = $highest.height(); |
| 244 | } |
| 245 | loop = loop + 1; |
| 246 | if ( loop === slip.vars.count ) { |
| 247 | if ( $highest === undefined ) { |
| 248 | $highest = $( $( slip.vars.slides )[0] ); |
| 249 | } |
| 250 | getFillerProportions( $highest ); |
| 251 | } |
| 252 | } ); |
| 253 | } |
| 254 | }; |
| 255 | |
| 256 | updatePager = function () { |
| 257 | if ( slip.settings.pager ) { |
| 258 | $( '.' + slip.settings.pagerClass + ' li', slip.vars.slippryWrapper ).removeClass( slip.settings.activeClass ); |
| 259 | $( $( '.' + slip.settings.pagerClass + ' li', slip.vars.slippryWrapper )[slip.vars.active.index()] ).addClass( slip.settings.activeClass ); |
| 260 | } |
| 261 | }; |
| 262 | |
| 263 | updateControls = function () { |
| 264 | if ( !slip.settings.loop && slip.settings.hideOnEnd ) { |
| 265 | $( '.' + slip.settings.prevClass, slip.vars.slippryWrapper )[slip.vars.first ? 'hide' : 'show'](); |
| 266 | $( '.' + slip.settings.nextClass, slip.vars.slippryWrapper )[slip.vars.last ? 'hide' : 'show'](); |
| 267 | } |
| 268 | }; |
| 269 | |
| 270 | updateCaption = function () { |
| 271 | var caption, wrapper; |
| 272 | if ( slip.settings.captions !== false ) { |
| 273 | if ( slip.settings.captionsSrc !== 'img' ) { |
| 274 | caption = slip.vars.active.attr( 'title' ); |
| 275 | } else { |
| 276 | caption = $( 'img', slip.vars.active ).attr( 'title' ) !== undefined ? $( 'img', slip.vars.active ).attr( 'title' ) : $( 'img', slip.vars.active ).attr( 'alt' ); |
| 277 | } |
| 278 | if ( slip.settings.captions !== 'custom' ) { |
| 279 | wrapper = $( slip.settings.captionsEl, slip.vars.slippryWrapper ); |
| 280 | } else { |
| 281 | wrapper = $( slip.settings.captionsEl ); |
| 282 | } |
| 283 | if ( ( caption !== undefined ) && ( caption !== '' ) ) { |
| 284 | wrapper.html( caption ).show(); |
| 285 | } else { |
| 286 | wrapper.hide(); |
| 287 | } |
| 288 | } |
| 289 | }; |
| 290 | |
| 291 | el.startAuto = function () { |
| 292 | if ( ( slip.vars.timer === undefined ) && ( slip.vars.delay === undefined ) ) { |
| 293 | slip.vars.delay = window.setTimeout( function () { |
| 294 | slip.vars.autodelay = false; |
| 295 | slip.vars.timer = window.setInterval( function () { |
| 296 | slip.vars.trigger = 'auto'; |
| 297 | openSlide( slip.settings.autoDirection ); |
| 298 | }, slip.settings.pause ); |
| 299 | }, slip.vars.autodelay ? slip.settings.autoHoverDelay : slip.settings.autoDelay ); |
| 300 | if ( slip.settings.autoHover ) { |
| 301 | slip.vars.slideWrapper.off( 'mouseenter' ).off( 'mouseleave' ).on( 'mouseenter', function () { |
| 302 | if ( slip.vars.timer !== undefined ) { |
| 303 | slip.vars.hoverStop = true; |
| 304 | el.stopAuto(); |
| 305 | } else { |
| 306 | slip.vars.hoverStop = false; |
| 307 | } |
| 308 | } ).on( 'mouseleave', function () { |
| 309 | if ( slip.vars.hoverStop ) { |
| 310 | slip.vars.autodelay = true; |
| 311 | el.startAuto(); |
| 312 | } |
| 313 | } ); |
| 314 | } |
| 315 | } |
| 316 | }; |
| 317 | |
| 318 | el.stopAuto = function () { |
| 319 | window.clearInterval( slip.vars.timer ); |
| 320 | slip.vars.timer = undefined; |
| 321 | window.clearTimeout( slip.vars.delay ); |
| 322 | slip.vars.delay = undefined; |
| 323 | }; |
| 324 | |
| 325 | // refreshes the already initialised slider |
| 326 | el.refresh = function () { |
| 327 | slip.vars.slides.removeClass( slip.settings.activeClass ); |
| 328 | slip.vars.active.addClass( slip.settings.activeClass ); |
| 329 | if ( slip.settings.responsive ) { |
| 330 | prepareFiller(); |
| 331 | } else { |
| 332 | ready(); |
| 333 | } |
| 334 | updateControls(); |
| 335 | updatePager(); |
| 336 | updateCaption(); |
| 337 | }; |
| 338 | |
| 339 | updateSlide = function () { |
| 340 | el.refresh(); |
| 341 | }; |
| 342 | |
| 343 | transitionDone = function () { |
| 344 | slip.vars.moving = false; |
| 345 | slip.vars.active.removeClass( slip.settings.transClass ); |
| 346 | if ( !slip.vars.fresh ) { |
| 347 | slip.vars.old.removeClass( 'sy-ken' ); |
| 348 | } |
| 349 | slip.vars.old.removeClass( slip.settings.transClass ); |
| 350 | slip.settings.onSlideAfter.call( undefined, slip.vars.active, slip.vars.old.index(), slip.vars.active.index() ); |
| 351 | if ( slip.settings.auto ) { |
| 352 | if ( !slip.vars.hoverStop || slip.vars.hoverStop === undefined ) { |
| 353 | el.startAuto(); |
| 354 | } |
| 355 | } |
| 356 | }; |
| 357 | |
| 358 | doTransition = function () { |
| 359 | var pos, jump, old_left, old_pos, kenTime, ref, cssProp; |
| 360 | slip.settings.onSlideBefore.call( undefined, slip.vars.active, slip.vars.old.index(), slip.vars.active.index() ); |
| 361 | if ( slip.settings.transition !== false ) { |
| 362 | slip.vars.moving = true; |
| 363 | if ( ( slip.settings.transition === 'fade' ) || ( slip.settings.transition === 'kenburns' ) ) { |
| 364 | if ( slip.vars.fresh ) { |
| 365 | if ( slip.settings.useCSS ) { |
| 366 | slip.vars.slides.css( { transitionDuration: slip.settings.speed + 'ms', opacity: 0 } ); |
| 367 | } else { |
| 368 | slip.vars.slides.css( { opacity: 0 } ); |
| 369 | } |
| 370 | slip.vars.active.css( 'opacity', 1 ); |
| 371 | if ( slip.settings.transition === 'kenburns' ) { |
| 372 | if ( slip.settings.useCSS ) { |
| 373 | kenTime = slip.settings.pause + slip.settings.speed * 2; |
| 374 | slip.vars.slides.css( { animationDuration: kenTime + 'ms' } ); |
| 375 | slip.vars.active.addClass( 'sy-ken' ); |
| 376 | } |
| 377 | } |
| 378 | transitionDone(); |
| 379 | } else { |
| 380 | if ( slip.settings.useCSS ) { |
| 381 | slip.vars.old.addClass( slip.settings.transClass ).css( 'opacity', 0 ); |
| 382 | slip.vars.active.addClass( slip.settings.transClass ).css( 'opacity', 1 ); |
| 383 | if ( slip.settings.transition === 'kenburns' ) { |
| 384 | slip.vars.active.addClass( 'sy-ken' ); |
| 385 | } |
| 386 | $( window ).off( 'focus' ).on( 'focus', function () { // bugfix for safari 7 which doesn't always trigger ontransitionend when switching tab |
| 387 | if ( slip.vars.moving ) { |
| 388 | slip.vars.old.trigger( slip.vars.transition ); |
| 389 | } |
| 390 | } ); |
| 391 | slip.vars.old.one( slip.vars.transition, function () { |
| 392 | transitionDone(); |
| 393 | return this; |
| 394 | } ); |
| 395 | } else { |
| 396 | if ( slip.settings.transition === 'kenburns' ) { |
| 397 | doKens(); |
| 398 | } |
| 399 | slip.vars.old.addClass( slip.settings.transClass ).animate( { |
| 400 | opacity: 0 |
| 401 | }, slip.settings.speed, slip.settings.easing, function () { |
| 402 | transitionDone(); |
| 403 | } ); |
| 404 | slip.vars.active.addClass( slip.settings.transClass ).css( 'opacity', 0 ).animate( { |
| 405 | opacity: 1 |
| 406 | }, slip.settings.speed, slip.settings.easing ); |
| 407 | } |
| 408 | } |
| 409 | updateSlide(); |
| 410 | } else if ( ( slip.settings.transition === 'horizontal' ) || ( slip.settings.transition === 'vertical' ) ) { |
| 411 | ref = ( slip.settings.transition === 'horizontal' ) ? 'left' : 'top'; |
| 412 | pos = '-' + slip.vars.active.index() * ( 100 + slip.settings.slideMargin ) + '%'; |
| 413 | if ( slip.vars.fresh ) { |
| 414 | el.css( ref, pos ); |
| 415 | transitionDone(); |
| 416 | } else { |
| 417 | cssProp = { }; |
| 418 | if ( slip.settings.continuous ) { |
| 419 | if ( slip.vars.jump && ( ( slip.vars.trigger === 'controls' ) || ( slip.vars.trigger === 'auto' ) ) ) { |
| 420 | jump = true; |
| 421 | old_pos = pos; |
| 422 | if ( slip.vars.first ) { |
| 423 | old_left = 0; |
| 424 | slip.vars.active.css( ref, slip.vars.count * ( 100 + slip.settings.slideMargin ) + '%' ); |
| 425 | pos = '-' + slip.vars.count * ( 100 + slip.settings.slideMargin ) + '%'; |
| 426 | } else { |
| 427 | old_left = ( slip.vars.count - 1 ) * ( 100 + slip.settings.slideMargin ) + '%'; |
| 428 | slip.vars.active.css( ref, -( 100 + slip.settings.slideMargin ) + '%' ); |
| 429 | pos = ( 100 + slip.settings.slideMargin ) + '%'; |
| 430 | } |
| 431 | } |
| 432 | } |
| 433 | slip.vars.active.addClass( slip.settings.transClass ); |
| 434 | if ( slip.settings.useCSS ) { |
| 435 | cssProp[ref] = pos; |
| 436 | cssProp.transitionDuration = slip.settings.speed + 'ms'; |
| 437 | el.addClass( slip.settings.transition ); |
| 438 | el.css( cssProp ); |
| 439 | $( window ).off( 'focus' ).on( 'focus', function () { // bugfix for safari 7 which doesn't always trigger ontransitionend when switching tab |
| 440 | if ( slip.vars.moving ) { |
| 441 | el.trigger( slip.vars.transition ); |
| 442 | } |
| 443 | } ); |
| 444 | el.one( slip.vars.transition, function () { |
| 445 | el.removeClass( slip.settings.transition ); |
| 446 | if ( jump ) { |
| 447 | slip.vars.active.css( ref, old_left ); |
| 448 | cssProp[ref] = old_pos; |
| 449 | cssProp.transitionDuration = '0ms'; |
| 450 | el.css( cssProp ); |
| 451 | } |
| 452 | transitionDone(); |
| 453 | return this; |
| 454 | } ); |
| 455 | } else { |
| 456 | cssProp[ref] = pos; |
| 457 | el.stop().animate( cssProp, slip.settings.speed, slip.settings.easing, function () { |
| 458 | if ( jump ) { |
| 459 | slip.vars.active.css( ref, old_left ); |
| 460 | el.css( ref, old_pos ); |
| 461 | } |
| 462 | transitionDone(); |
| 463 | return this; |
| 464 | } ); |
| 465 | } |
| 466 | } |
| 467 | updateSlide(); |
| 468 | } |
| 469 | } else { |
| 470 | updateSlide(); |
| 471 | transitionDone(); |
| 472 | } |
| 473 | }; |
| 474 | |
| 475 | updatePos = function ( slide ) { |
| 476 | slip.vars.first = slip.vars.last = false; |
| 477 | if ( ( slide === 'prev' ) || ( slide === 0 ) ) { |
| 478 | slip.vars.first = true; |
| 479 | } else if ( ( slide === 'next' ) || ( slide === slip.vars.count - 1 ) ) { |
| 480 | slip.vars.last = true; |
| 481 | } |
| 482 | }; |
| 483 | |
| 484 | openSlide = function ( slide ) { |
| 485 | var current, direction; |
| 486 | if ( !slip.vars.moving ) { |
| 487 | if ( slip.vars.trigger !== 'auto' ) { |
| 488 | el.stopAuto(); |
| 489 | } |
| 490 | current = slip.vars.active.index(); |
| 491 | if ( slide === 'prev' ) { |
| 492 | direction = slide; |
| 493 | if ( current > 0 ) { |
| 494 | slide = current - 1; |
| 495 | } else if ( slip.settings.loop ) { |
| 496 | slide = slip.vars.count - 1; |
| 497 | } |
| 498 | } else if ( slide === 'next' ) { |
| 499 | direction = slide; |
| 500 | if ( current < slip.vars.count - 1 ) { |
| 501 | slide = current + 1; |
| 502 | } else if ( slip.settings.loop ) { |
| 503 | slide = 0; |
| 504 | } |
| 505 | } else { |
| 506 | slide = slide - 1; |
| 507 | direction = slide < current ? 'prev' : 'next'; |
| 508 | } |
| 509 | slip.vars.jump = false; |
| 510 | if ( ( slide !== 'prev' ) && ( slide !== 'next' ) && ( ( slide !== current ) || ( slip.vars.fresh ) ) ) { |
| 511 | updatePos( slide ); |
| 512 | slip.vars.old = slip.vars.active; |
| 513 | slip.vars.active = $( slip.vars.slides[slide] ); |
| 514 | if ( ( ( current === 0 ) && ( direction === 'prev' ) ) || ( ( current === slip.vars.count - 1 ) && ( direction === 'next' ) ) ) { |
| 515 | slip.vars.jump = true; |
| 516 | } |
| 517 | doTransition(); |
| 518 | } |
| 519 | } |
| 520 | }; |
| 521 | |
| 522 | el.goToSlide = function ( slide ) { |
| 523 | slip.vars.trigger = 'external'; |
| 524 | openSlide( slide ); |
| 525 | }; |
| 526 | |
| 527 | el.goToNextSlide = function () { |
| 528 | slip.vars.trigger = 'external'; |
| 529 | openSlide( 'next' ); |
| 530 | }; |
| 531 | |
| 532 | el.goToPrevSlide = function () { |
| 533 | slip.vars.trigger = 'external'; |
| 534 | openSlide( 'prev' ); |
| 535 | }; |
| 536 | |
| 537 | initPager = function () { |
| 538 | if ( ( slip.settings.pager ) && ( slip.vars.count > 1 ) ) { |
| 539 | var count, loop, pager; |
| 540 | count = slip.vars.slides.length; |
| 541 | pager = $( '<ul class="' + slip.settings.pagerClass + '" />' ); |
| 542 | for ( loop = 1; loop < count + 1; loop = loop + 1 ) { |
| 543 | pager.append( $( '<li />' ).append( $( '<a href="#' + loop + '">' + loop + '</a>' ) ) ); |
| 544 | } |
| 545 | slip.vars.slippryWrapper.append( pager ); |
| 546 | $( '.' + slip.settings.pagerClass + ' a', slip.vars.slippryWrapper ).on( 'click', function () { |
| 547 | slip.vars.trigger = 'pager'; |
| 548 | openSlide( parseInt( this.hash.split( '#' )[1], 10 ) ); |
| 549 | return false; |
| 550 | } ); |
| 551 | updatePager(); |
| 552 | } |
| 553 | }; |
| 554 | |
| 555 | initControls = function () { |
| 556 | if ( ( slip.settings.controls ) && ( slip.vars.count > 1 ) ) { |
| 557 | slip.vars.slideWrapper.append( |
| 558 | $( '<ul class="' + slip.settings.controlClass + '" />' ) |
| 559 | .append( '<li class="' + slip.settings.prevClass + '"><a href="#prev">' + slip.settings.prevText + '</a></li>' ) |
| 560 | .append( '<li class="' + slip.settings.nextClass + '"><a href="#next">' + slip.settings.nextText + '</a></li>' ) |
| 561 | ); |
| 562 | $( '.' + slip.settings.controlClass + ' a', slip.vars.slippryWrapper ).on( 'click', function () { |
| 563 | slip.vars.trigger = 'controls'; |
| 564 | openSlide( this.hash.split( '#' )[1] ); |
| 565 | return false; |
| 566 | } ); |
| 567 | updateControls(); |
| 568 | } |
| 569 | }; |
| 570 | |
| 571 | initCaptions = function () { |
| 572 | if ( slip.settings.captions !== false ) { |
| 573 | if ( slip.settings.captions === 'overlay' ) { |
| 574 | slip.vars.slideWrapper.append( $( '<div class="sy-caption-wrap" />' ).html( elFromSel( '<div />', slip.settings.captionsEl ) ) ); |
| 575 | } else if ( slip.settings.captions === 'below' ) { |
| 576 | slip.vars.slippryWrapper.append( $( '<div class="sy-caption-wrap" />' ).html( elFromSel( '<div />', slip.settings.captionsEl ) ) ); |
| 577 | } |
| 578 | } |
| 579 | }; |
| 580 | |
| 581 | // actually show the first slide |
| 582 | start = function () { |
| 583 | openSlide( slip.vars.active.index() + 1 ); |
| 584 | }; |
| 585 | |
| 586 | // wait for images, iframes to be loaded |
| 587 | preload = function ( slides ) { |
| 588 | var count, loop, elements, container; |
| 589 | container = ( slip.settings.preload === 'all' ) ? slides : slip.vars.active; |
| 590 | elements = $( 'img, iframe', container ); |
| 591 | count = elements.length; |
| 592 | if ( count === 0 ) { |
| 593 | start(); |
| 594 | return; |
| 595 | } |
| 596 | loop = 0; |
| 597 | elements.each( function () { |
| 598 | $( this ).one( 'load error', function () { |
| 599 | if ( ++loop === count ) { |
| 600 | start(); |
| 601 | } |
| 602 | } ).each( function () { |
| 603 | if ( this.complete ) { |
| 604 | $( this ).trigger( 'load' ); |
| 605 | } |
| 606 | } ); |
| 607 | } ); |
| 608 | }; |
| 609 | |
| 610 | el.getCurrentSlide = function () { |
| 611 | return slip.vars.active; |
| 612 | }; |
| 613 | |
| 614 | el.getSlideCount = function () { |
| 615 | return slip.vars.count; |
| 616 | }; |
| 617 | |
| 618 | el.destroySlider = function () { |
| 619 | if ( slip.vars.fresh === false ) { |
| 620 | el.stopAuto(); |
| 621 | slip.vars.moving = false; |
| 622 | slip.vars.slides.each( function () { |
| 623 | if ( $( this ).data( "sy-cssBckup" ) !== undefined ) { |
| 624 | $( this ).attr( "style", $( this ).data( "sy-cssBckup" ) ); |
| 625 | } else { |
| 626 | $( this ).removeAttr( 'style' ); |
| 627 | } |
| 628 | if ( $( this ).data( "sy-classBckup" ) !== undefined ) { |
| 629 | $( this ).attr( "class", $( this ).data( "sy-classBckup" ) ); |
| 630 | } else { |
| 631 | $( this ).removeAttr( 'class' ); |
| 632 | } |
| 633 | } ); |
| 634 | if ( el.data( "sy-cssBckup" ) !== undefined ) { |
| 635 | el.attr( "style", el.data( "sy-cssBckup" ) ); |
| 636 | } else { |
| 637 | el.removeAttr( 'style' ); |
| 638 | } |
| 639 | if ( el.data( "sy-classBckup" ) !== undefined ) { |
| 640 | el.attr( "class", el.data( "sy-classBckup" ) ); |
| 641 | } else { |
| 642 | el.removeAttr( 'class' ); |
| 643 | } |
| 644 | slip.vars.slippryWrapper.before( el ); |
| 645 | slip.vars.slippryWrapper.remove(); |
| 646 | slip.vars.fresh = undefined; |
| 647 | } |
| 648 | }; |
| 649 | |
| 650 | el.reloadSlider = function () { |
| 651 | el.destroySlider(); |
| 652 | init(); |
| 653 | }; |
| 654 | |
| 655 | // initialises the slider, creates needed markup |
| 656 | init = function () { |
| 657 | var first; |
| 658 | slip.settings = $.extend( { }, defaults, options ); |
| 659 | slip.vars.slides = $( slip.settings.elements, el ); |
| 660 | slip.vars.count = slip.vars.slides.length; |
| 661 | if ( slip.settings.useCSS ) { // deactivate css transitions on unsupported browsers |
| 662 | if ( !supports( 'transition' ) ) { |
| 663 | slip.settings.useCSS = false; |
| 664 | } |
| 665 | slip.vars.transition = whichTransitionEvent(); |
| 666 | } |
| 667 | el.data( 'sy-cssBckup', el.attr( 'style' ) ); |
| 668 | el.data( 'sy-classBackup', el.attr( 'class' ) ); |
| 669 | el.addClass( slip.settings.boxClass ).wrap( slip.settings.slippryWrapper ).wrap( slip.settings.slideWrapper ).wrap( slip.settings.slideCrop ); |
| 670 | slip.vars.slideWrapper = el.parent().parent(); |
| 671 | slip.vars.slippryWrapper = slip.vars.slideWrapper.parent().addClass( slip.settings.loadingClass ); |
| 672 | slip.vars.fresh = true; |
| 673 | slip.vars.slides.each( function () { |
| 674 | $( this ).addClass( 'sy-slide ' + slip.settings.transition ); |
| 675 | if ( slip.settings.useCSS ) { |
| 676 | $( this ).addClass( 'useCSS' ); |
| 677 | } |
| 678 | if ( slip.settings.transition === 'horizontal' ) { |
| 679 | $( this ).css( 'left', $( this ).index() * ( 100 + slip.settings.slideMargin ) + '%' ); |
| 680 | } else if ( slip.settings.transition === 'vertical' ) { |
| 681 | $( this ).css( 'top', $( this ).index() * ( 100 + slip.settings.slideMargin ) + '%' ); |
| 682 | } |
| 683 | } ); |
| 684 | if ( ( slip.vars.count > 1 ) || ( slip.settings.initSingle ) ) { |
| 685 | if ( $( '.' + slip.settings.activeClass, el ).index() === -1 ) { |
| 686 | if ( slip.settings.start === 'random' ) { |
| 687 | first = Math.round( Math.random() * ( slip.vars.count - 1 ) ); |
| 688 | } else if ( slip.settings.start > 0 && slip.settings.start <= slip.vars.count ) { |
| 689 | first = slip.settings.start - 1; |
| 690 | } else { |
| 691 | first = 0; |
| 692 | } |
| 693 | slip.vars.active = $( slip.vars.slides[first] ).addClass( slip.settings.activeClass ); |
| 694 | } else { |
| 695 | slip.vars.active = $( '.' + slip.settings.activeClass, el ); |
| 696 | } |
| 697 | initControls(); |
| 698 | initPager(); |
| 699 | initCaptions(); |
| 700 | preload( slip.vars.slides ); |
| 701 | } else { |
| 702 | return this; |
| 703 | } |
| 704 | }; |
| 705 | |
| 706 | init(); // on startup initialise the slider |
| 707 | |
| 708 | return this; |
| 709 | }; |
| 710 | }( jQuery ) ); |