Difference between revisions of "Team:Freiburg/Gt"
(Created page with "{{Freiburg/GtScript}} <html> <head> <meta charset="utf-8"> <title>Spori Tour</title> <style> .wrap { position: relative; top: 40px; margin: auto; widt...") |
|||
| Line 1: | Line 1: | ||
| − | |||
<html> | <html> | ||
| Line 145: | Line 144: | ||
</div> | </div> | ||
| + | <script> | ||
| + | var Slides = { | ||
| + | container: $('#slides'), | ||
| + | |||
| + | totalSlides: '', | ||
| + | |||
| + | translateAmount: 0, | ||
| + | |||
| + | currentSlide: 0, | ||
| + | |||
| + | slideWidth: '', | ||
| + | |||
| + | slideArray: [ | ||
| + | '<div>\n' + | ||
| + | '<div class="image"><img class="gtBubble" src="images/s0.png" alt="Smiley face" onclick="" /></div>\n' + | ||
| + | '<div class="image"><img class="gtContent" src="images/team.jpeg" alt="Smiley face" onclick="" /></div>\n ' + | ||
| + | '</div>', | ||
| + | |||
| + | '<div>\n' + | ||
| + | '<div class="image"> <img class="gtBubble" src="images/s1.png" alt="Smiley face" onclick="" /></div>\n' + | ||
| + | '<div class="image"> <img class="gtContent" src="images/s1c.png" alt="Smiley face" onclick="" /> </div>\n ' + | ||
| + | '</div>', | ||
| + | ], | ||
| + | |||
| + | 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++) { | ||
| + | $('<div id="#slide-' + i + '"></div>') | ||
| + | // .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; | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | Slides.init(13); | ||
| + | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 07:50, 14 October 2016
