Last active
July 31, 2017 06:57
-
-
Save janjouketjalsma/bc894a0bb5d1cda87fa034547253d5ed to your computer and use it in GitHub Desktop.
A script syncing a slideshow accross devices using only the internal clock. Open this slideshow page on multiple computers and the slideshows will sync up!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Example of display</title> | |
| <style> | |
| body, html{ | |
| width:100%; | |
| height: 100%; | |
| margin:0 auto; | |
| } | |
| #slideshow { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .slide { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| background-color:white; | |
| padding:0; | |
| } | |
| </style> | |
| <script | |
| src="http://code.jquery.com/jquery-3.2.1.min.js" | |
| integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <ul id="slideshow"> | |
| <li class="slide" data-seconds="5">Hi! This slide will show for 5 seconds because of the data-time attribute.<div style="background-color:green;padding:10px;color:white;">A green div</div></li> | |
| <li class="slide" data-seconds="5">This is <b>HTML content</b><div style="background-color:yellow;padding:10px;color:white;">A yellow div</div></li> | |
| <li class="slide" data-seconds="5">there could be a div in here <div style="background-color:blue;padding:10px;color:white;">A blue div! This slide should show the default amount of seconds (10)</div></li> | |
| </ul> | |
| <script> | |
| /*global $,jQuery,console,window*/ | |
| (function ($) { | |
| var slideshow = (function () { | |
| var currentSlide = 0, | |
| i, | |
| j, | |
| defaultSlideTime = 10000, | |
| animationTime = 1000, | |
| slides = $("#slideshow > .slide"); | |
| for (i = 0, j = 9999; i < slides.length; i += 1, j -= 1) { | |
| $(slides[i]).css("z-index", j); | |
| } | |
| return { | |
| syncStart: function() { | |
| // Calculate total time of slideshow | |
| var slideShowTime = 0; | |
| for (slideIndex = 0; slideIndex < slides.length; slideIndex++) { | |
| slideShowTime += slideshow.slideTime(slideIndex); | |
| }; | |
| // Get the calculated position / time of the current iteration | |
| var midnight = new Date().setHours(0,0,0,0); | |
| var now = new Date().getTime(); | |
| var timeFromMidnight = now - midnight; | |
| var iterationsPassed = timeFromMidnight / slideShowTime; | |
| var currentIterationPosition = iterationsPassed - Math.floor(iterationsPassed); | |
| var currentIterationTime = slideShowTime * currentIterationPosition; | |
| // Convert the position to a slide index and nextSlideTimeOut | |
| var iterationTime = 0; | |
| var nextSlideTimeOut = 0; | |
| var currentSlideIndex; | |
| for (var slideIndex = 0; slideIndex < slides.length; slideIndex++) { | |
| var slideTime = slideshow.slideTime(slideIndex); | |
| iterationTime += slideTime; | |
| if (iterationTime > currentIterationTime) { | |
| currentSlideIndex = slideIndex; | |
| nextSlideTimeOut = iterationTime - currentIterationTime; | |
| break; | |
| } | |
| } | |
| // Set the current slide | |
| currentSlide = currentSlideIndex; | |
| // Ensure all passed slides have been hidden | |
| slides.slice(0, currentSlide).fadeOut(1000); | |
| // Enqueue the next slide | |
| window.setTimeout(function(){ | |
| slideshow.next(); | |
| }, nextSlideTimeOut); | |
| }, | |
| next: function () { | |
| if (currentSlide === (slides.length -1)) { | |
| // Enqueue show of first slide on calculated time | |
| slideshow.syncStart(); | |
| // Show the first slide | |
| slides.eq(0).css("left","-100%").show().animate({ | |
| "left": 0 | |
| }, animationTime, function(){ | |
| // Unhide the rest of the slides | |
| slides.slice(1).show(); | |
| }); | |
| currentSlide = 0; | |
| } else { | |
| // Show the next slide (by hiding the current one) | |
| slides.eq(currentSlide).animate({ | |
| left: "100%" | |
| }, animationTime, function(){ | |
| $(this).hide().css("left",0); | |
| }); | |
| currentSlide += 1; | |
| // Enqueue next slide after this slide is finished | |
| slideshow.enqueueNext(); | |
| } | |
| }, | |
| enqueueNext: function () { | |
| // Get duration of current slide | |
| var currentSlideDuration = slides.eq(currentSlide).data("seconds") * 1000 || defaultSlideTime; | |
| // Wait for duration of current slide before switching to the next | |
| window.setTimeout(slideshow.next, currentSlideDuration); | |
| }, | |
| slideTime: function (slideIndex) { | |
| return slides.eq(slideIndex).data("seconds") * 1000 || defaultSlideTime; | |
| } | |
| }; | |
| }()); | |
| slideshow.syncStart(); | |
| }(jQuery)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment