Question

I have a fancybox 2 on my webpage which shows an image automatically generated from a webcam at full size.

I refresh the image on the webpage using the following:

    //reload the images so they are always current
$(document).ready(function () {
    setInterval('reloadBackscatterImage()', 60000); // 60 seconds
});

function reloadBackscatterImage() {
    var src = $('#backscatter-img').attr('src');
    // check for existing ? and remove if found 
    var queryPos = src.indexOf('?');
    if (queryPos != -1) {
        src = src.substring(0, queryPos);
    }
    //generate a timestamp so we always get the latest image (break browser cache)
    var timestamp = new Date().getTime();
    $('#backscatter-img').attr('src', src + "?time=" + timestamp);
    $('#backscatter-link').attr('href', src + "?time=" + timestamp);


    return false; 
}

and the fancybox is currently initiated by:

$(document).ready(function () {
       $(".fancybox").fancybox();
   });

   $("#backscatter-link").fancybox({
       openEffect: 'elastic',
       closeEffect: 'elastic',

       helpers: {
           title: {
               type: 'inside'
           }
       }
   });

I need the image inside the fancybox to also refresh at the same time. How can I acheive this?

Answer 1

I have found that the following refreshes the image without closing and reopening the fancybox:

        if ($.fancybox.isOpened) {
        $(".fancybox-inner").find("img").attr('src', src + "?time=" + timestamp);
    }

which in my opinion works better than using the click event handler.