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.

Answer 2

As far as deleting and replacing files goes, you'd have to do that server side. You didn't mention a server language, so I suggest opening that up in a different question. Once you have that figured out, you can have your script poll the server for updates using ajax.

The query would look (something) like this:

 refreshShow = function() {
    $.ajax({
      url: 'imagefeed.json',
      dataType: 'json',
      type: 'post',
      data: {
        gallery: 'homeGallery'
      },
      success: function(data) {
        $('#homeGallery img').remove();
        $.each(data, function(i, image){
          $('#homeGallery').append(
            $('<img />').attr('href', image.path)
          )
        });
      }
    });
  };

Then your poll:

$(function(){
  setTimeout(function(){ refreshShow() }, 30000); //polls every 30 seconds for updates
});

Where a JSON feed would feed up some paths, maybe captions as well. You can find a whole bunch of questions on SO on creating JSON output in different languages. Keep in mind this is example code, and most slideshows are slightly more complex than this.