Как указать srcset в объекте JSON для fancybox 3? - PullRequest
Новая
       11

Как указать srcset в объекте JSON для fancybox 3?

0 голосов
/ 10 октября 2018

Для fancybox 3 я могу вручную создать группу объектов с шаблоном 

{
    src  : '' // Source of the content
    type : '' // Content type: image|inline|ajax|iframe|html (optional)
    opts : {} // Object containing item options (optional)
}

Как в этом случае указать srcset для отображения разных изображений в зависимости от ширины области просмотра?

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Пока что я нашел временное решение.В JSON я добавил srcset: 

var gallery = {
  "src" : "https://source.unsplash.com/random/400x300",
  "srcset" : "https://source.unsplash.com/random/400x300, https://source.unsplash.com/random/800x600 2x"
}

Затем использовал afterLoad: 

$.fancybox.open(gallery, {
    afterLoad: function (instance, slide) {
        if (slide.srcset)
            slide.$slide.find(".fancybox-image").attr("srcset", slide.srcset);
        }
    });

Кажется, что все работает правильно.

Демо - https://codepen.io/anon/pen/oaWBMe?editors=1010

Если я не прав, пожалуйста, исправьте.

0 голосов
/ 10 октября 2018

Вы можете использовать опцию image.srcset для установки атрибута srcset, например: 

$.fancybox.open({
    src : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720',
    type: 'image',
    image : {
      srcset : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=large_1600%C3%97800&w=1600&h=960 1600w, https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720 1200w, https://placeholdit.imgix.net/~text?txtsize=33&txt=small_640%C3%97427&w=640&h=384 640w'
    }
  });

Демонстрация - https://codepen.io/anon/pen/aRWpQp?editors=1010

Примечание: во всех браузерах существует несогласованность относительно того, как это должно работатьНапример, попробуйте эту демонстрацию, используя Chrome и Firefox, и попробуйте изменить размер окна.Firefox работает, как и следовало ожидать, но Chrome, вероятно, нет.Поэтому в v4 планируется адаптировать отзывчивость немного по-другому.

...