There is a group of pictures of the gallery fancybox 3 versions.

How to arrange the arrows to the left to the right inside the white section (and not at the edges as it is now), by analogy as in the previous version of the library demo , while retaining the adaptability.

If there is an option to create white indents from the picture so that when opening the picture there is no jerking effect - it will be great in general!

Code:

 $('[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>" } }); 
 .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; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script> <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>

    1 answer 1

    Decided thus:

     $('[data-fancybox="gallery"]').fancybox({ arrows: false, afterLoad: function(instance, current) { if (instance.group.length > 1 && current.$content) { current.$content.append('<button class="fancybox-button fancybox-button--arrow_right next" data-fancybox-next><i class="fa fa-angle-right" aria-hidden="true"></i></button><button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>'); } } }); 
     .fancybox-container .prev, .fancybox-container .next { width: 69px; height: 69px; font-size: 35px; border-radius: 50%; border: none; background-color: #fe7f40; color: white; cursor: pointer; padding: 0; position: absolute; bottom: 50%; transform: translateY(50%); } .fancybox-container .next { right: 20px; } .fancybox-container .prev { left: 20px; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script> <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>