CODEWITHSUNDEEP
javascriptjqueryloopsslideshowsetinterval
vonUbisch
vonUbisch

Reputation: 1469

Infinite looping slideshow of HTML pages with jQuery

I'm trying to make a slideshow of HTML pages outputting to a screen 24/7. What I have works, but different slides need different intervals. How can I achieve this?

The output is fullscreen with a fixed footer which displays logo, some messages and the time.

jQuery

$(document).ready(function () {
    var div = $('#content'); // Target iFrame
    var slides = ['welcome','movie']; // Which slides
    var time = 5000; // Default interval
    var folder = 'slides'; // Folder where the HTML slides are
    var extension = 'html';
    var index = 1; // Skip first (0), already loaded by default SRC from iframe
    $.ajaxSetup({
        cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
    });
    function loop() {
        if (index === slides.length) { // If at end
            index = 0; // Start again
        }
        div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
        index++;
    }
    setInterval(function () {
        loop();
    }, time);
});

HTML

    <iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
    <div id="bar">
        <div class="row">
            <div class="col-lg-3">
                <img src="img/logo.png" alt="" id="logo">
            </div>
            <div class="col-lg-6">
                <div id="welcome">
                    Welcome <span>visitor</span>!
                </div>
            </div>
            <div class="col-lg-3">
                <div id="time"></div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 870

Answers (2)

Nirmal Patel
Nirmal Patel

Reputation: 5168

Using setTimeout and buttons to start and stop the loop.

http://jsfiddle.net/nirmaljpatel/75tmnmbq/

Upvotes: 1

Ramkumar
Ramkumar

Reputation: 191

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
</head>
<body>

	<div id="bar">
        <div class="row">
            <div class="col-lg-3">
                <img src="img/logo.png" alt="" id="logo">
            </div>
            <div class="col-lg-6">
                <div id="welcome">
                    Welcome <span>visitor</span>!
                </div>
            </div>
            <div class="col-lg-3">
                <div id="time"></div>
            </div>
        </div>
    </div>
	<div id="content"></div>

</body>
<script>
$(document).ready(function () {
    var div = $('#content'); // Target iFrame
    var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
	//var slideObj = JSON.parse(slides);
	//alert(slides);
    var time = 5000; // Default interval
    var folder = 'slides'; // Folder where the HTML slides are
    var extension = 'html';
    var index = 0; // Skip first (0), already loaded by default SRC from iframe
    $.ajaxSetup({
        cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
    });
    function loop() {
	        if (index == slides.length) { // If at end
		
            index = 0; // Start again
        }
        div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
        index++;
    }
	if(index==0)
	loop();
    setInterval(loop, slides[index].Time);
});
</script>
</html>

Upvotes: 1

Related Questions