www.webdeveloper.com
Results 1 to 2 of 2

Thread: Multiple Lightboxes for content

  1. #1
    Join Date
    Jul 2012
    Posts
    1

    Multiple Lightboxes for content

    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>

  2. #2
    Join Date
    Nov 2007
    Posts
    431
    You have items on the page with the same IDs (show-panel, close-panel, lightbox-panel).
    Give them different IDs.

    e.g., "show-panel1" and "show-panel2"

    Then change your javascript to place the events on the newly named panels:
    Code:
    $(document).ready(function(){
     $("a#show-panel1").click(function(){
        $("#lightbox1, #lightbox-panel1").fadeIn(300);
    
     })
     $("a#close-panel1").click(function(){
         $("#lightbox1, #lightbox-panel1").fadeOut(300);
    
     })
    
     $("a#show-panel2").click(function(){
        $("#lightbox2, #lightbox-panel").fadeIn(300);
    
     })
     $("a#close-panel2").click(function(){
         $("#lightbox2, #lightbox-panel2").fadeOut(300);
    
     })
    
    })
    You'll also need to update your CSS with the new lightbox-panel IDs.
    Though,it looks like "lightbox-panel" could be changes to a class and you would give each panel an id like "panel1" (and update your javascript appropriately). That way you would not need to duplicate the CSS for how the lighboxes present themselves.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles