Question

I am trying to use a jQuery based Photo Stack which uses the following codes:

$ps_albums.children('div').bind('click',function(){
    var $elem = $(this);
    var album_name = 'album' + parseInt($elem.index() + 1);
    //alert(album_name);
    var $loading     = $('<div />',{className:'loading'}); 
    $elem.append($loading);
    $ps_container.find('img').remove();
    $.get('corrective.php', {album_name:album_name} , function(data) {
        var items_count    = data.length;
        for(var i = 0; i < items_count; ++i) {
            var item_source = data[i];
            //alert(item_source);
            var cnt = 0;
            $('<img />').load(function(){
                var $image = $(this);
                ++cnt;
                resizeCenterImage($image);
                $ps_container.append($image);
                var r = Math.floor(Math.random()*41)-20;
                if(cnt < items_count) {
                    $image.css({
                        '-moz-transform'    :'rotate('+r+'deg)',
                        '-webkit-transform'    :'rotate('+r+'deg)',
                        'transform'            :'rotate('+r+'deg)'
                    });
                }
                if(cnt == items_count){
                    $loading.remove();
                    $ps_container.show();
                    $ps_close.show();
                    $ps_overlay.show();
                }
            }).attr('src',item_source);
        }
    },'json');
});

The coorective.php is as follows:

$location   = 'corrective';
$album_name = $_GET['album_name'];
$files      = glob($location . '/' . $album_name . '/*.{jpg,gif,png}', GLOB_BRACE);
$encoded    = json_encode($files);
echo $encoded;
unset($encoded);

The above javascript code shows images from the album in random order which is probably triggered by the line:

var r = Math.floor(Math.random()*41)-20;

I have changed this to:

var r = "";

Now, when the images are loaded for the first time, they are still displaying in random orders but one the second load they follow a sequential display e.g. 0001.jpg, 0002.jpg, 0003.jpg and so on.

How can I display the sequential order every time the images are loaded – even the first time?

Answer 1

I think the problem is the fact you append the image to the container only after is was loaded, resulting in random order indeed depending on server load and what image finished to load first. The second time, images are taken from cache.

To fix this, change this whole block of code:

$('<img />').load(function(){
    var $image = $(this);
    ++cnt;
    resizeCenterImage($image);
    $ps_container.append($image);
    var r = Math.floor(Math.random()*41)-20;
    if(cnt < items_count) {
        $image.css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
        });
    }
    if(cnt == items_count){
        $loading.remove();
        $ps_container.show();
        $ps_close.show();
        $ps_overlay.show();
    }
}).attr('src',item_source);

To this instead:

var $image = $('<img />').attr('src',item_source);
$ps_container.append($image);
$image.load(function() {
    var $image = $(this);
    ++cnt;
    resizeCenterImage($image);
    if(cnt == items_count){
        $loading.remove();
        $ps_container.show();
        $ps_close.show();
        $ps_overlay.show();
    }
});

This also removed the random rotation that you don’t want.