@VJC2016

Как открыть fancyBox с элемента не являющегося частью галереи?

Добрый день!
Вот такая ситуация - подключил фансибокс, в нем необходимо листать маленькие картинки , а вот открываться он должен при нажатии на большую. При этом при нажатии на маленькие фансибокс не должен открываться. При клике на маленькие картинки большая заменяется на кликнутую маленькую (это уже сделано). В итоге получается добиться либо того что фансибокс вызывается при клике на любую картинку , и большая картинка(которая по сути копия активной маленькой) так же попадает в слайдер фансибокса.

.one-sensor__img-block
            .one-sensor__big-img
                img(src="img/sensor-one.png", srcset="img/sensor-one@2x.png 2x", alt="Большое фото датчика",
                    width="363", height="268")
            .one-sensor__img-row
                a.one-sensor__img.one-sensor__img--active(href="img/manufacturers-4.png" data-fancybox="hhh")
                    img(src="img/manufacturers-4.png", srcset="img/sensor-one@2x.png 2x")
                a.one-sensor__img(href="img/manufacturers-1.png" data-fancybox="hhh")
                    img(src="img/manufacturers-1.png", srcset="img/sensor-one@2x.png 2x")
                a.one-sensor__img(href="img/manufacturers-2.png" data-fancybox="hhh")
                    img(src="img/manufacturers-2.png", srcset="img/sensor-one@2x.png 2x")
                a.one-sensor__img(href="img/manufacturers-3.png" data-fancybox="hhh")
                    img(src="img/manufacturers-3.png", srcset="img/sensor-one@2x.png 2x")


$('.one-sensor__img').fancybox({
    buttons : [
        'slideShow',
        'zoom',
        'fullScreen',
        'close'
    ],
    loop : true,
    thumbs : {
        autoStart : true
    }
});


Вопрос такой -
1)как заставить фансибокс включаться только при клике на большую картинку, при том что её не надо включать в слайдер вместе с маленькими картинками.
2)И как сообщить фансибоксу именну ту картинку с которой начинать прокрутку слайдера
5e4a8a3cb93b5522385421.jpeg
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
@tyzberd
на большую картинку вешаете такой код (тут немного лишнего)
var isMobileDevice = $('body').hasClass('mobile');
$(document).on('click', '.one-sensor__big-img, function (e) {
        e.preventDefault();
        var $links = sliderBig.data('json');
        var index = $(this).data('fancybox-index');

        $.fancybox.open($links.image, {
            baseClass: "js-gallery-big-fancybox fancybox-horizontal-thumbs",
            arrows: true,
            toolbar: true,
            loop: true,
            thumbs: {
                autoStart: false,
                axis: isMobileDevice ? 'x' : 'y'
            },
            buttons: [
                "slideShow",
                "fullScreen",
                "thumbs",
                "close"
            ]
        }, index);
    });

и json на большую (не помню, возможно "index" в json не нужен)
{
  "image": [
    {
      "src": "orig/booking18059_1.jpg",
      "opts": {
        "thumb": "/orig/small/booking18059_1.jpg",
        "index": "0"
      }
    },
    {
      "src": "/orig/booking18059_10.jpg",
      "opts": {
        "thumb": "/orig/small/booking18059_10.jpg",
        "index": "1"
      }
    },
    {
      "src": "/orig/booking18059_11.jpg",
      "opts": {
        "thumb": "/orig/small/booking18059_11.jpg",
        "index": "2"
      }
    },
    {
      "src": "/orig/booking18059_13.jpg",
      "opts": {
        "thumb": "/orig/small/booking18059_13.jpg",
        "index": "3"
      }
    },
    {
      "src": "/orig/booking18059_14.jpg",
      "opts": {
        "thumb": "/orig/small/booking18059_14.jpg",
        "index": "4"
      }
    }
  ]
}

потом миниатюрам тоже проставляете индекс и меняете при клике у большой.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы