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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    You can not have two IDs with the same name! ie: id="light". Change this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • 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
    •