Question

I am working on creating an image gallery. When a user clicks on an image, I am trying to shuffle the other images in a given section by applying random top and left values. Most of this is working, except, when I click on the photo, the same random top and left values are applied to all of the photos in that section. I would like to apply a different random top and left value to the other photos in the section. Here is my code for generating and applying the values, thus far:

    //Move all the photos in the section
    function movePhotos() {
        var randomTop = Math.floor(Math.random() * 300) + 1;
        var randomLeft = Math.floor(Math.random() * 300) + 1;
        var photos = $(this).parent().find('.photo');

        photos.animate({ 'left': randomLeft, 'top': randomTop, }, 2000);
        $(this).stop().animate({ 'top': '0px', 'left': '100px' }).css({'position': 'absolute', 'z-index': '100000'});   
    };

        $('.full-size, .photo').click(movePhotos);

Answer 1

You should use the jQuery each function:

    //Move all the photos in the section
function movePhotos() {

    var photos = $(this).parent().find('.photo');

    photos.each(function(i,E){ 
        var randomTop = Math.floor(Math.random() * 300) + 1;
        var randomLeft = Math.floor(Math.random() * 300) + 1;
        $(E).animate({ 'left': randomLeft, 'top': randomTop, }, 2000);

    });   
    $(this).stop().animate({ 'top': '0px', 'left': '100px' }).css({'position': 'absolute', 'z-index': '100000'});
};