Answer the question
In order to leave comments, you need to log in
How to make friends between fotorama4 and fancybox3?
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 the question
In order to leave comments, you need to log in
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
});
});
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question