How to make friends between fotorama4 and fancybox3?

Question

JavaScript

Hello everyone, I'm already tormented, please tell me how to solve the problem :( Fancybox works, but displays only the first and second pictures from the photoframe. I don't write any code for the fantasybox, everything is from under the box through attributes. For swiper in the same form, everything works, for the slider with thumbnails I took a photo frame and such a problem

<div class="fotorama" data-nav="thumbs" data-arrows="true" data-thumbwidth="210" data-thumbheight="110" data-click="false" data-swipe="false" data-thumbmargin="21">
                <div data-img="img/slide_1.jpg"><a href="img/slide_1.jpg" data-fancybox="gallery"></a></div>
                <div data-img="img/slide_2.jpg"><a href="img/slide_2.jpg" data-fancybox="gallery"></a></div>
                <div data-img="img/slide_3.jpg"><a href="img/slide_3.jpg" data-fancybox="gallery"></a></div>
                <div data-img="img/slide_4.jpg"><a href="img/slide_4.jpg" data-fancybox="gallery"></a></div>
            </div>

Answer 1

I didn’t pick a lot of api for both, I solved the problem in this way, maybe it will come in handy for someone

$(function() {
        var $fotoramaDiv = $('.fotorama').fotorama();
        var fotorama = $fotoramaDiv.data('fotorama');
        var imagArr = fotorama.data;
        var srcArr = [];

        for(var i = 0; i < imagArr.length; i++){
            var src = {};
            src.src = imagArr[i].img;
            srcArr.push(src);
        }
        
        $('.fotorama__img').click(function(){
            $.fancybox.open(srcArr, {
                loop: false
            });
        });
    });

Answer 2

Why do you need Fancybox if you are using a photo frame?