The Gallery is a grid layout of images. Show multiple images in the form of a matrix. To make it work as per the expectation, you need to add the Modal.
Modal is the class of Bootstrap. Just copy and paste the modal code at the bottom of the code editor. Without it, the user cannot activate the image upon clicking it.
gallery-masonry is the default class for Gallery Masonry.
Use gallery-masonry-gap-10 to get gap of 10px in between.
After that, give the images in img tag.
There are several classes for getting gaps:
gallery-masonry-gap-5 to get a gap of 5px.
gallery-masonry-gap-10 to get a gap of 10px.
gallery-masonry-gap-15 to get a gap of 15px.
gallery-masonry-gap-20 to get a gap of 20px.
Note: Use these classes in the parent div. Otherwise, it will not work as expected.
<div class="gallery-masonry gallery-masonry-gap-10">
<img class="img-fluid" src="https://unsplash.it/700/345?image=564" />
<img class="img-fluid" src="https://unsplash.it/700/500?image=421" />
<img class="img-fluid" src="https://unsplash.it/700/300?image=455" />
<img class="img-fluid" src="https://unsplash.it/700/150?image=406" />
<img class="img-fluid" src="https://unsplash.it/700?image=594" />
<img class="img-fluid" src="https://unsplash.it/700/450?image=417" />
<img class="img-fluid" src="https://unsplash.it/700/400?image=410" />
<img class="img-fluid" src="https://unsplash.it/700/550?image=582" />
<img class="img-fluid" src="https://unsplash.it/700/175?image=591" />
<img class="img-fluid" src="https://unsplash.it/700/345?image=421" />
<img class="img-fluid" src="https://unsplash.it/700/567?image=572" />
<img class="img-fluid" src="https://unsplash.it/700/978?image=401" />
<img class="img-fluid" src="https://unsplash.it/700/654?image=388" />
</div>
<!-- popup -->
<div class="modal fade gallery-modal-wrapper" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<i class="bi bi-x"></i>
</button>
<img id="modal_image" src="">
</div>
</div>
<script>
$(document).ready(function(){
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
$('.img-fluid').click(function(){
var d = $(this).attr("src");
$('#modal_image').attr("src",d);
$('#modal_image').addClass("img-fluid");
myModal.show();
});
});
</script>
gallery-box is the default class for Gallery box. The box will be square in shape.
Give the images inside the img tag.
<div class="gallery-box">
<img class="img-fluid" src="https://unsplash.it/700/345?image=564" />
<img class="img-fluid" src="https://unsplash.it/700/500?image=421" />
<img class="img-fluid" src="https://unsplash.it/700/300?image=455" />
<img class="img-fluid" src="https://unsplash.it/700/150?image=406" />
<img class="img-fluid" src="https://unsplash.it/700?image=594" />
<img class="img-fluid" src="https://unsplash.it/700/450?image=417" />
<img class="img-fluid" src="https://unsplash.it/700/400?image=410" />
<img class="img-fluid" src="https://unsplash.it/700/550?image=582" />
<img class="img-fluid" src="https://unsplash.it/700/175?image=591" />
<img class="img-fluid" src="https://unsplash.it/700/345?image=421" />
<img class="img-fluid" src="https://unsplash.it/700/567?image=572" />
<img class="img-fluid" src="https://unsplash.it/700/978?image=401" />
<img class="img-fluid" src="https://unsplash.it/700/654?image=388" />
<img class="img-fluid" src="https://unsplash.it/700/500?image=423" />
</div><!-- popup -->
<div class="modal fade gallery-modal-wrapper" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<i class="bi bi-x"></i>
</button>
<img id="modal_image" src="">
</div>
</div>
<script>
$(document).ready(function(){
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
$('.img-fluid').click(function(){
var d = $(this).attr("src");
$('#modal_image').attr("src",d);
$('#modal_image').addClass("img-fluid");
myModal.show();
});
});
</script>