Question

I’m working on an image sharing site where you can create albums. Each of the albums is rendered out side by side and by default contains of four placeholder images. What I want is to replace these images with the first four images in the albums.

The thing is that an album can contain of only one image, and in these cases I want the rest of the placeholder images to remain as is. With the code below all the placeholder images is replaced, but in the cases where an album only contains of one (or two, or three) image, the rest of the images is replaced with “../images/undefined” (the rest of the code works fine and the albums first images is rendered out correctly).

What am I missing?

the js-code:

if ($('.hiddenAlbumNames').length > 0){

    $('.hiddenAlbumNames').each(function() {
        var i = 0;
        var value = $(this).val();
        var valueArray = value.split(',');

        $(this).parent().find('.albumThumbnail').each(function() {
            $(this).attr('src', '../images/' + valueArray[i]);
            i++;
        });
    });
};

the html-code: (this code is rendered out once for each album)

<div class="blog">
    <div class="post">
        <input class="hiddenAlbumNames" type="hidden" value="album.imageName") <- "album.imageName" is a node.js variable
        <div class="albumThumbnailArea">
            <img class="albumThumbnail" src='../img/bg.png'>
            <img class="albumThumbnail" src='../img/bg.png'>
            <img class="albumThumbnail" src='../img/bg.png'>
            <img class="albumThumbnail" src='../img/bg.png'>
        </div>
    </div>
</div>

Answer 1

Try:

    $(this).parent().find('.albumThumbnail').each(function() {
        if (i<valueArray.length) {
            $(this).attr('src', '../images/' + valueArray[i]);
            i++;
        } // else { ... something else ... }
    });