CODEWITHSUNDEEP
javascriptjquery
user1062058
user1062058

Reputation: 275

JavaScript Photo Slider

I'm working on making a JS script that will go in the header div and display a few pictures. I looked into JQuery Cycle, but it was out of my league. The code I wrote below freezes the browser, should I be using the for loop with the timer var?

<script type="text/JavaScript" language="JavaScript">
var timer;
for (timer = 0; timer < 11; timer++) {
    if (timer = 0) { 
    document.write('<img src="images/one.png">');
    }

    if (timer = 5) {
    document.write('<img src="images/two.png">');
    } 

    if (timer = 10) {
    document.write('<img src="images/three.png">');
    } 
}   
</script>

Thanks!

Upvotes: 1

Views: 755

Answers (4)

Ryan Leonard
Ryan Leonard

Reputation: 997

How about just running the script after the page loads?

<script>
// in <head> //
function load() {
    var headDiv = document.getElementById("head");
    var images = ["images/one.png", "images/two.png"];
    for(var i = 0; i<images.length; i++) {
        image = document.createElement("img");
        image.src = images[i];
        headDiv.appendChild(image);
    }
}
</script>

Then use <body onload="load();"> to run the script.

Edit To add in a delay loading images, I rewrote the code:

<script>
// in <head> //
var displayOnLoad = true; // Set to true to load the first image when the script runs, otherwise set to false to delay before loading the first image
var delay = 2.5; // seconds to delay between loading images
function loadImage(url) {
    image = document.createElement("img");
    image.src = images[i];
    headDiv.appendChild(image);
}
function load() {
    var headDiv = document.getElementById("head");
    var images = ["images/one.png", "images/two.png"];
    for(var i = 0; i<images.length; i++) {
        setTimeout(loadImage(images[i]), (i+displayOnLoad)*(delay*1000));
    }
}
</script>

Set displayOnLoad = false; if you want to wait the specified delay before loading the first image. The delay is set in seconds. I recommend waiting over a single second between images, as they may take some time to download (depending on the user's internet speed).

As with the first snippet, I haven't tested the code, so please tell me if an error occurs, and I will take a look.

Upvotes: 2

j08691
j08691

Reputation: 207861

Assuming you want a script to rotate images and not just write them to the page as your code will do, you can use something like this:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
<div id="target"></div>
<script>
var ary = ["images/one.png","images/two.png","images/three.png"];
var target = document.getElementById("target");
setInterval(function(){
    target.innerHTML = "<img src=\""+ary[0]+"\" />";
    ary.push(ary.shift());
},2000);
</script>

</body>
</html>

Of course the above code has no effects (like fading) which jQuery will give yous, but it also doesn't require loading the entire jQuery library for something so basic.

Upvotes: 4

dgvid
dgvid

Reputation: 26633

Since you used the jquery tag on your question, I assume you are OK with using jQuery. In which case, you can do something like this:

In your static HTML, include the img tag and set its id to something (in my example, it's set to myImg) and set its src attribute to the first image, e.g.:

<img id="myImg" src="images/one.png">

Next, use jQuery to delay execution of your script until the page has finished loading, then use setTimeout to create a further delay so that the user can actually spend a few seconds looking at the image before it changes:

<script>
var imgTimeoutMsecs = 5000; // Five seconds between image cycles

$(function() {
   // Document is ready
   setTimeout(function() {
           // We will get here after the first timer expires.
           // Change the image src property of the existing img element.
           $("#myImg").prop("src", "images/two.png");

           setTimeout(function() {
                   // We will get here after the second, nested, timer expires.
                   // Again, change the image src property of the existing img element.
                   $("#myImg").prop("src", "images/three.png");
               }, imgTimeoutMsecs);
       }, imgTimeoutMsecs);
});
</script>

Of course, that approach doesn't scale very well, so if you are using more than three images total, you want to modify the approach to something like this:

var imgTimeoutMsecs = 5000; // Five seconds between image cycles
// Array of img src attributes.
var images = [
                 "images/one.png",
                 "images/two.png",
                 "images/three.png",
                 "images/four.png",
                 "images/five.png",
             ];
// Index into images array.
var iCurrentImage = 0;

function cycleImage() {
    // Increment to the next image, or wrap around.
    if (iCurrentImage >= images.length) {
        iCurrentImage = 0;
    }
    else {
        iCurrentImage += 1;
    }
    $("#myImg").prop("src", images[iCurrentImage]);

   // Reset the timer.
   setTimeout(cycleImages, imgTimeoutMsecs);
}

$(function() {
   // Document is ready.
   // Cycle images for as long as the page is loaded.
   setTimeout(cycleImages, imgTimeoutMsecs);
});

There are many improvements that can be made to that example. For instance, you could slightly simplify this code by using setInterval instead of setTimer.

Upvotes: 1

IsisCode
IsisCode

Reputation: 2490

The code you've provided simply iterates through the for loop, writing the images to the browser as it does so. I suggest you take a look at JavaScript setTimeout function. JS Timing

Upvotes: 0

Related Questions