Есть группа картинок галереи fancybox 3 версии.
Как расположить стрелки влево вправо внутри белой секции (а не по краям как сейчас), по аналогии как в предыдущей версии библиотеки
демо но, сохранив при этом адаптивность.
Если есть вариант создать белые отступы от картинки так, чтобы при раскрытии картинки не наблюдалось эффекта дергания - будет вообще здорово!
Код:
https://jsfiddle.net/zycw68r4/
$('[data-fancybox="gallery"]').fancybox({
btnTpl: {
arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left prev" title="{{PREV}}">' +
'<i class="fa fa-angle-left" aria-hidden="true"></i>' +
"</button>",
arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right next" title="{{NEXT}}">' +
'<i class="fa fa-angle-right" aria-hidden="true"></i>' +
"</button>"
}
});
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg"></a>
.fancybox-container .fancybox-image {
padding: 80px;
background: #fff;
border-radius: 20px;
}
.fancybox-container .fancybox-navigation .fancybox-button.prev,
.fancybox-container .fancybox-navigation .fancybox-button.next {
width: 69px;
height: 69px;
font-size: 35px;
border-radius: 50%;
border: none;
background-color: #fe7f40;
color: white;
cursor: pointer;
padding: 0;
}
