Как изменить изображение предварительного загрузчика Fancybox?

Question

Я хочу заменить стандартный загрузчик изображений Fancybox1.3.4 (fancy_loading.png) другим предварительным загрузчиком.

Предварительный загрузчик Fancybox кодируется не только в css, но и в самом javascript.Кажется, в javascript есть два места, по крайней мере:

        _animate_loading = function() {
        if (!loading.is(':visible')){
            clearInterval(loadingTimer);
            return;
        }

        $('div', loading).css('top', (loadingFrame * -40) + 'px');

        loadingFrame = (loadingFrame + 1) % 12;
    };

и

    $.fancybox.showActivity = function() {
    clearInterval(loadingTimer);

    loading.show();
    loadingTimer = setInterval(_animate_loading, 66);
};

$.fancybox.hideActivity = function() {
    loading.hide();
};

Так что для настройки preloader потребуется также изменить javascript.Как я могу изменить fancybox-1.3.4 javascript для установки собственного изображения preloader?

Answer 1

Объявление CSS здесь:

#fancybox-loading div {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 480px;
  background-image: url('fancybox.png');
}

Они используют спрайт для фонового изображения и изменяют положение фона для его анимации.Если вы собираетесь использовать изображение loading.gif, вам не нужно его анимировать.

Вам нужно изменить путь background-image, height и width, чтобы обеспечитьваше новое изображение.Возможно, вы захотите закомментировать их JS-код для анимации, чтобы он не конфликтовал.

Здесь объявляется loading div:

$('body').append(
  tmp = $('<div id="fancybox-tmp"></div>'),
  loading = $('<div id="fancybox-loading"><div></div></div>'),
  overlay = $('<div id="fancybox-overlay"></div>'),
  wrap = $('<div id="fancybox-wrap"></div>')
);

Вы можете в любой момент добавитьloading или просто измените стиль на #fancybox-loading.Затем вам нужно будет удалить любую ссылку на loadingTimer и loadingFrame.Закомментируйте всю эту функцию:

/*_animate_loading = function() {
  if (!loading.is(':visible')){
  clearInterval(loadingTimer);
    return;
  }

  $('div', loading).css('top', (loadingFrame * -40) + 'px');

    loadingFrame = (loadingFrame + 1) % 12;
};*/

Измените следующую функцию:

$.fancybox.showActivity = function() {
  //clearInterval(loadingTimer);

  loading.show();
  //loadingTimer = setInterval(_animate_loading, 66);
};

Это должно сделать это.Вы не хотите, чтобы в loading было setInterval, поскольку вы не будете его анимировать, но вы хотите, чтобы он скрывался / показывался условно.

Answer 2

Есть два варианта -

1) Обновить до версии 2, так как теперь она использует анимированные gif

2) lace заменить на showActivity и hideActivity вашими методами, например, после включенияJS файл -

$.fancybox.showActivity = function() {
    /* Add your animated gif to page ... */
}

Answer 3

Вам не нужно так много менять только в комментариях к файлу js:

$.fancybox.showActivity = function() {
    //clearInterval(loadingTimer);

    loading.show();
    //loadingTimer = setInterval(_animate_loading, 66);
};

Это все, и это будет работать, но помните об изменениях в правильном файле, потому что где jquery.fancybox-1.3.4.js и jquery.fancybox-1.3.4.pack.js