title: multiple lightbox gallery on one page
body: <p>how can i fix this? when i click "smile" it appears smile but when i click sad it also appear a smiley face.</p>
  
  <pre><code>&lt;a href="#" onclick="lightbox_open();"&gt;SMILE&lt;br&gt;&lt;/a&gt;
  &lt;div id="light"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100&gt;&lt;/div&gt;
  &lt;a href="#" onclick="lightbox_open();"&gt;SAD&lt;/a&gt;
  &lt;div id="light"&gt;&lt;img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100&gt;&lt;/div&gt;
  &lt;div id="fade" onClick="lightbox_close();"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>CSS: fade for the close and light is for the the lightbox.</p>
  
  <pre><code>#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;
  </code></pre>
  
  <p>javascript: for the open and close function</p>
  
  <pre><code>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';
  </code></pre>