Skip to content

Instantly share code, notes, and snippets.

@Hamcha
Created October 7, 2012 14:32
Show Gist options
  • Save Hamcha/3848546 to your computer and use it in GitHub Desktop.
Save Hamcha/3848546 to your computer and use it in GitHub Desktop.
HTML5 Slideshow in Coffeescript / JS
############################
### Global Variables ###
############################
slides = []
curSlideIndex = 0
window.blockedIO = false
############################
### gotoSlide function ###
############################
gotoSlide = (newIndex, oldIndex) ->
# Sanitize the index #
newIndex = 0 if newIndex < 0
newIndex = slides.length - 1 if newIndex >= slides.length
# Set the new index to be "current" #
curSlideIndex = newIndex
# Stop all animations and scrollings #
$(slides[newIndex]).stop true, true
$(slides[oldIndex]).stop true, true if oldindex?
$("slideshow").stop true, true
# Fade out/in the old and new slides #
$(slides[newIndex]).animate { opacity: "1" }, 1500
$(slides[oldIndex]).animate { opacity: "0" }, 200 if oldIndex?
# Scroll to the new slide #
$("slideshow").scrollTo slides[newIndex], 1000, { easing: 'easeOutCubic' }
# Update the URL #
window.location.hash = "#" + (newIndex + 1)
# Update counter #
$("counter").html (newIndex + 1);
# Find if there's javascript to execute and "eval" it #
$(slides[newIndex]).find("javascript").each (index, element) ->
eval element.innerHTML
true
############################
### EntryPoint (onLoad) ###
############################
$(document).ready () ->
# Store all slides in a global array #
slides = document.getElementsByTagName "slide"
# Get anchor url id if specified #
startSlide = parseInt(window.location.hash.replace("#", ""), 10)
# Setup counter #
$("footer").html "<counter></counter> / " + slides.length
# Set start slide if specified otherwise go to Slide 0 #
curSlideIndex = if isNaN(startSlide) then 0 else (startSlide - 1)
gotoSlide curSlideIndex
true
############################
### On KeyPress Callback ###
############################
$(document).keyup (event) ->
return if window.blockedIO
switch event.keyCode
# Up / Left (Previous Slide) #
when 37, 38
break unless curSlideIndex > 0
gotoSlide (curSlideIndex - 1), curSlideIndex
# Right / Down (Next Slide) #
when 39, 40
break unless curSlideIndex < slides.length - 1
gotoSlide (curSlideIndex + 1), curSlideIndex
# F Key (Fullscreen) #
when 70
break if event.target isnt document.body or (event.shiftKey and event.metaKey)
# Request Fullscreen on Firefox #
document.mozFullScreen?(true) if document.mozFullScreen isnt on
# Request Fullscreen on Chrome/Safari (webkit) #
document.body.webkitRequestFullScreen?(true) if document.webkitRequestFullScreen isnt on
# Exit fullscreen if we were already on it #
document.cancelFullScreen() unless document.mozFullScreen isnt on or document.webkitRequestFullScreen isnt on
true
// Generated by CoffeeScript 1.3.3
/* Global Variables
*/
(function() {
var curSlideIndex, gotoSlide, slides;
slides = [];
curSlideIndex = 0;
window.blockedIO = false;
/* gotoSlide function
*/
gotoSlide = function(newIndex, oldIndex) {
if (newIndex < 0) {
newIndex = 0;
}
if (newIndex >= slides.length) {
newIndex = slides.length - 1;
}
curSlideIndex = newIndex;
$(slides[newIndex]).stop(true, true);
if (typeof oldindex !== "undefined" && oldindex !== null) {
$(slides[oldIndex]).stop(true, true);
}
$("slideshow").stop(true, true);
$(slides[newIndex]).animate({
opacity: "1"
}, 1500);
if (oldIndex != null) {
$(slides[oldIndex]).animate({
opacity: "0"
}, 200);
}
$("slideshow").scrollTo(slides[newIndex], 1000, {
easing: 'easeOutCubic'
});
window.location.hash = "#" + (newIndex + 1);
$("counter").html(newIndex + 1);
$(slides[newIndex]).find("javascript").each(function(index, element) {
return eval(element.innerHTML);
});
return true;
};
/* EntryPoint (onLoad)
*/
$(document).ready(function() {
var startSlide;
slides = document.getElementsByTagName("slide");
startSlide = parseInt(window.location.hash.replace("#", ""), 10);
$("footer").html("<counter></counter> / " + slides.length);
curSlideIndex = isNaN(startSlide) ? 0 : startSlide - 1;
gotoSlide(curSlideIndex);
return true;
});
/* On KeyPress Callback
*/
$(document).keyup(function(event) {
var _base;
if (window.blockedIO) {
return;
}
switch (event.keyCode) {
case 37:
case 38:
if (!(curSlideIndex > 0)) {
break;
}
gotoSlide(curSlideIndex - 1, curSlideIndex);
break;
case 39:
case 40:
if (!(curSlideIndex < slides.length - 1)) {
break;
}
gotoSlide(curSlideIndex + 1, curSlideIndex);
break;
case 70:
if (event.target !== document.body || (event.shiftKey && event.metaKey)) {
break;
}
if (document.mozFullScreen !== true) {
if (typeof document.mozFullScreen === "function") {
document.mozFullScreen(true);
}
}
if (document.webkitRequestFullScreen !== true) {
if (typeof (_base = document.body).webkitRequestFullScreen === "function") {
_base.webkitRequestFullScreen(true);
}
}
if (!(document.mozFullScreen !== true || document.webkitRequestFullScreen !== true)) {
document.cancelFullScreen();
}
}
return true;
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment