Rollover images when mouseover

Question

I am trying to do a script to rollover a set of five different images when the mouse over. Similar to the fb galleries.

This is my try:

<script type="text/javascript">
$(document).ready(function(){
    $(".collectionThumb").mouseenter(function(){
        var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
        /*
        rotator :=
            Object {1: Array[5], 2: Array[5]}
                1: Array[5]
                0: "/images/picture_gallery/779cfee29cdd-img-5529.thumb.jpg"
                1: "/images/picture_gallery/43f561c548e6-img-5522.thumb.jpg"
                2: "/images/picture_gallery/28c56302e920-img-5527.thumb.jpg"
                3: "/images/picture_gallery/1a57472c9edf-img-5523.thumb.jpg"
                4: "/images/picture_gallery/0323ab8eb12c-img-5524.thumb.jpg"
                length: 5
                __proto__: Array[0]
                2: Array[5]
                0: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg"
                1: "/images/picture_gallery/859ae8584caf-img-5541.thumb.jpg"
                2: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg"
                3: "/images/picture_gallery/1522b44b2de8-img-5546.thumb.jpg"
                4: "/images/picture_gallery/ee1d7402c73f-img-5549.thumb.jpg"
                length: 5
                __proto__: Array[0]
                __proto__: Object
        */
        var collectionid = $(this).data('collectionid');
        for (var i = 0; i < rotator[collectionid].length; i++) {
            // get src for the next thumbnail to show
            var nextThumb = rotator[collectionid][i];
            replaceCollectionThumb(nextThumb, collectionid);
        }
    });
});

function replaceCollectionThumb(el, collectionid) { 
    setTimeout(function() { replaceThumb(el, collectionid); }, 1000); 
}
function replaceThumb(el, collectionid) {
    //console.log(el);
    $(".collectionThumb").each(function(i, v){
        if (collectionid == $(v).data('collectionid')) {
            //console.log($(v).data('collectionid'));
            var img = loadImage(el, 'title');
            $(v).children('img').remove();
            $(v).append(img.imgObj);
        }
    });
}
function loadImage(path, imgTitle, width, height) {
    if (undefined == width) width = 'auto';
    if (undefined == height) height = 'auto';
    var imgWidth;
    var imgHeight;
    var img = new Image();

    $(img).load(function() {
      $(this).width(width).height(height);
      imgWidth = $(this).width;
      imgHeight = $(this).height;
    });
    img.src = path;
    img.alt = imgTitle;

    var obj = new Object();
    obj.imgObj = img;
    obj.width = imgWidth;
    obj.height = imgHeight;

    return obj;
}
</script>

I am going to look for an existing solution, but I would like to understand what I am missing to make it work.

What is happening now is after all the timeouts happends, the image is replaced but the same image itself.

I was wondering when the timeout callback ends, refresh the image and after wait for a second, do the same with the following one, but I am seeing I have had a missunderstanding how it works.

Help/Comments?¿

Answer 1

In the case someone is looking for something similar here it is my solution:

<script type="text/javascript">
$(document).ready(function(){
    var indx = 0, numberOfFeatures = 4;
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
    var currentCollection = 1;
    var run = false;
    function imageRotate(){
        if (run) {
            indx++;
            if (indx > numberOfFeatures) { indx = 0; }
            var nextThumb = rotator[currentCollection][indx];
            var collectionSelector = 'collectionThumb-' + currentCollection;
            $('#'+collectionSelector+' img').attr('src',nextThumb);
            setTimeout( imageRotate , 800 );
        }
    }

    $(".collectionThumb").mouseenter(function(){
        currentCollection = $(this).data('collectionid');
        run = true;
        imageRotate();
    });

    $(".collectionThumb").mouseleave(function(){
        run = false;
        imageRotate();
    });
});

</script>

Because strange behavieur in transitions, I have moved to requestAnimationFrame approach. Here is my final solution:

<script type="text/javascript">
$(document).ready(function(){
    var indx = 1;
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
    var currentCollection = 1;
    var run = false;

    var globalID;
    var fps = 2;

    function photoRollover(){
        if (run) {
            setTimeout(function() {
                var numberOfFeatures = rotator[currentCollection].length - 1;
                if (indx > numberOfFeatures) { indx = 0; }
                var nextThumb = rotator[currentCollection][indx];
                var collectionSelector = 'collectionThumb-' + currentCollection;

                $('#'+collectionSelector+' img').attr('src',nextThumb);
                indx++;

                globalID = requestAnimationFrame(photoRollover);

            }, 3000 / fps );
        }
    }

    $(".collectionThumb").mouseenter(function(){
        run = true;
        currentCollection = $(this).data('collectionid');
        var collectionSelector = 'collectionThumb-' + currentCollection;
        var nextThumb = rotator[currentCollection][indx];
        $('#'+collectionSelector+' img').attr('src',nextThumb);
        indx++;
        globalID = requestAnimationFrame(photoRollover);
    });

    $(".collectionThumb").mouseleave(function(){
        run = false;
        cancelAnimationFrame(globalID);
    });

});

</script>