CODEWITHSUNDEEP
jquery
Miguel Moura
Miguel Moura

Reputation: 39364

Apply plugin to multiple DIVs

I have the following:

<div class="gallery">
  <a href="http://via.placeholder.com/200x100?text=A1">
    <img src="http://via.placeholder.com/200x100?text=A1"/>
  </a>
  <a href="http://via.placeholder.com/200x100?text=A2">
    <img src="http://via.placeholder.com/200x100?text=A2"/>
  </a>
</div>

<div class="gallery">
  <a href="http://via.placeholder.com/200x100?text=B1">
    <img src="http://via.placeholder.com/200x100?text=B1"/>
  </a>
  <a href="http://via.placeholder.com/200x100?text=B2">
    <img src="http://via.placeholder.com/200x100?text=B2"/>
  </a>
</div>

Then using http://dbrekalo.github.io/simpleLightbox I have:

$('.gallery a').simpleLightbox();

But this makes the gallery to "see" all images in page as the same gallery.

How should I call simpleLightbox so each Gallery Div is seen as a gallery?

Note that I have more than two galleries in page.

Upvotes: 0

Views: 35

Answers (1)

void
void

Reputation: 36703

You can use .each on .gallery and initiate plugin to a of individual .gallery

$('.gallery').each(function(){
   $(this).find("a").simpleLightbox();
})

Upvotes: 2

Related Questions