CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user9437856
user9437856

Reputation: 2388

How to display the gallery image and show only that gallery related image

I have 3 gallery column which is "Gallary 1", "Gallary 2", "Gallary 3". Each gallery has more than 5 images collection.

enter image description here

Now, What I am doing is, When the user clicked on gallery 1 then it should be displayed only gallery one image, When the user clicked on gallery 2 then it should be displayed only gallery two images and so on.

I checked on google for the plugin but I haven't found.

Now, I am using http://sachinchoolur.github.io/lightGallery/ plugin

$(document).ready(function() {
         $('.lightgallery').lightGallery({
            thumbnail: false
        });
    });
.lightgallery a img{width: 300px;}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
  <a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
      <img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
  </a>

  <a href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
      <img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
  </a>
  
  <a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
      <img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
  </a>


  <a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
      <img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
  </a>


</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>

Above snippet is working for a single gallery section because it's displaying all the images.

Any other plugin is available for my issues?

I tried some my thought that I will created like below code and using css

.lightgallery a{position: absolute;} all the anchor tag images will display over the first image but this is not the right way. right?

<div class="lightgallery"><!--gallary one images--></div>
<div class="lightgallery"><!--gallary two images--></div>
<div class="lightgallery"><!--gallary three images--></div>

Upvotes: 1

Views: 3462

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

Loop each lightgallery div and create the gallery 

$(document).ready(function() {
  $('.lightgallery').each(function(i, v) {
    $(v).lightGallery({
      thumbnail: false
    });
  });
});
.lightgallery a img {
  width: 300px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
  <a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
    <img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
  </a>
  <a style="display:none;" href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
    <img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
  </a>
  </div>
<div class="lightgallery">
  <a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
    <img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
  </a>
  </div>
<div class="lightgallery">

  <a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
    <img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
  </a>


</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>

Upvotes: 1

Related Questions