Задать вопрос

Vue.js + Fancybox, как использовать совместно?

Сайт-каталог товаров Laravel + Vue.js. К vue.js пытаюсь прикрутить Fancybox v. 5, библиотеку lightbox для просмотра изображений товара. Скрипт импортирован успешно, Fancybox запускается, однако при вызове библиотеки не отображается изображение. Все отображается, кроме изображения. При этом в консоли браузера ошибок нет.

652e7f7ac69bf119247536.jpeg

По клику срабатывает метод, который запускает Fancybox – показ изображений.
showImages: function () {
            //console.log(this.images);
            new Fancybox(this.images);
            Fancybox.getInstance().jumpTo(this.number);
        }

Сами данные для показа изображений поступают в виде массива объектов, в виде:
[
  {
    src: 'http://pechnik.vue/storage/10325/Смокер_Кудесник_Exterer.jpg',
    type: 'image',
    caption: 'The best product of the Word'
  },
  {
    src: 'http://pechnik.vue/storage/10326/Смокер_Кудесник_1_Open.jpg',
    type: 'image',
    caption: 'Product title'
  },
  // ..........
]


При этом консоли браузера, вижу, что DIV врапперу, обертке с изображением задаются атрибуты style="width: 0px; height: 0px” которые скрывают изображение.
652e7ef52226b923134176.jpeg

Прошу помощи сообщества!

Кто имеет успешный опыт использования Vue.js и Fancybox, чем может вызвана проблема? Как поправить?
Посоветуйте, какое еще есть хорошо документированное решение lightbox для Vue.js?
  • Вопрос задан
  • 536 просмотров
Подписаться 2 Простой Комментировать
Решения вопроса 1
@voland700 Автор вопроса
После долгих танцев с бубном проблема была решена. Опишу, возможно кому-нибудь пригодится.

Fancybox v. 5 отлично работает, в том числе в связке с Vue.js. На сайте использовалась верстка, css - от существующего проекта, на котором так же использовалась Fancybox, предыдущей, 4 версии библиотеки. После удаления из css - файла фрагментов ранее используемого css Fancybox - проблема решена.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы