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>


9 comments:

  1. Great website and thanks for offering good quality info.nice thanks for share great post here 스포츠토토

    ReplyDelete
  2. 토토 This is a very good article. I see the greatest contents on your blog and I extremely love reading them.


    ReplyDelete
  3. Admiring the time and effort you put into your blog and detailed information you offer!.. 토토사이트


    ReplyDelete
  4. Yes, 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
  5. 토토 of the concepts you have presented to your post. They’re very convincing and can certainly work.

    ReplyDelete
  6. Thank you so much. Thank you for letting me know this blog. Thank you for your good comments. I wish you prosperity. 카지노먹튀

    ReplyDelete
  7. I am not sure where your getting your information, but good topic. I needs to spend some time learning much more or understanding more. 먹튀검증

    ReplyDelete
  8. Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. 먹튀검증사이트

    ReplyDelete
  9. I 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