Блог

Я использую fancybox на сайте с большим количеством файлов JPEG. Я использую отдельные файлы изображений большого размера, по крайней мере, вдвое превышающие конечные максимальные размеры для просмотра, сильно сжатые для уменьшения КБ. Этот метод, похоже, работает хорошо и экономит много времени на создание версий x2 и x3 каждого оригинала и позволяет избежать использования srcset.

Существуют альтернативные виды изображений, которые просматриваются в увеличенном виде через fancybox, но увеличенные изображения отображаются с фактическим размером файла в пикселях, поэтому я не могу понять, как управлять конечным размером отображения увеличенных изображений fancybox’d на экране.

Можно ли это сделать? Спасибо, Питер Х.

(не все увеличенные изображения имеют одинаковый размер)

Если вы используете fancyBox3, то вы можете использовать обратный вызов «afterLoad» для изменения размеров изображения:

 $('[data-fancybox]').fancybox({
    afterLoad : function( instance, slide ) {
        if ( slide.type === 'image' ) {
            slide.width  = slide.width  * 0.5;
            slide.height = slide.height * 0.5;
        }
    }
});
  

Если вы хотите применить это ко всем будущим экземплярам, то это тоже возможно. Пример:

 $(document).on('onComplete.fb', function( e, instance, slide ) {
    // Your code goes here
});