CODEWITHSUNDEEP
javascriptjquerylightbox
Aaron Brewer
Aaron Brewer

Reputation: 3667

Create Multiple Lightboxs for Multiple Elements on Single Page?

I am curious on how one would have multiple lightbox instances on a single page with different content, without having to duplicate the jQuery code for each instance?

The example is as follows:

jQuery

jQuery('a').click(function(){
      jQuery('.lightbox').fadeIn('1000');
      return false;
});

HTML

<div id="unique-lightbox-1" class="lightbox">
<p>Unique content for unique lightbox 1.</p>
</div>
<div id="unique-lightbox-2" class="lightbox">
<p>Unique content for unique lightbox 2.</p>
</div>
<div id="unique-lightbox-3" class="lightbox">
<p>Unique content for unique lightbox 3.</p>
</div>

How could I re-factor the code above to be unique for each element that has the lightbox class?

Upvotes: 0

Views: 394

Answers (1)

Spokey
Spokey

Reputation: 10994

You could for example specify which lightbox id the a should have by storing it in data

<a href='#' data-light='1'>Lightbox 1</a>
<a href='#' data-light='2'>Lightbox 2</a>
<a href='#' data-light='3'>Lightbox 3</a>

The you get data in your script

jQuery('a').click(function(){
   jQuery('#unique-lightbox-' + $(this).data('light')).fadeIn('1000');
   return false;
});

Or if you have all your a in one parent. You could use their index

jQuery('a').click(function(){
   jQuery('.lightbox:eq('+($(this).index()+1)+')').fadeIn('1000');
   return false;
});

Upvotes: 1

Related Questions