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

Question

[VJC2016]

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

.one-sensor__img-block
            .one-sensor__big-img
                img(src="img/sensor-one.png", srcset="img/[e-mail] 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/[e-mail] 2x")
                a.one-sensor__img(href="img/manufacturers-1.png" data-fancybox="hhh")
                    img(src="img/manufacturers-1.png", srcset="img/[e-mail] 2x")
                a.one-sensor__img(href="img/manufacturers-2.png" data-fancybox="hhh")
                    img(src="img/manufacturers-2.png", srcset="img/[e-mail] 2x")
                a.one-sensor__img(href="img/manufacturers-3.png" data-fancybox="hhh")
                    img(src="img/manufacturers-3.png", srcset="img/[e-mail] 2x")

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

Вопрос такой -
1)как заставить фансибокс включаться только при клике на большую картинку, при том что её не надо включать в слайдер вместе с маленькими картинками.
2)И как сообщить фансибоксу именну ту картинку с которой начинать прокрутку слайдера

Answer 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"
      }
    }
  ]
}

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

Comments

[VJC2016]

@tyzberd

.one-sensor__big-img(
                    data-json='{"image": [{"src": "img/manufacturers-1.png,"opts": {"thumb": "img/manufacturers-1.png","index": "0"}},{"src": "img/manufacturers-2.png","opts": {"thumb": "img/manufacturers-2.png","index": "1"}},{"src": "img/manufacturers-3.png","opts": {"thumb": "img/manufacturers-3.png","index": "2"}},{"src": "img/manufacturers-4.png","opts": {"thumb": "img/manufacturers-4.png","index": "3"}}]}'
                )
                img(src="img/sensor-one.png", srcset="img/[e-mail] 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-index="1" data-fancybox="image")
                    img(src="img/manufacturers-4.png", srcset="img/[e-mail] 2x", alt="Малое фото датчика",
                    width="96", height="71")
                a.one-sensor__img(href="img/manufacturers-1.png" data-fancybox-index="2"  data-fancybox="image")
                    img(src="img/manufacturers-1.png", srcset="img/[e-mail] 2x", alt="Малое фото датчика",
                    width="96", height="71")
                a.one-sensor__img(href="img/manufacturers-2.png" data-fancybox-index="3"  data-fancybox="image")
                    img(src="img/manufacturers-2.png", srcset="img/[e-mail] 2x", alt="Малое фото датчика",
                    width="96", height="71")
                a.one-sensor__img(href="img/manufacturers-3.png" data-fancybox-index="4"  data-fancybox="image")
                    img(src="img/manufacturers-3.png", srcset="img/[e-mail] 2x", alt="Малое фото датчика",
                    width="96", height="71")

var sliderBig = $('.one-sensor__big-img');
$(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, {
        arrows: true,
        toolbar: true,
        loop: true,
        thumbs: {
            autoStart: true,
        },
        buttons: [
            "slideShow",
            "fullScreen",
            "thumbs",
            "close"
        ]
    }, $index);
});

Я вас правильно понял?А то не получается(

[tyzberd]

для .one-sensor__big-img добавили data-fancybox-index? и его нужно менять при клике по маленьким фото.
Смысл в том, что в $links.image вы передаете массив с картинками а в }, $index); индекс картинки которую открыть и этого массива

[tyzberd]

на первые 3 сделал https://codepen.io/tyzberd/pen/OJVNYgp?editors=1010

[VJC2016]

tyzberd, Смысл понял!Начало получаться,спасибо)