<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
<h1>Fancybox - Popup</h1>
<div class="container">
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #1">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #2">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #3">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #4">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #5">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #6">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #7">
<img src="https://place-hold.it/300" />
</a>
<a href="https://place-hold.it/300" data-fancybox="gallery-a" data-caption="Gallery A #8">
<img src="https://place-hold.it/300" />
</a>
</div>
<div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>
h1 {
text-align: center;
}
.container {
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 10px;
row-gap: 10px;
}
Fancybox.bind('[data-fancybox="gallery-a"]', {
// Custom options for all galleries
Toolbar: {
display: {
left: ['infobar'],
middle: [
'zoomIn',
'zoomOut',
'toggle1to1',
'rotateCCW',
'rotateCW',
'flipX',
'flipY'
],
right: ['iterateZoom', 'slideshow', 'download', 'fullscreen', 'thumbs', 'close']
}
},
contentClick: 'iterateZoom',
Images: {
Panzoom: {
maxScale: 2
}
}
});
