How to open a fancyBox from an element that is not part of a gallery?

Question

fancyBox

Good afternoon!
This is the situation - I connected a fancibox, in it you need to scroll through small pictures, but it should open when you click on the big one. At the same time, when you click on the small funsybox, it should not open. When clicking on small pictures, the large one is replaced by the clicked small one (this has already been done). As a result, it turns out to achieve either that the funsybox is called when clicking on any picture, and the big picture (which is essentially a copy of the active small one) also gets into the funsybox slider.

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

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

The question is -
1) how to make the fancibox turn on only when you click on a large image, despite the fact that it does not need to be included in the slider along with small images.
2) And how to tell the fancibox exactly the picture with which to start scrolling the slider

Answer 1

hang this code on a big picture (here is a little extra)

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);
    });

and json to a large one (I don't remember, maybe "index" in json is not needed)

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

then you also put down the index for the thumbnails and change it when you click on the big one.