Dynamically Updated Image Rotator in jQuery/HTML5

Question

So I understand there are many free image rotators, etc, out there using things like jQuery. My issue however, is it there a way to dynamically update the image rotator without refreshing the site page?

So basically you are displaying ten images then 1 hour later you have a script delete the old images add ten new images and a new xml file, do you need to do a refresh of the page? Or does the script always dynamically check the xml file, so you don't have to do a refresh.

p.s. it doesn't have to be in jQuery, could be HTML5 or the likes - I just want to be able to add and remove images from a folder, and have the rotator automatically update to use what's in the folder

Answer 1

I think it's best, if at all possible, to operate on the gallery without doing anything that might make it necessary to re-initialise it. The approach below seeks to achieve this aim by replacing the gallery images without replacing the img nodes themselves.

First, let's assume that the server-side code is up and working and returns, by whatever means, json that when decoded is equivalent to:

[
    "images/aaa.jpg",
    "images/bbb.jpg",
    "images/ccc.jpg",
    "images/ddd.jpg",
    "images/eee.jpg",
    etc.
]

Then:

$(function(){
    var $galleryImgs = $('#myGallery img');//gallery img nodes in a jQuery wrapper.
    var updateGallery = function() {
        $.ajax({
            url: 'getImageUrls.php', //or whatever
            data: {
                n: $galleryImgs.length //specify how many new image urls to fetch
            },
            dataType: 'json',
            success: function(data) {
                $.each(data, function(i, url) {
                    if($galleryImgs[i]) { //safety
                        $galleryImgs[i].src = url; //replace each gallery image in turn
                    }
                });
            }
        });
    };
    var galleryInterval = setInterval(updateGallery, 60*60*1000);//60*60*1000 for one hour; 30*60*1000 for half an hour
});

Thus, the gallery plugin will (hopefully) continue its rotation blissfully unaware that it's images have been changed. Some gallery plugins may be more amenable to this than others - experimentation necessary.