Create a Responsive Image gallery with LightBox Slider Effects
Welcome, all we will see How to Create Responsive Image Gallery With Slider Effects in HTML, CSS, JavaScript, Bootstrap 4, and Jquery Magnific Popup Plugin with Source Code. how to create an image gallery that varies between four, two or full-width images, depending on screen size using HTML CSS Bootstrap.
Grid Classes
The Bootstrap 4 grid system has five classes:
.col-(extra small devices - screen width less than 576px).col-sm-(small devices - screen width equal to or greater than 576px).col-md-(medium devices - screen width equal to or greater than 768px).col-lg-(large devices - screen width equal to or greater than 992px).col-xl-(xlarge devices - screen width equal to or greater than 1200px)
 |
| Responsive Image Gallery |
Magnific Plugin Initializing popup
Popup initialization code should be executed after document ready, for example:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});2. From a group of elements with one parent
Same as first one, but use this method if you are creating a popup from a list of elements in one container. Note that this method does not enable gallery mode, it just reduces the number of click event handlers; each item will be opened as a single popup. If you wish to enable gallery, add the gallery:{enabled:true} option.
Same as first one, but use this method if you are creating a popup from a list of elements in one container. Note that this method does not enable gallery mode, it just reduces the number of click event handlers; each item will be opened as a single popup. If you wish to enable gallery, add the
gallery:{enabled:true} option.Here is the Actual Code Copy Here
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
</head>
<body>
<div class="container">
<div class="py-5">
<h1 class="text-center display-3"> MY GALLERY </h1>
<hr class="text-center w-25 border-dark">
</div>
<div class="row no-gutters gallerys">
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
<a href="images/gal1.jpg" target="_blank">
<img src="images/gal1.jpg" class="img-fluid">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
<a href="images/gal2.jpg" target="_blank">
<img src="images/gal2.jpg" class="img-fluid">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
<a href="images/gal3.jpg" target="_blank">
<img src="images/gal3.jpg" class="img-fluid">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
<a href="images/gal4.jpg" target="_blank">
<img src="images/gal4.jpg" class="img-fluid">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
<a href="images/gal5.jpg" target="_blank">
<img src="images/gal5.jpg" class="img-fluid">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
<a href="images/gal6.jpg" target="_blank">
<img src="images/gal6.jpg" class="img-fluid">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
$(document).ready(function(){
$('.gallerys').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled : true
}
});
});
</script>
</body>
</html>
