mirror of
https://github.com/webslides/WebSlides.git
synced 2025-09-02 17:42:45 +02:00
Transform to javascript object
This commit is contained in:
Luis
@@ -1939,6 +1939,9 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var slide = jQuery('#webslides').webslides();
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -3132,6 +3132,9 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var slide = jQuery('#webslides').webslides();
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -849,6 +849,9 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var slide = jQuery('#webslides').webslides();
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1924,5 +1924,9 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var slide = jQuery('#webslides').webslides();
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1864,6 +1864,9 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var slide = jQuery('#webslides').webslides();
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -66,6 +66,7 @@
|
|||||||
<!-- Android -->
|
<!-- Android -->
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="theme-color" content="#333333">
|
<meta name="theme-color" content="#333333">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
@@ -344,6 +345,9 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var slide = jQuery('#webslides').webslides();
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -9,137 +9,343 @@ Based on SimpleSlides, by Jenn Schiffer:
|
|||||||
https://github.com/jennschiffer/SimpleSlides
|
https://github.com/jennschiffer/SimpleSlides
|
||||||
==================================================================== */
|
==================================================================== */
|
||||||
|
|
||||||
jQuery(document).ready(function($){
|
jQuery.fn.webslides = function(options) {
|
||||||
|
|
||||||
var ID = {
|
var obj = {};
|
||||||
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 $slideshow = jQuery('#' + ID.slideshow),
|
// Private vars
|
||||||
$navigation = jQuery('<div>').attr('id','navigation'),
|
var easing = 'swing';
|
||||||
$slides = $slideshow.children('section').addClass(ID.slide),
|
var slideOffset = 50; // minimun number of pixels for sliding
|
||||||
$currentSlide,
|
var verticalDelay = 150; // to avoid 2 slides in a row
|
||||||
$firstSlide = $slides.first(),
|
var wheelDetail = -3; // how far the wheel turned for Firefox
|
||||||
$lastSlide = $slides.last(),
|
var wheelDelta = 150; // how far the wheel turned for Chrome
|
||||||
$auxSlide = null;
|
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 = {
|
var total = 0;
|
||||||
next : $slideshow.hasClass(ID.verticalClass)?'↓':'→',
|
|
||||||
previous : $slideshow.hasClass(ID.verticalClass)?'↑':'←',
|
var labels = {};
|
||||||
separator : ' / '
|
|
||||||
};
|
/**
|
||||||
|
* 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('<div>').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( '<style> .slide:nth-child(' + total + ') { page-break-after: auto }</style>' );
|
||||||
|
|
||||||
|
// remove non-section children (like html comments which wp wraps in <p> tags)
|
||||||
|
$slideshow.children().not('section').remove();
|
||||||
|
|
||||||
|
// add navigational arrows and counter
|
||||||
|
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',obj.settings.previous).html(labels.previous));
|
||||||
|
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',obj.settings.next).html(labels.next));
|
||||||
|
$slideshow.append($navigation);
|
||||||
|
$slideshow.append(jQuery('<span>').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( '<style> .slide:nth-child(' + total + ') { page-break-after: auto }</style>' );
|
* Init keypress events
|
||||||
|
*/
|
||||||
// remove non-section children (like html comments which wp wraps in <p> tags)
|
var initKeyEvents = function() {
|
||||||
$slideshow.children().not('section').remove();
|
// Add keyboard shortcuts for changing slides
|
||||||
|
jQuery(document).keydown(function(e){
|
||||||
// add navigational arrows and counter
|
if (!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) {
|
||||||
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.previous).html(labels.previous));
|
$slideshow.data('iswheel', false);
|
||||||
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.next).html(labels.next));
|
if (e.which == 39 || e.which == 32) {
|
||||||
$slideshow.append($navigation);
|
// right key pressed => next slide
|
||||||
$slideshow.append(jQuery('<span>').attr('id',ID.counter));
|
obj.nextSlide();
|
||||||
|
return false;
|
||||||
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('#'));
|
|
||||||
}
|
}
|
||||||
|
else if (e.which == 37) {
|
||||||
history.pushState(null, null, '#slide='+ slidePointer.current );
|
// left or l key pressed => previous slide
|
||||||
};
|
obj.previousSlide();
|
||||||
|
return false;
|
||||||
var hideCurrentSlide = function() {
|
|
||||||
// hide the current slide
|
|
||||||
if ( $currentSlide ) {
|
|
||||||
$currentSlide.hide().removeClass(ID.current);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$slideshow.data('moving', false);
|
// Add keyboard shortcuts for changing slides
|
||||||
var nextSlide = function() {
|
jQuery(document).keydown(function(e){
|
||||||
var nextSlide;
|
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) {
|
||||||
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
|
$slideshow.data('iswheel', false);
|
||||||
if ($slideshow.data('moving')) return;
|
if (e.which == 40 || e.which == 32) {
|
||||||
$slideshow.data('moving', true);
|
// right key pressed => next slide
|
||||||
jQuery('html').css({overflow: 'hidden'});
|
obj.nextSlide();
|
||||||
|
return false;
|
||||||
nextSlide = $currentSlide.next();
|
}
|
||||||
slidePointer.current = ((slidePointer.current+1)%total);
|
else if (e.which == 38) {
|
||||||
if (slidePointer.current === 0) slidePointer.current = total;
|
// left or l key pressed => previous slide
|
||||||
|
obj.previousSlide();
|
||||||
// show next slide
|
return false;
|
||||||
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;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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);
|
* Init touch events
|
||||||
// hide current slide
|
*/
|
||||||
hideCurrentSlide();
|
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.siblings('.slide').last().after($currentSlide);
|
||||||
$currentSlide = nextSlide;
|
$currentSlide = nextSlide;
|
||||||
slidePointer.current = ((slidePointer.current+1)%total);
|
|
||||||
if (slidePointer.current == 0) slidePointer.current = total;
|
|
||||||
|
|
||||||
// update counter
|
// update counter
|
||||||
updateCounter();
|
updateCounter();
|
||||||
@@ -149,274 +355,163 @@ jQuery(document).ready(function($){
|
|||||||
|
|
||||||
// fire slide event
|
// fire slide event
|
||||||
fireSlideEvent();
|
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() {
|
// get the next slide
|
||||||
var prevSlide;
|
nextSlide = $currentSlide.next();
|
||||||
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
|
|
||||||
if ($slideshow.data('moving')) return;
|
|
||||||
$slideshow.data('moving', true);
|
|
||||||
jQuery('html').css({overflow: 'hidden'});
|
|
||||||
|
|
||||||
$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;
|
// update url
|
||||||
// show next slide
|
updateURL();
|
||||||
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;
|
|
||||||
|
|
||||||
// not the last slide => go to the next one and increment the counter
|
// fire slide event
|
||||||
$currentSlide = prevSlide;
|
fireSlideEvent();
|
||||||
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 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
|
$currentSlide.before($currentSlide.siblings('.slide').last());
|
||||||
updateURL();
|
|
||||||
|
|
||||||
// fire slide event
|
prevSlide = $currentSlide.prev();
|
||||||
fireSlideEvent();
|
|
||||||
|
|
||||||
jQuery('html').css({overflow: 'auto'});
|
if (prevSlide.length === 0) return false;
|
||||||
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
|
// show next slide
|
||||||
}
|
prevSlide.show().addClass(obj.settings.current);
|
||||||
animated = true;
|
// 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;
|
||||||
|
|
||||||
|
// not the last slide => go to the next one and increment the counter
|
||||||
|
|
||||||
} 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);
|
|
||||||
$currentSlide = prevSlide;
|
$currentSlide = prevSlide;
|
||||||
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
|
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
|
||||||
|
|
||||||
// update counter
|
// update counter
|
||||||
updateCounter();
|
updateCounter();
|
||||||
|
|
||||||
// update URL
|
// update url
|
||||||
updateURL();
|
updateURL();
|
||||||
|
|
||||||
// fire slide event
|
// fire slide event
|
||||||
fireSlideEvent();
|
fireSlideEvent();
|
||||||
|
|
||||||
|
jQuery('html').css({overflow: 'auto'});
|
||||||
|
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
|
||||||
}
|
}
|
||||||
};
|
animated = true;
|
||||||
|
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// "previous" arrow clicked => previous slide
|
} else { // Is landscape
|
||||||
$previous.click( function(e){
|
jQuery("html, body").animate({ scrollTop: 0 }, 0);
|
||||||
e.preventDefault();
|
// hide current slide
|
||||||
previousSlide();
|
hideCurrentSlide();
|
||||||
});
|
|
||||||
|
|
||||||
// Add keyboard shortcuts for changing slides
|
// get the previous slide
|
||||||
jQuery(document).keydown(function(e){
|
$currentSlide.before($currentSlide.siblings('.slide').last());
|
||||||
if (!$slideshow.hasClass(ID.verticalClass) || isMobile) {
|
prevSlide = $currentSlide.prev();
|
||||||
$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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add keyboard shortcuts for changing slides
|
prevSlide.show().addClass(obj.settings.current);
|
||||||
jQuery(document).keydown(function(e){
|
$currentSlide = prevSlide;
|
||||||
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) {
|
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
|
||||||
$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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// update counter
|
||||||
|
updateCounter();
|
||||||
|
|
||||||
/**
|
// update URL
|
||||||
* Bind the event HashChange when the prev/next history button was clicked
|
updateURL();
|
||||||
*/
|
|
||||||
jQuery(window).bind("hashchange", function () {
|
|
||||||
if (hasHash()) {
|
|
||||||
goToSlideIfSlideHashChange();
|
|
||||||
} else {
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function hasHash() {
|
// fire slide event
|
||||||
return window.location.hash ? true : false;
|
fireSlideEvent();
|
||||||
}
|
|
||||||
|
|
||||||
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());
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user