diff --git a/demos/classes.html b/demos/classes.html index fa86b03..094f87a 100644 --- a/demos/classes.html +++ b/demos/classes.html @@ -3,39 +3,39 @@ - + - + WebSlides Tutorial: Classes - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -90,16 +90,16 @@ - +
- + - +
@@ -1928,17 +1928,20 @@
- +
- - + + + diff --git a/demos/components.html b/demos/components.html index b3d03f5..ec19a67 100644 --- a/demos/components.html +++ b/demos/components.html @@ -3,39 +3,39 @@ - + - + WebSlides Documentation: Components - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -90,16 +90,16 @@ - +
- + - +
@@ -303,7 +303,7 @@

- Google + Google @@ -1984,7 +1984,7 @@

  • Founded 2040
    • -
  • +
  • 120+ Prebuilt Slides
    • @@ -2508,7 +2508,7 @@

    Buttons

    - .button + .button @@ -2527,7 +2527,7 @@

    a.badge-ios and a.badge-android

    - iOS App + iOS App Android App

    @@ -2817,7 +2817,7 @@

    Responsive Videos

    <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

    .embed

    @@ -2842,7 +2842,7 @@
    - +
    @@ -2904,7 +2904,7 @@

    Transparent Logos

    - Change the color of a .svg/.png image using CSS. Images are property of their respective owners. + Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

    - +
    @@ -3084,7 +3084,7 @@

  • particles.js

    - A lightweight .js library for creating particles. + A lightweight .js library for creating particles.
  • @@ -3121,17 +3121,20 @@
    • - +
    - + - + + diff --git a/demos/keynote.html b/demos/keynote.html index 78099d2..49f2847 100644 --- a/demos/keynote.html +++ b/demos/keynote.html @@ -3,39 +3,39 @@ - + - + WebSlides Keynote: Make a Keynote presentation using HTML - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -90,16 +90,16 @@ - +
    - + - +
    @@ -473,7 +473,7 @@

    - Redesigning + Redesigning @@ -530,7 +530,7 @@

    Works with all major banks

    - Apple Pay is accepted in restaurants, hotels... + Apple Pay is accepted in restaurants, hotels...
  • @@ -739,7 +739,7 @@

    Responsive Videos

    <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

    .embed

    @@ -838,17 +838,20 @@

    @jlantunez

    * * *

    • - +
    - + + diff --git a/demos/landings.html b/demos/landings.html index 424ddc6..b45f969 100644 --- a/demos/landings.html +++ b/demos/landings.html @@ -3,39 +3,39 @@ - + - + WebSlides Landings: Create your web presence easily - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -92,13 +92,13 @@
    - + - +
    @@ -371,7 +371,7 @@

    New in London

    Hotel Daenerys

    -

    The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.

    +

    The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.

    More info

    @@ -1144,7 +1144,7 @@
  • Founded 1986
    • -
  • +
  • 120+ Prebuilt Slides
    • @@ -1518,7 +1518,7 @@

    Buttons

    - .button + .button @@ -1537,7 +1537,7 @@

    a.badge-ios and a.badge-android

    - iOS App + iOS App Android App

    @@ -1694,7 +1694,7 @@

    Transparent Logos

    - Change the color of a .svg/.png image using CSS. Images are property of their respective owners. + Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

      @@ -1718,7 +1718,7 @@
    • - +

      img.whitelogo

      • @@ -1811,7 +1811,7 @@

      Responsive Videos

      <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

      .embed

      @@ -1836,7 +1836,7 @@
    - +
    @@ -1913,16 +1913,20 @@
    - +
    - + - + + + diff --git a/demos/portfolios.html b/demos/portfolios.html index 6246231..64d318d 100644 --- a/demos/portfolios.html +++ b/demos/portfolios.html @@ -3,39 +3,39 @@ - + - + WebSlides Portfolios: Showcase your work - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,16 +51,16 @@ - + - + - + @@ -90,16 +90,16 @@ - +
    - + - +
    @@ -358,7 +358,7 @@

    - Redesigning + Redesigning @@ -458,7 +458,7 @@
  • Founded 1976
    • -
  • +
  • 120+ Prebuilt Slides
    • @@ -1051,7 +1051,7 @@

    .card-50.bg-white

    - Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro. + Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.

    • @@ -1192,7 +1192,7 @@

      Works with all major banks

      - Apple Pay is accepted in restaurants, hotels... + Apple Pay is accepted in restaurants, hotels...
  • @@ -1451,7 +1451,7 @@

    Transparent Logos

    - Change the color of a .svg/.png image using CSS. Images are property of their respective owners. + Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

      @@ -1475,8 +1475,8 @@
    • - - img.whitelogo + + img.whitelogo
    @@ -1722,7 +1722,7 @@

    Responsive Videos

    <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

    .embed

    @@ -1747,7 +1747,7 @@
    - +
    • @@ -1857,13 +1857,16 @@
    - + - + + diff --git a/demos/why-webslides.html b/demos/why-webslides.html index 37764ad..6ca4022 100644 --- a/demos/why-webslides.html +++ b/demos/why-webslides.html @@ -3,39 +3,39 @@ - + - + WebSlides: Why WebSlides is so inspiring? - + - + - + - + - + - + - + @@ -45,7 +45,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -62,10 +62,11 @@ - + +
    @@ -92,22 +93,22 @@
    - +
    - + - +

    Good Karma

    - WebSlides — HTML presentations made easy.
    + WebSlides — HTML presentations made easy.
    Hypertext and beauty as narrative elements.

    - +
    - + - + - + + diff --git a/static/js/webslides.js b/static/js/webslides.js index bd6eb7f..007c609 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -9,137 +9,343 @@ Based on SimpleSlides, by Jenn Schiffer: https://github.com/jennschiffer/SimpleSlides ==================================================================== */ -jQuery(document).ready(function($){ +jQuery.fn.webslides = function(options) { - var ID = { - slideshow : 'webslides', - slide : 'slide', - counter : 'counter', - navigation : 'navigation', - next : 'next', - previous : 'previous', - current : 'current', - verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding - }; - var easing = 'swing'; - var slideOffset = 50; // minimun number of pixels for sliding - var verticalDelay = 150; // to avoid 2 slides in a row - var wheelDetail = -3; // how far the wheel turned for Firefox - var wheelDelta = 150; // how far the wheel turned for Chrome - var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); + var obj = {}; - var $slideshow = jQuery('#' + ID.slideshow), - $navigation = jQuery('
    ').attr('id','navigation'), - $slides = $slideshow.children('section').addClass(ID.slide), - $currentSlide, - $firstSlide = $slides.first(), - $lastSlide = $slides.last(), - $auxSlide = null; + // Private vars + var easing = 'swing'; + var slideOffset = 50; // minimun number of pixels for sliding + var verticalDelay = 150; // to avoid 2 slides in a row + var wheelDetail = -3; // how far the wheel turned for Firefox + var wheelDelta = 150; // how far the wheel turned for Chrome + var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); - var total = $slides.length; + var $slideshow, + $navigation, + $slides, + $counter, + $next, + $previous, + $currentSlide, + $firstSlide, + $lastSlide, + $auxSlide = null, + slidePointer; - var labels = { - next : $slideshow.hasClass(ID.verticalClass)?'↓':'→', - previous : $slideshow.hasClass(ID.verticalClass)?'↑':'←', - separator : ' / ' - }; + var total = 0; + + var labels = {}; + + /** + * Init function + * @param {Object} settings Plugin settings + * @param {string} id Container HTML ID + * @param {string} class Slide class + * @param {string} counter Counter container ID + * @param {string} navigation Navigation container ID + * @param {string} next Next HTML element ID + * @param {string} previous Previous HTML element ID + * @param {string} current Current HTML element ID + * @param {string} verticalClass Vertical class + */ + var init = function(_options) { + obj.settings = { + id : 'webslides', + class : 'slide', + counter : 'counter', + navigation : 'navigation', + next : 'next', + previous : 'previous', + current : 'current', + verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding + }; + + // Allow overriding the default config + $.extend( obj.settings, _options ); + + setup(); + run(); + initClickEvents(); + initKeyEvents(); + initMouseWheel(); + initTouchEvents(); + initHash(); + } + + var setup = function() { + $slideshow = jQuery('#' + obj.settings.id); + $navigation = jQuery('
    ').attr('id', obj.settings.navigation); + $slides = $slideshow.children('section').addClass(obj.settings.class); + $firstSlide = $slides.first(); + $lastSlide = $slides.last(); + + total = $slides.length; + + labels = { + next : $slideshow.hasClass(obj.settings.verticalClass)?'↓':'→', + previous : $slideshow.hasClass(obj.settings.verticalClass)?'↑':'←', + separator : ' / ' + }; + + // make sure the last slide doesn't page break while printing. + jQuery('head').append( '' ); + + // remove non-section children (like html comments which wp wraps in

    tags) + $slideshow.children().not('section').remove(); + + // add navigational arrows and counter + $navigation.append(jQuery('').attr('id',obj.settings.previous).html(labels.previous)); + $navigation.append(jQuery('').attr('id',obj.settings.next).html(labels.next)); + $slideshow.append($navigation); + $slideshow.append(jQuery('').attr('id',obj.settings.counter)); + + $counter = jQuery('#'+obj.settings.counter), + $next = jQuery('#'+obj.settings.next), + $previous = jQuery('#'+obj.settings.previous); + + $navigation.append($counter); + + $slideshow.data('moving', false); + }; + + /** + * Starts sliders + */ + var run = function() { + // Initially hide all slides + $slides.hide(); + + // The first slide is number first, last is slides length + slidePointer = { + current : 1, + last : $slides.length + }; + + var slideState = parseInt(document.location.hash.replace('#slide=', '')); + + if ( slideState && (slideState > 0 && slideState <= $slides.length )) { + // if slide= hash state is given and valid, go to that slide + obj.goToSlide(slideState); + } + else { + // The first slide is the first slide, so make visible and set the counter... + $currentSlide = $firstSlide.show().addClass(obj.settings.current); + updateCounter(); + } + }; + + /** + * Init click events + */ + var initClickEvents = function() { + // "next" arrow clicked => next slide + $next.click( function(e){ + e.preventDefault(); + obj.nextSlide(); + }); + + // "previous" arrow clicked => previous slide + $previous.click( function(e){ + e.preventDefault(); + obj.previousSlide(); + }); + } - // make sure the last slide doesn't page break while printing. - jQuery('head').append( '' ); - - // remove non-section children (like html comments which wp wraps in

    tags) - $slideshow.children().not('section').remove(); - - // add navigational arrows and counter - $navigation.append(jQuery('').attr('id',ID.previous).html(labels.previous)); - $navigation.append(jQuery('').attr('id',ID.next).html(labels.next)); - $slideshow.append($navigation); - $slideshow.append(jQuery('').attr('id',ID.counter)); - - var $counter = jQuery('#'+ID.counter), - $next = jQuery('#'+ID.next), - $previous = jQuery('#'+ID.previous); - $navigation.append($counter); - - - /*** FUNCTIONS ***/ - - var updateCounter = function() { - // updates the counter - $counter.text(slidePointer.current + labels.separator + slidePointer.last); - }; - - var updateURL = function() { - // updates slide state - var currentURL = document.location.toString(); - - if (currentURL.indexOf('#') != 1){ - currentURL = currentURL.substr(0,currentURL.indexOf('#')); + /** + * Init keypress events + */ + var initKeyEvents = function() { + // Add keyboard shortcuts for changing slides + jQuery(document).keydown(function(e){ + if (!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) { + $slideshow.data('iswheel', false); + if (e.which == 39 || e.which == 32) { + // right key pressed => next slide + obj.nextSlide(); + return false; } - - history.pushState(null, null, '#slide='+ slidePointer.current ); - }; - - var hideCurrentSlide = function() { - // hide the current slide - if ( $currentSlide ) { - $currentSlide.hide().removeClass(ID.current); + else if (e.which == 37) { + // left or l key pressed => previous slide + obj.previousSlide(); + return false; } - }; + } + }); - $slideshow.data('moving', false); - var nextSlide = function() { - var nextSlide; - if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical - if ($slideshow.data('moving')) return; - $slideshow.data('moving', true); - jQuery('html').css({overflow: 'hidden'}); - - nextSlide = $currentSlide.next(); - slidePointer.current = ((slidePointer.current+1)%total); - if (slidePointer.current === 0) slidePointer.current = total; - - // show next slide - nextSlide.show().addClass(ID.current); - // scroll to next slide - var animated = false; - jQuery('html, body').animate({scrollTop: nextSlide.offset().top}, 500, easing, function() { - if (!animated) { - $currentSlide.hide().removeClass(ID.current); - $currentSlide.siblings('.slide').last().after($currentSlide); - $currentSlide = nextSlide; - - // update counter - updateCounter(); - - // update url - updateURL(); - - // fire slide event - fireSlideEvent(); - - jQuery('html').css({overflow: 'auto'}); - setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); - } - animated = true; - }); + // Add keyboard shortcuts for changing slides + jQuery(document).keydown(function(e){ + if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { + $slideshow.data('iswheel', false); + if (e.which == 40 || e.which == 32) { + // right key pressed => next slide + obj.nextSlide(); + return false; + } + else if (e.which == 38) { + // left or l key pressed => previous slide + obj.previousSlide(); + return false; + } + } + }); + } + /** + * Init mouse wheel + */ + var initMouseWheel = function() { + // Mouse wheel + jQuery(window).bind('mousewheel DOMMouseScroll', function(event){ + $slideshow.data('iswheel', true); + if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { + if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) { + // Scroll up + obj.previousSlide(); + } else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) { + // scroll down + obj.nextSlide(); + } + } + }); + } - } else { // Is landscape - jQuery("html, body").animate({ scrollTop: 0 }, 0); - // hide current slide - hideCurrentSlide(); + /** + * Init touch events + */ + var initTouchEvents = function() { + // Touch + jQuery(window).on("touchstart", function(ev) { + var e = ev.originalEvent; + $slideshow.data('touchYStart', e.touches[0].screenY); + $slideshow.data('touchXStart', e.touches[0].screenX); + $slideshow.data('touchYEnd', e.touches[0].screenY); + $slideshow.data('touchXEnd', e.touches[0].screenX); + }); + jQuery(window).on("touchmove", function(ev) { + var e = ev.originalEvent; + $slideshow.data('touchYEnd', e.touches[0].screenY); + $slideshow.data('touchXEnd', e.touches[0].screenX); + }); + jQuery(window).on("touchend", function(ev) { + $slideshow.data('iswheel', false); + var e = ev.originalEvent; + var diffX = $slideshow.data('touchXStart') - $slideshow.data('touchXEnd'); + var diffY = $slideshow.data('touchYStart') - $slideshow.data('touchYEnd'); + if ((!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) && Math.abs(diffX) > Math.abs(diffY)) { + if(diffX < -slideOffset) { + previousSlide(); + // Scroll up + } else if(diffX > slideOffset) { + // scroll down + nextSlide(); + } + } + }); + } - // get the next slide - nextSlide = $currentSlide.next(); + /** + * Init hash + */ + var initHash = function() { + /** + * Bind the event HashChange when the prev/next history button was clicked + */ + jQuery(window).bind("hashchange", function () { + if (hasHash()) { + goToSlideIfSlideHashChange(); + } else { + window.location.reload(); + } + }); - nextSlide.show().addClass(ID.current); + function hasHash() { + return window.location.hash ? true : false; + } + + function goToSlideIfSlideHashChange() { + var paramsArr = getArrayOfHashParams(); + var slideObj = $.grep(paramsArr, function (e) { + return (e.key == "slide"); + }); + if (slideObj.length == 1) { + obj.goToSlide(slideObj[0].value); + } + } + + function getArrayOfHashParams() { + var hash = window.location.hash.replace('#', '').split('&'); + var paramsArr = new Array([]); + for (var i = 0; i < hash.length; i++) { + var itemArray = hash[i].split('='); + var action = new Object({}); + action.key = itemArray[0]; + action.value = itemArray[1]; + paramsArr.push(action); + } + return paramsArr; + } + } + + /*** FUNCTIONS ***/ + + /** + * Updates slider counter + */ + var updateCounter = function() { + // updates the counter + $counter.text(slidePointer.current + labels.separator + slidePointer.last); + }; + + /** + * Updates current URL with counter position + */ + var updateURL = function() { + // updates slide state + var currentURL = document.location.toString(); + + if (currentURL.indexOf('#') != 1){ + currentURL = currentURL.substr(0,currentURL.indexOf('#')); + } + + history.pushState(null, null, '#slide='+ slidePointer.current ); + }; + + /** + * Hides current Slide + */ + var hideCurrentSlide = function() { + // hide the current slide + if ( $currentSlide ) { + $currentSlide.hide().removeClass(obj.settings.current); + } + }; + + /** + * Goes to next slide + */ + obj.nextSlide = function() { + var nextSlide; + if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { // Is vertical + if ($slideshow.data('moving')) return; + $slideshow.data('moving', true); + jQuery('html').css({overflow: 'hidden'}); + + nextSlide = $currentSlide.next(); + slidePointer.current = ((slidePointer.current+1)%total); + if (slidePointer.current === 0) slidePointer.current = total; + + // show next slide + nextSlide.show().addClass(obj.settings.current); + // scroll to next slide + var animated = false; + jQuery('html, body').animate({scrollTop: nextSlide.offset().top}, 500, easing, function() { + if (!animated) { + $currentSlide.hide().removeClass(obj.settings.current); $currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide = nextSlide; - slidePointer.current = ((slidePointer.current+1)%total); - if (slidePointer.current == 0) slidePointer.current = total; // update counter updateCounter(); @@ -149,274 +355,163 @@ jQuery(document).ready(function($){ // fire slide event fireSlideEvent(); + + jQuery('html').css({overflow: 'auto'}); + setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); } - }; + animated = true; + }); + } else { // Is landscape + jQuery("html, body").animate({ scrollTop: 0 }, 0); + // hide current slide + hideCurrentSlide(); - var previousSlide = function() { - var prevSlide; - if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical - if ($slideshow.data('moving')) return; - $slideshow.data('moving', true); - jQuery('html').css({overflow: 'hidden'}); + // get the next slide + nextSlide = $currentSlide.next(); - $currentSlide.before($currentSlide.siblings('.slide').last()); + nextSlide.show().addClass(obj.settings.current); + $currentSlide.siblings('.slide').last().after($currentSlide); + $currentSlide = nextSlide; + slidePointer.current = ((slidePointer.current+1)%total); + if (slidePointer.current == 0) slidePointer.current = total; - prevSlide = $currentSlide.prev(); + // update counter + updateCounter(); - if (prevSlide.length === 0) return false; - // show next slide - prevSlide.show().addClass(ID.current); - // scroll to next slide - var animated = false; - jQuery('html, body').scrollTop($currentSlide.offset().top); - jQuery('html, body').animate({scrollTop: prevSlide.offset().top}, 500, easing, function() { - if (!animated) { - $currentSlide.hide().removeClass(ID.current); - $currentSlide = prevSlide; + // update url + updateURL(); - // not the last slide => go to the next one and increment the counter - $currentSlide = prevSlide; - slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); + // fire slide event + fireSlideEvent(); + } + }; - // update counter - updateCounter(); + /** + * Goes to previous slide + */ + obj.previousSlide = function() { + var prevSlide; + if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { // Is vertical + if ($slideshow.data('moving')) return; + $slideshow.data('moving', true); + jQuery('html').css({overflow: 'hidden'}); - // update url - updateURL(); + $currentSlide.before($currentSlide.siblings('.slide').last()); - // fire slide event - fireSlideEvent(); + prevSlide = $currentSlide.prev(); - jQuery('html').css({overflow: 'auto'}); - setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); - } - animated = true; - }); + if (prevSlide.length === 0) return false; + // show next slide + prevSlide.show().addClass(obj.settings.current); + // scroll to next slide + var animated = false; + jQuery('html, body').scrollTop($currentSlide.offset().top); + jQuery('html, body').animate({scrollTop: prevSlide.offset().top}, 500, easing, function() { + if (!animated) { + $currentSlide.hide().removeClass(obj.settings.current); + $currentSlide = prevSlide; - - - } else { // Is landscape - jQuery("html, body").animate({ scrollTop: 0 }, 0); - // hide current slide - hideCurrentSlide(); - - // get the previous slide - $currentSlide.before($currentSlide.siblings('.slide').last()); - prevSlide = $currentSlide.prev(); - - prevSlide.show().addClass(ID.current); + // not the last slide => go to the next one and increment the counter $currentSlide = prevSlide; slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); // update counter updateCounter(); - // update URL + // update url updateURL(); // fire slide event fireSlideEvent(); + + jQuery('html').css({overflow: 'auto'}); + setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); } - }; - - var goToSlide = function(slideNumber) { - // hide current slide - hideCurrentSlide(); - moveToSlide = slideNumber-1; - - $currentSlide = $slides.eq(moveToSlide); - $currentSlide.show().addClass(ID.current); - jQuery('.slide:lt('+$currentSlide.index()+')').each(function() { - var $this = jQuery(this); - $this.siblings('.slide').last().after($this); - }); - slidePointer.current = slideNumber; - - // update counter - updateCounter(); - }; - - var fireSlideEvent = function(slide) { - var slideEvent = new window.CustomEvent('slidechanged', { - detail: { slide: slide || $currentSlide } - }); - window.dispatchEvent(slideEvent); - }; - - /*** INIT SLIDESHOW ***/ - - // Initially hide all slides - $slides.hide(); - - // The first slide is number first, last is slides length - var slidePointer = { - current : 1, - last : $slides.length - }; - - var slideState = parseInt(document.location.hash.replace('#slide=', '')); - - if ( slideState && (slideState > 0 && slideState <= $slides.length )) { - // if slide= hash state is given and valid, go to that slide - goToSlide(slideState); - } - else { - // The first slide is the first slide, so make visible and set the counter... - $currentSlide = $firstSlide.show().addClass(ID.current); - updateCounter(); - } - - - /*** EVENTS ***/ - - // "next" arrow clicked => next slide - $next.click( function(e){ - e.preventDefault(); - nextSlide(); + animated = true; }); - // "previous" arrow clicked => previous slide - $previous.click( function(e){ - e.preventDefault(); - previousSlide(); - }); + } else { // Is landscape + jQuery("html, body").animate({ scrollTop: 0 }, 0); + // hide current slide + hideCurrentSlide(); - // Add keyboard shortcuts for changing slides - jQuery(document).keydown(function(e){ - if (!$slideshow.hasClass(ID.verticalClass) || isMobile) { - $slideshow.data('iswheel', false); - if (e.which == 39 || e.which == 32) { - // right key pressed => next slide - nextSlide(); - return false; - } - else if (e.which == 37) { - // left or l key pressed => previous slide - previousSlide(); - return false; - } - } - }); + // get the previous slide + $currentSlide.before($currentSlide.siblings('.slide').last()); + prevSlide = $currentSlide.prev(); - // Add keyboard shortcuts for changing slides - jQuery(document).keydown(function(e){ - if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { - $slideshow.data('iswheel', false); - if (e.which == 40 || e.which == 32) { - // right key pressed => next slide - nextSlide(); - return false; - } - else if (e.which == 38) { - // left or l key pressed => previous slide - previousSlide(); - return false; - } - } - }); + prevSlide.show().addClass(obj.settings.current); + $currentSlide = prevSlide; + slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); + // update counter + updateCounter(); - /** - * Bind the event HashChange when the prev/next history button was clicked - */ - jQuery(window).bind("hashchange", function () { - if (hasHash()) { - goToSlideIfSlideHashChange(); - } else { - window.location.reload(); - } - }); + // update URL + updateURL(); - function hasHash() { - return window.location.hash ? true : false; - } - - function goToSlideIfSlideHashChange() { - var paramsArr = getArrayOfHashParams(); - var slideObj = $.grep(paramsArr, function (e) { - return (e.key == "slide"); - }); - if (slideObj.length == 1) { - goToSlide(slideObj[0].value); - } - } - - function getArrayOfHashParams() { - var hash = window.location.hash.replace('#', '').split('&'); - var paramsArr = new Array([]); - for (var i = 0; i < hash.length; i++) { - var itemArray = hash[i].split('='); - var action = new Object({}); - action.key = itemArray[0]; - action.value = itemArray[1]; - paramsArr.push(action); - } - return paramsArr; - } - - // Mouse wheel - jQuery(window).bind('mousewheel DOMMouseScroll', function(event){ - $slideshow.data('iswheel', true); - if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { - if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) { - // Scroll up - previousSlide(); - } else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) { - // scroll down - nextSlide(); - } - } - }); - - // Touch - jQuery(window).on("touchstart", function(ev) { - var e = ev.originalEvent; - $slideshow.data('touchYStart', e.touches[0].screenY); - $slideshow.data('touchXStart', e.touches[0].screenX); - $slideshow.data('touchYEnd', e.touches[0].screenY); - $slideshow.data('touchXEnd', e.touches[0].screenX); - }); - jQuery(window).on("touchmove", function(ev) { - var e = ev.originalEvent; - $slideshow.data('touchYEnd', e.touches[0].screenY); - $slideshow.data('touchXEnd', e.touches[0].screenX); - }); - jQuery(window).on("touchend", function(ev) { - $slideshow.data('iswheel', false); - var e = ev.originalEvent; - var diffX = $slideshow.data('touchXStart') - $slideshow.data('touchXEnd'); - var diffY = $slideshow.data('touchYStart') - $slideshow.data('touchYEnd'); - if ((!$slideshow.hasClass(ID.verticalClass) || isMobile) && Math.abs(diffX) > Math.abs(diffY)) { - if(diffX < -slideOffset) { - previousSlide(); - // Scroll up - } else if(diffX > slideOffset) { - // scroll down - nextSlide(); - } - } - }); - - // Tabs - jQuery('ul.tabs li').click(function(){ - var $this = jQuery(this); - var tab_id = $this.attr('data-tab'); - jQuery('ul.tabs li').removeClass('current'); - jQuery('.tab-content').removeClass('current'); - $this.addClass('current'); - jQuery("#"+tab_id).addClass('current'); - }); - - /* jQuery plugin */ - $.WebSlides = function () {}; - - /* Public goToSlide */ - $.WebSlides.goToSlide = goToSlide; - }); - - // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard - $(document).keypress(function(e) { - if(e.which == 13) { - $('body').toggleClass('baseline').css('height', $(document).height()); + // fire slide event + fireSlideEvent(); } + }; + + + /** + * Goes to a specific slide + * + * @param {number} slideNumber Where to go + */ + obj.goToSlide = function(slideNumber) { + // hide current slide + hideCurrentSlide(); + moveToSlide = slideNumber-1; + + $currentSlide = $slides.eq(moveToSlide); + $currentSlide.show().addClass(obj.settings.current); + jQuery('.slide:lt('+$currentSlide.index()+')').each(function() { + var $this = jQuery(this); + $this.siblings('.slide').last().after($this); + }); + slidePointer.current = slideNumber; + + // update counter + updateCounter(); + }; + + /** + * Fires slide event + */ + var fireSlideEvent = function(slide) { + var slideEvent = new window.CustomEvent('slidechanged', { + detail: { slide: slide || $currentSlide } + }); + window.dispatchEvent(slideEvent); + }; + + // Init plugin + init(options); + + // Return same object + return obj; +} + + +// I don't know what it does +jQuery(document).ready(function($){ + // Tabs + jQuery('ul.tabs li').click(function(){ + var $this = jQuery(this); + var tab_id = $this.attr('data-tab'); + jQuery('ul.tabs li').removeClass('current'); + jQuery('.tab-content').removeClass('current'); + $this.addClass('current'); + jQuery("#"+tab_id).addClass('current'); }); +}); + +// I don't know what it does +// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard +jQuery(document).keypress(function(e) { + if(e.which == 13) { + jQuery('body').toggleClass('baseline').css('height', $(document).height()); + } +});