multiple lightbox gallery on one page

Question

how can i fix this? when i click "smile" it appears smile but when i click sad it also appear a smiley face.

<a href="#" onclick="lightbox_open();">SMILE<br></a>
<div id="light"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
<a href="#" onclick="lightbox_open();">SAD</a>
<div id="light"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div> 

CSS: fade for the close and light is for the the lightbox.

#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#light{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;                 
    padding: 10px;
    border: 2px solid #FFF;
    background: #CCC;
    z-index:1002;
    overflow:visible;

javascript: for the open and close function

window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}
function lightbox_open(){
    window.scrollTo(0,0);
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';  
}
function lightbox_close(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';

Answer 1

You cannot use the same ID twice. You must use unique ID's.

Try this:

In the HTML, give your two light divs each a unique ID, for example lightSmile and lightSad.

In order to be able to use the same CSS for both lightboxes, give both boxes a class lightbox, and in the CSS, change the #light to .lightbox.

Finally, change the lightbox_open() function to the one below here.

HTML

<a href="#" onclick="lightbox_open('lightSmile');">SMILE<br></a>
<div class="lightbox" id="lightSmile"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
<a href="#" onclick="lightbox_open('lightSad');">SAD</a>
<div class="lightbox" id="lightSad"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>

CSS

.lightbox{
    display: none;
    ...
}

JS

function lightbox_open(id){
    window.scrollTo(0,0);
    document.getElementById(id).style.display='block';
    document.getElementById('fade').style.display='block';  
}

function lightbox_close(){
    document.getElementById('lightSmile').style.display='none';
    document.getElementById('lightSad').style.display='none';
    document.getElementById('fade').style.display='none';
}

If you look at the HTML, you see that now a string of the lightbox's ID is send along when lightbox_open() is called.
In the function, this ID-string is supplied as a variable (between the brackets: id). And in the line where lightbox's display-style is changed, this id is used.

In the close-function, the display-style of both the lightbox's is set back to default.

---

UPDATE

If you have a lot of lightboxes, it's easier to access the lightboxes by classname in the close-function:

function lightbox_close(){
    var list = document.getElementsByClassName('lightbox');
    for (var i=0; i<list.length; i++) {
        list[i].style.display = 'none';
    }
    document.getElementById('fade').style.display='none';
}

And if you're willing to use jQuery, you can do that with one line (and probably more reliably cross-browser):

function lightbox_close(){
    $('.lightbox').css('display','none'); //<--------------jQuery
    document.getElementById('fade').style.display='none';
}