CODEWITHSUNDEEP
jqueryhtml
Patrick Lines-Mattei
Patrick Lines-Mattei

Reputation: 89

Cycling through image src's in jQuery

I have an array that contains single letter strings. I want to go through each string in the array, and have my site display a corresponding image for each letter to the user for a few seconds. In between each letter, a placeholder image should show for a few second.

I can get it working fine for showing each letter, but getting the placeholder to show up.

var messageArray = ["a", "b", "c"];

function displayImages(messageArray) {
    $.each(messageArray, function(index, value) {
        $('#activeImg').attr("src", "images/letters/placeholder.png");
        console.log("PLACEHOLDER");

        setTimeout(function() { 
            $('#activeImg').attr("src", "images/letters/placeholder-letter-" + value + ".png");
            console.log(value);
        },2000 + ( index * 2000 ) );
    });
}

EDIT: I believe I've got what I wanted to work with the below. It required adding a new function that created a new array with the order I wanted to display the images in.

function orderImages(messageArray) {
    var imagesArray = [];
    //Create a new array with the correct images to show in order
    $.each(messageArray, function(index, value) {
        imagesArray.push("images/letters/placeholder.png");
        imagesArray.push("images/letters/placeholder-letter-" + value + ".png");
    });
    displayImages(imagesArray);
}

function displayImages(imagesArray) {
    $.each(imagesArray, function(index, value) {
        setTimeout(function() { 
            $('#activeImg').attr("src", value);
        },1000 + ( index * 1000 ) );
    });
}

Upvotes: 0

Views: 63

Answers (2)

Patrick Lines-Mattei
Patrick Lines-Mattei

Reputation: 89

I believe I've got what I wanted to work with the below. It required adding a new function that created a new array with the order I wanted to display the images in.

function orderImages(messageArray) {
    var imagesArray = [];
    //Create a new array with the correct images to show in order
    $.each(messageArray, function(index, value) {
        imagesArray.push("images/letters/placeholder.png");
        imagesArray.push("images/letters/placeholder-letter-" + value + ".png");
    });
    displayImages(imagesArray);
}

function displayImages(imagesArray) {
    $.each(imagesArray, function(index, value) {
        setTimeout(function() { 
            $('#activeImg').attr("src", value);
        },1000 + ( index * 1000 ) );
    });
}

Upvotes: 0

Glubus
Glubus

Reputation: 2855

Your current function will foreach value in the messageArray set the source of #activeImage to the placeholder image, without any time in between them. This is not at all what you say you want. You basically set the placeholder 3 times before showing the first image, because the first image is shown after 2000 milliseconds.

This is the timeline of #activeImage:

  • Created with default source
  • Source updated with placeholder.png
  • Source updated with placeholder.png
  • Source updated with placeholder.png
  • Source updated with 'a'
  • Source updated with 'b'
  • Source updated with 'c'

What you need to do is toggle between showing the placeholder and another image.

var toggleIntermission = false;
var index = 0;
function updateImage() {
    if(toggleIntermission) {
        $("#activeImage").attr("src",<placeholderpath>);
    } else {
        $("#activeImage").attr("src", <imagepath> + index);
        index = (index + 1) % messageArray
    }

    toggleIntermission != toggleIntermission;
    setTimeout("updateImage()",2000);
}

This will make your image loop through the letters while putting the placeholder between each update, untill the end of time or untill you close the corresponding window, whichever comes first.

Upvotes: 1

Related Questions