1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 12:53:23 +02:00

Merge pull request #32 from fvalverd/master

Fixed the jumping between slides and added a jQuery public interface to do it
This commit is contained in:
José Luis Antúnez
2017-01-29 23:44:49 +01:00
committed by GitHub
2 changed files with 59 additions and 44 deletions

View File

@@ -20,7 +20,7 @@ jQuery(document).ready(function($){
previous : 'previous', previous : 'previous',
current : 'current', current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
} };
var easing = 'swing'; var easing = 'swing';
var slideOffset = 50; // minimun number of pixels for sliding var slideOffset = 50; // minimun number of pixels for sliding
var verticalDelay = 150; // to avoid 2 slides in a row var verticalDelay = 150; // to avoid 2 slides in a row
@@ -90,16 +90,15 @@ jQuery(document).ready(function($){
$slideshow.data('moving', false); $slideshow.data('moving', false);
var nextSlide = function() { var nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'}); jQuery('html').css({overflow: 'hidden'});
var nextSlide;
nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total); slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total; if (slidePointer.current === 0) slidePointer.current = total;
// show next slide // show next slide
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
@@ -134,7 +133,7 @@ jQuery(document).ready(function($){
hideCurrentSlide(); hideCurrentSlide();
// get the next slide // get the next slide
var nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
@@ -154,6 +153,7 @@ jQuery(document).ready(function($){
}; };
var previousSlide = function() { var previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
@@ -161,9 +161,9 @@ jQuery(document).ready(function($){
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
if (prevSlide.length == 0) return false; if (prevSlide.length === 0) return false;
// show next slide // show next slide
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
// scroll to next slide // scroll to next slide
@@ -202,7 +202,7 @@ jQuery(document).ready(function($){
// get the previous slide // get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
$currentSlide = prevSlide; $currentSlide = prevSlide;
@@ -226,19 +226,22 @@ jQuery(document).ready(function($){
$currentSlide = $slides.eq(moveToSlide); $currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(ID.current); $currentSlide.show().addClass(ID.current);
jQuery('.slide:lt('+(slideNumber-1)+')').each(function() {var $this = jQuery(this); $this.siblings('.slide').last().after($this); }); jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber; slidePointer.current = slideNumber;
// update counter // update counter
updateCounter(); updateCounter();
} };
var fireSlideEvent = function(slide) { var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', { var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide } detail: { slide: slide || $currentSlide }
}); });
window.dispatchEvent(slideEvent); window.dispatchEvent(slideEvent);
} };
/*** INIT SLIDESHOW ***/ /*** INIT SLIDESHOW ***/
@@ -275,7 +278,7 @@ jQuery(document).ready(function($){
// "previous" arrow clicked => previous slide // "previous" arrow clicked => previous slide
$previous.click( function(e){ $previous.click( function(e){
e.preventDefault(); e.preventDefault();
previousSlide() previousSlide();
}); });
// Add keyboard shortcuts for changing slides // Add keyboard shortcuts for changing slides
@@ -339,10 +342,10 @@ jQuery(document).ready(function($){
function getArrayOfHashParams() { function getArrayOfHashParams() {
var hash = window.location.hash.replace('#', '').split('&'); var hash = window.location.hash.replace('#', '').split('&');
var paramsArr = new Array(); var paramsArr = new Array([]);
for (var i = 0; i < hash.length; i++) { for (var i = 0; i < hash.length; i++) {
var itemArray = hash[i].split('='); var itemArray = hash[i].split('=');
var action = new Object(); var action = new Object({});
action.key = itemArray[0]; action.key = itemArray[0];
action.value = itemArray[1]; action.value = itemArray[1];
paramsArr.push(action); paramsArr.push(action);
@@ -358,8 +361,13 @@ jQuery(document).ready(function($){
jQuery('.tab-content').removeClass('current'); jQuery('.tab-content').removeClass('current');
$this.addClass('current'); $this.addClass('current');
jQuery("#"+tab_id).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 // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
@@ -368,4 +376,3 @@ jQuery(document).ready(function($){
$('body').toggleClass('baseline').css('height', $(document).height()); $('body').toggleClass('baseline').css('height', $(document).height());
} }
}); });

View File

@@ -20,7 +20,7 @@ jQuery(document).ready(function($){
previous : 'previous', previous : 'previous',
current : 'current', current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
} };
var easing = 'swing'; var easing = 'swing';
var slideOffset = 50; // minimun number of pixels for sliding var slideOffset = 50; // minimun number of pixels for sliding
var verticalDelay = 150; // to avoid 2 slides in a row var verticalDelay = 150; // to avoid 2 slides in a row
@@ -90,16 +90,15 @@ jQuery(document).ready(function($){
$slideshow.data('moving', false); $slideshow.data('moving', false);
var nextSlide = function() { var nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'}); jQuery('html').css({overflow: 'hidden'});
var nextSlide;
nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total); slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total; if (slidePointer.current === 0) slidePointer.current = total;
// show next slide // show next slide
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
@@ -134,7 +133,7 @@ jQuery(document).ready(function($){
hideCurrentSlide(); hideCurrentSlide();
// get the next slide // get the next slide
var nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
@@ -154,6 +153,7 @@ jQuery(document).ready(function($){
}; };
var previousSlide = function() { var previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
@@ -161,9 +161,9 @@ jQuery(document).ready(function($){
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
if (prevSlide.length == 0) return false; if (prevSlide.length === 0) return false;
// show next slide // show next slide
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
// scroll to next slide // scroll to next slide
@@ -202,7 +202,7 @@ jQuery(document).ready(function($){
// get the previous slide // get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
$currentSlide = prevSlide; $currentSlide = prevSlide;
@@ -226,19 +226,22 @@ jQuery(document).ready(function($){
$currentSlide = $slides.eq(moveToSlide); $currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(ID.current); $currentSlide.show().addClass(ID.current);
jQuery('.slide:lt('+(slideNumber-1)+')').each(function() {var $this = jQuery(this); $this.siblings('.slide').last().after($this); }); jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber; slidePointer.current = slideNumber;
// update counter // update counter
updateCounter(); updateCounter();
} };
var fireSlideEvent = function(slide) { var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', { var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide } detail: { slide: slide || $currentSlide }
}); });
window.dispatchEvent(slideEvent); window.dispatchEvent(slideEvent);
} };
/*** INIT SLIDESHOW ***/ /*** INIT SLIDESHOW ***/
@@ -275,7 +278,7 @@ jQuery(document).ready(function($){
// "previous" arrow clicked => previous slide // "previous" arrow clicked => previous slide
$previous.click( function(e){ $previous.click( function(e){
e.preventDefault(); e.preventDefault();
previousSlide() previousSlide();
}); });
// Add keyboard shortcuts for changing slides // Add keyboard shortcuts for changing slides
@@ -340,10 +343,10 @@ jQuery(document).ready(function($){
function getArrayOfHashParams() { function getArrayOfHashParams() {
var hash = window.location.hash.replace('#', '').split('&'); var hash = window.location.hash.replace('#', '').split('&');
var paramsArr = new Array(); var paramsArr = new Array([]);
for (var i = 0; i < hash.length; i++) { for (var i = 0; i < hash.length; i++) {
var itemArray = hash[i].split('='); var itemArray = hash[i].split('=');
var action = new Object(); var action = new Object({});
action.key = itemArray[0]; action.key = itemArray[0];
action.value = itemArray[1]; action.value = itemArray[1];
paramsArr.push(action); paramsArr.push(action);
@@ -402,8 +405,13 @@ jQuery(document).ready(function($){
jQuery('.tab-content').removeClass('current'); jQuery('.tab-content').removeClass('current');
$this.addClass('current'); $this.addClass('current');
jQuery("#"+tab_id).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 // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard