<section class="container">
<h1 class="my-4 text-center text-lg-left">Image Gallery</h1>
<div class="row gallery">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=1">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=1" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=2">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=2" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=3">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=3" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=4">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=4" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=5">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=5" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=6">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=6" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=6">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=6" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=7">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=7" alt="Random Image"></figure>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://picsum.photos/940/650?random=8">
<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=8" alt="Random Image"></figure>
</a>
</div>
</div>
</section>
/* Only for demo purposes. */
body {
font-family: "Fira Sans", sans-serif;
background-color: #f1f1f1;
margin: 85px 0;
}
/* Start Gallery CSS */
.thumb {
margin-bottom: 15px;
}
.thumb:last-child {
margin-bottom: 0;
}
/* CSS Image Hover Effects: https://www.nxworld.net/tips/css-image-hover-effects.html */
.thumb
figure img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.thumb
figure:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
$(document).ready(function() {
$(".gallery").magnificPopup({
delegate: "a",
type: "image",
tLoading: "Loading image #%curr%...",
mainClass: "mfp-img-mobile",
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
});