Super! Ale to nie wszystko. Pozostało jeszcze kilka drobnych kroków do sukcesu. A więc do dzieła.
W sekcji 'head' lub na dole strony umieść następujący kod
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script></p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script></p>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css' /></p>
<link rel='stylesheet' type='text/css' href='https://use.fontawesome.com/releases/v5.15.4/css/all.css'/></p>
Skrypt galerii
<script type="text/javascript"><br>
$(document).ready(function(){
$(".photo a").fancybox({
protect: true,
loop: true,
smallBtn: false,
buttons: [
"close"
],
idleTime: 3,
image: {
preload: true,
},
btnTpl: {
arrowLeft:"<button data-fancybox-prev class='fancybox-button fancybox-button--arrow_left' title='Poprzednie zdjęcie'><i class='fas fa-angle-left'></i> </button>",
arrowRight:"<button data-fancybox-next class='fancybox-button fancybox-button--arrow_right' title='Następne zdjęcie'><i class='fas fa-angle-right'></i> </button>",
close:"<button data-fancybox-close class='fancybox-button fancybox-button--close' title='Zamknij podgląd'><i class='fas fa-window-close'></i></button>"
}
})
})
</script>
Style
<style>
.photo-album{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
align-items: center;
max-width:1280px;
width:100%;
}
.album{
order: 0;
flex: 0 1 25%;
align-self: auto;
}
.photo img{
width:100%;
vertical-align:middle;
}
.photo a{
display:inline-block;
border: solid 2px #000;
margin:1px;
}
.fas{
font-size:3rem;
}
</style>