THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Responsive Image Gallery in HTML CSS JavaScript & Bootstrap With LightBox Slider Effects

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'});
});

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.

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>