Question

I’m using 1 lightbox per section. Each section is an expandable DIV (in jquery). It all works fine but wondering if there’s an easier way to code in jquery instead of copying the same code and changing the DIV id numbers…

here’s my html:

<div class="bus-location">
<h5 class="accordion" id="section1">Title 2span></span></h5>
<div class="content">
<p>Content here</p>

<div class="bus-promo"><a id="show-panel" href="#"></a></div><!-- end of .bus-location-promo -->
<div id="lightbox-panel">
<h6>Heading</h6>
<p>Text goes here</p>
<p>image below</p>
<img src="../images/logo.png" />
<p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
</div><!-- end of .content -->
</div><!-- end of .bus-location-->

<div class="bus-location">
<h5 class="accordion" id="section2">Title 2<span></span></h5>
<div class="content">
<p>Content for div 2 here</p> 
<div class="bus-promo"><a id="show-panel-2" href="#"></a></div><!-- end of .bus-location-promo -->
<div id="lightbox-panel-2">
<h6>Promotion 2</h6>
<p>Text goes here</p>
<p>image below</p>
<img src="../images/logo.png" />
<p align="center"><a id="close-panel-2" href="#">Close this window</a></p>
</div><!-- /lightbox-panel -->
<div id="lightbox-2"> </div><!-- /lightbox -->
</div><!-- end of .content -->
</div><!-- end of .bus-location-->

Here’s my JS:

$(document).ready(function(){
    $("a#show-panel").click(function(){
        $("#lightbox, #lightbox-panel").fadeIn(300);
    })
    $("a#close-panel, #lightbox").click(function(){
        $("#lightbox, #lightbox-panel").fadeOut(300);
    })

    $("a#show-panel-2").click(function(){
        $("#lightbox-2, #lightbox-panel-2").fadeIn(300);
    })
    $("a#close-panel-2, #lightbox-2").click(function(){
        $("#lightbox-2, #lightbox-panel-2").fadeOut(300);
    })

    $(document).bind('keydown', function(e) { 
      if (e.which == 27) {
        $("#lightbox, #lightbox-panel").fadeOut(300);
        $("#lightbox-2, #lightbox-panel-2").fadeOut(300);
      }
    });
})

Here’s my CSS:

#lightbox, #lightbox-2 {
    display:none;
    background:#000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position:absolute;
    top:0px;
    left:0px;
    min-width:100%;
    min-height:100%;
    z-index:1000;
}
#lightbox-panel, #lightbox-panel-2 {
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-400px;
    width:800px;
    background:#FFF;
    padding:10px 15px 10px 15px;
    border:1px solid #CCC;
    z-index:1001;
}

Answer 1

Looks like you need some good class targeting. With this you can create lightboxes ad infinitum without needing to change your code or add IDs.

Here’s the JSFiddle: http://jsfiddle.net/3CAhb/

Here’s the javascript:

$(document).ready(function(){
    $("a.show-panel").click(function(){
        $(this).closest(".content").find(".lightbox, .lightbox-panel").fadeIn(300);
    })
    $("a.close-panel, .lightbox").click(function(){
        $(this).closest(".content").find(".lightbox, .lightbox-panel").fadeOut(300);
    })

    $(document).bind('keydown', function(e) { 
      if (e.which == 27) {
        $(".lightbox, .lightbox-panel").fadeOut(300);
      }
    });
})

And HTML:

<div class="bus-location">
    <h5 class="accordion">Title 2<span></span></h5>
    <div class="content">
        <p>Content for div 2 here</p>
        <div class="bus-promo">
            <a class="show-panel" href="#"></a>
        </div>

        <div class="lightbox-panel">
            <h6>Promotion 2</h6>
            <p>Text goes here</p>
            <p>image below</p>
            <img src="../images/logo.png"/>
            <p align="center"><a class="close-panel" href="#">Close this window</a></p>
        </div>

        <div class="lightbox"></div>
    </div>
</div>