Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple Lightboxes on a single page using HTML and CSS

    I have multiple preview photos on a single page, and I wish for each preview photo to have its own lightbox which enlarges the photo. But when I open the second photo on the page, the lightbox image is the larger version of the first image on the page. I am using HTML and CSS with minimal java

    This is my code for HTML

    Code:
    <div id="graphic">
    <h2><span>Graphic Art</span></h2>
    <!--Below is the code for the clickable Sloth Photo with an opening Light Box-->
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
    <img src="images/graphicart/sloth-small.jpg" width="200px"></a></p>
    <div id="light" class="white_content"><img src="images/graphicart/sloth-large.jpg" width="600px">
    <br>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>
    </div>
    
    <div id="Separator">
    </div>
    
    <div id="Photo1">
    <h2><span>Photography<span></h2>
    <!--Below is the code for the clickable photos with an opening Light Box-->
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
    <img src="images/photography/art-small.jpg" width="200px"></a></p>
    <div id="light" class="white_content"><img src="images/photography/art-large.jpg" width="600px">
    <br>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>
    </div>

    And relevent CSS as follows:

    Code:
    .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 200%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
     
    .white_content {
        display: none;
        position: absolute;
        top: 15%;
        left: 20%;
    	width: 54%;
        height: 75%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,424
    Thanks
    30
    Thanked 878 Times in 876 Posts
    You can not have two IDs with the same name! ie: id="light". Change this.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    sjd123 (04-07-2014)


 

Tags for this Thread

Posting Permissions

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