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>
Great website and thanks for offering good quality info.nice thanks for share great post here 스포츠토토
ReplyDelete토토 This is a very good article. I see the greatest contents on your blog and I extremely love reading them.
ReplyDeleteAdmiring the time and effort you put into your blog and detailed information you offer!.. 토토사이트
ReplyDeleteYes, I am entirely agreed with this article, and I just want say that this article is very helpful and enlightening. I also have some precious piece of concerned info !!!!!!Thanks. reduce image size in kb
ReplyDelete토토 of the concepts you have presented to your post. They’re very convincing and can certainly work.
ReplyDeleteThank you so much. Thank you for letting me know this blog. Thank you for your good comments. I wish you prosperity. 카지노먹튀
ReplyDeleteI am not sure where your getting your information, but good topic. I needs to spend some time learning much more or understanding more. 먹튀검증
ReplyDeleteIts like you read my mind! You seem to know so much about this, like you wrote the book in it or something. 먹튀검증사이트
ReplyDeleteI read good articles and comments here and leave comments with a lot of help. Thank you. I ll grow up and spread good comments. 먹튀검증사이트
ReplyDelete