< html >
< body > < script > function nxtSlide() { Slides.next();
}
function openTour() {
}
var Slides = {
container: $('#slides'),
totalSlides: ,
translateAmount: 0,
currentSlide: 0,
slideWidth: ,
slideArray: ['
\n' +
'
',
'<img class="gtBubble" src="images/s0.png" alt="Smiley face" onclick="" />
\n' +
'<img class="gtContent" src="images/team.jpeg" alt="Smiley face" onclick="" />
\n ' +
'\n' +
'
',
<img class="gtBubble" src="images/s1.png" alt="Smiley face" onclick="" />
\n' +
' <img class="gtContent" src="images/s1c.png" alt="Smiley face" onclick="" />
\n ' +
'],
init: function (totalSlides) { var each;
if (!totalSlides) throw new Error('Please pass the total number of slides.'); Slides.totalSlides = totalSlides;
Slides.loadContent();
each = Slides.container.children('div');
// Determine the width of our canvas Slides.slideWidth = each.height() + (parseInt(each.css('margin-bottom'), 10));
Slides.keyPress(); Slides.keyDown(); },
loadContent: function () { Slides.container.hide(); for (var i = 0; i < Slides.totalSlides; i++) {$('')
// .load('slides/' + i + '.html') .html(Slides.slideArray[i]) .appendTo(Slides.container); } Slides.container.show(); },
keyDown: function () { console.log("keydown func"); $(document.body).keydown(function (evt) { // console.log(evt); var e = evt || window.event; console.log("key:", e.keyCode); // if left or right arrow key is pressed if (e.keyCode === 39 || e.keyCode === 37) { e.preventDefault(); (e.keyCode === 39) ? Slides.next(): Slides.prev(); } }); },
keyPress: function () { console.log("keypress func"); $(document.body).keypress(function (evt) { // console.log(evt); var e = evt || window.event; console.log("key:", e.keyCode); // if left or right arrow key is pressed if (e.keyCode === 39 || e.keyCode === 37) { e.preventDefault(); (e.keyCode === 39) ? Slides.next(): Slides.prev(); } }); },
next: function () { console.log(Slides.totalSlides, Slides.currentSlide); if (Slides.currentSlide + 1 != Slides.totalSlides) { Slides.translateAmount -= Slides.slideWidth; Slides.updateHash(++Slides.currentSlide); Slides.animate(); } },
prev: function () { // No more left to go back. if (Slides.translateAmount === 0) return;
Slides.translateAmount += Slides.slideWidth; Slides.updateHash(--Slides.currentSlide); Slides.animate(); },
animate: function () { Slides .container .children() .css({ '-webkit-transform': 'translateY(' + Slides.translateAmount + 'px)', 'transform': 'translateY(' + Slides.translateAmount + 'px)' });
},
updateHash: function (direction) { // Update current Slides and hash. location.hash = '#slide-' + Slides.currentSlide; }
};
// All right; let's do this. Slides.init(13);
< /script>
< /body> < /html>