Automatic slideshow with PHP and JavaScript

Question

So basically i have made a PHP program that takes pictures from a folder and puts it into the "slideshow" in Gallery. The PHP code gives the images id's starting from "1" and so on.

Now with JavaScript i want it to automatically switch picture every 2,5 second. It actually runs as i want it to in my Firebug Script, but nothing happens in the browser. I already posted my JavaScript link in the bottom of the HTML body, and it doesn't help.

Any help would be appreciated.

<div id="gallery" class="grey">
    <h3>Gallery</h3>
    <div id="slideshow">
        <?php
    $path = "./img/gallery";
    $all_files = scandir($path);
    $how_many = count($all_files);
        for ($i=2; $i<$how_many;$i++) {
            $kubi=$i - 1;
            echo "<img src=\"./img/gallery/$all_files[$i]\" id= \"$kubi\"/>";
        }
    ?>
    </div>
</div>

JavaScript code:

var picture = document.getElementById("1");
var i = 0;
function rotateImages() {
    while (i < document.getElementById("slideshow").childNodes.length) {
        picture.style.display = "none";
            picture = picture.nextSibling;
            picture.style.display = "inline";
            i++;
    };
};

window.onload = function(){
document.getElementById("1").style.display = "inline";
setInterval(rotateImages(), 2500);
};

yanivel · Accepted Answer · 2015-02-26 15:13:01Z

2

What happens is that always uses the same first element picture, hides it and then shows the second image, it does not actually iterate through all the pictures.

In your code, picture always is the first element, next is always the second.

Also, it should not be a while loop since the callback is called once to change a picture, so change it to if, and reset to the first picture when it passes number of total elements.

It should be: (Javascript)

var firstPicture = document.getElementById("1");
var picture = firstPicture ;
var i = 0;
function rotateImages() {
    // hide current element
    picture.style.display = "none";

    // choose who is the next element
    if (i >= document.getElementById("slideshow").childNodes.length) {
        i = 0;
        picture = firstPicture;
    } else {
        picture = picture.nextSibling;
    }

    // show the next element
    picture.style.display = "inline";
    i++;
};

window.onload = function(){
var curImg = document.getElementById("1").style.display = "inline";
setInterval(rotateImages, 2500);
};

edited Feb 26, 2015 at 15:13

answered Feb 26, 2015 at 13:19

yanivel

593 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cayce K Over a year ago

I kept running this same thought in my head but thinking myself out of it. You are absolutely right.

user4581668 Over a year ago

Thanks for the code, and your help. However for some reason the code just skips at the window.onload part. It doesn't actually run the code inside. Do you know why this might be?

yanivel Over a year ago

change setInterval(rotateImages(), 2500); to setInterval(rotateImages, 2500); . Using () after the function will call it, but you need to send the function object itself. I also edited the answer.

user4581668 Over a year ago

Nevermind i got it to work. I just removed the "()" after rotateImages in the setInterval. Thank you so much for your help!

user4581668 Over a year ago

Lol, just saw your comment, perfect timing ;)

Collectives™ on Stack Overflow

Automatic slideshow with PHP and JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related