Question

I have a folder with images in it and I’m loading those images using jQuery. This code:

$(function () {
    var i=1;
    for (i=1;i<=50;i++){
        var curImg = "blog/wp-content/uploads/" + i + ".jpg";
        var img = new Image();         
        $(img).load(function () {                                 
             $(this).hide();
             $('#loader').removeClass('loading')
                         .append(this);
             $(this).fadeIn();
         }).error(function () {})                            
         .attr('src', ''+curImg+'');                    
    }
});

works fine for smoothly loading 50 images from this folder. I am trying to do 2 things:

1. I want to add a link like this: <a href='blog/wp-content/uploads/" + i + ".jpg' class='picLink'> to each individual image. I have tried using .wrap in my .load function here, but that isn’t working for me. This just creates a nest of links (e.g. <a><a></a></a>).
2. Currently this finds the first 50 photo’s, starting at number 1, and loads them. But if more photo’s are added they won’t be found, and the oldest will always be first. I would like it to find all photo’s in the folder and print the newest (highest number) first. It can be presumed that there won’t be more than, say, 4000 photo’s. So would it be possible to do this loop in reverse, start at 4000, check if that photo exists and work down and just load photo’s that exist in the folder?

Thanks in advance for any help, I hope the question is clear enough!

Answer 1

For 1. you can do something like this fiddle

$(function () {
    var i=1;
    for (i=1;i<=50;i++){
        var curImg = "blog/wp-content/uploads/" + i + ".jpg";
        var img = new Image();         
        $(img).load(function () {                                 
             $(this).hide();
             $('#loader').removeClass('loading')
                         .append($('<a href="'+this.src+'"></a>').append(this));
             $(this).fadeIn();
         }).error(function () {})                            
         .attr('src', ''+curImg+'');                    
    }
});

Also they may not be in order as some images may take longer to load than others.

For 2. I think you should get the image count server-side and inject it into the for loop something like,

for (i=<?php echo $count; ?>; i > <?php echo ($count>50?$count-50:0); ?>; i--){

assuming you’re using php, where $count represents the amount of images in the folder.