Обновление изображения fancybox 2

Question

У меня есть fancybox 2 на моей веб-странице, который показывает изображение, автоматически сгенерированное с веб-камеры в полном размере.

Я обновляю изображение на веб-странице, используя следующее:

    //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; 
}

и fancybox в настоящее время инициируется:

$(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. Как я могу достичь этого?

Answer 1

Я обнаружил, что следующее обновляет изображение, не закрывая и не открывая заново fancybox:

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

что, на мой взгляд, работает лучше, чем использование обработчика события click.

Answer 2

Во-первых, ваша инициализация fancybox должна быть внутри $(document).ready() лайк

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

   $("#backscatter-link").fancybox({
       openEffect: 'elastic',
       closeEffect: 'elastic',
       helpers: {
           title: {
               type: 'inside'
           }
       }
   }); // fancybox
}); // ready

(таким образом вы привязываете fancybox к элементу с помощью id="backscatter-link" И ко всем элементам с class="fancybox")

Во-вторых, если вы перезагрузите изображение на веб-странице (и измените его href атрибут) с fancybox v2.x вам не нужно ничего делать, поскольку он всегда будет открывать соответствующее изображение (v2.x использует .live() метод)

В-третьих, если fancybox уже открыт и изображение на веб-странице обновлено (его href атрибут также изменился) И вы хотите, чтобы fancybox соответствующим образом обновил свой контент, тогда вам нужно добавить слушателя в свой reloadBackscatterImage() функция для оценки состояния fancybox и запуска click к #backscatter-link селектор, который откроет fancybox, используя текущий href такого селектора... как то так:

 if($.fancybox.isOpened){
  $("#backscatter-link").trigger("click");
 }

Чтобы сделать это объяснение более понятным, я создаю ДЕМО-ЗДЕСЬ, который обновляет изображение на веб-странице каждые 10 секунд (я также добавил индикатор состояния fancybox.) Fancybox всегда будет открывать текущее изображение на странице при нажатии на него и обновлять его содержимое. соответственно.

ПРИМЕЧАНИЕ: это для fancybox v2.0.6+

Answer 3

Я пытался решить ту же проблему - пересылать изображения с веб-камеры в Fancybox.

Я решил, что с помощью двух ссылок Fancybox на одно и то же изображение - одну и ту же группу (rel = "что-то"), установил для autoplay значение true и тайм-аут слайд-шоу на нужный интервал обновления. Работает отлично.

Запускается слайд-шоу из 2 (виртуальных) изображений, которые снова и снова запускаются, указывая на одно и то же исходное изображение с веб-камеры.