Hi all,

I've had a search through the forums but can't see anything related to what I'm after.

I have set up a page with a simple lightbox using JavaScript and CSS.

I'm looking for multiple lightboxes to be launched from multiple links with different content in each box.

At the moment I have set up with 2 on the page. It looks like it's trying to launch both at the same time.

Can anyone advise where I'm going wrong by looking at my code please?

Thanks

JAVASCRIPT

Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);

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

 })
})
</script>
CSS

Code:
<style>
* /Lightbox background */
#lightbox {
 display:none;
 background:#FFFFFF;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-top:200px;
 margin-left:-300px;
 width:520px;
 height:300px;
 background:#EEEEEE;
 padding:10px 15px 10px 15px;
 border:15px solid #000000;
 z-index:1001;
}
</style>
HTML

Code:
<a id="show-panel" href="#"><img width="128" height="56" _moz_resizing="true" src="/SiteCollectionImages/CW-absolute.jpg" alt="" style="margin: 5px;"/></a><div id="lightbox-panel" style="display: none;">
    <h2>BOX 1</h2>
    




    <p align="center">
        <a id="close-panel" href="#">Close this window</a>
    </p>

</div>




<a href="#" id="show-panel"><img width="128" height="56" _moz_resizing="true" src="/SiteCollectionImages/CW-absolute.jpg" alt="" style="margin: 5px;"/></a><div id="lightbox-panel" style="display: none;">
    <h2>BOX 2</h2>
    

    <p align="center">
        <a href="#" id="close-panel">Close this window</a>
    </p>

</div>