Question

I have never used a lightbox before, but recently started thinking about using a similar feature on my website. I found a ton of jquery libraries and various add-ons, but I am a big fan of writing my own code. When I started looking under the hood, I was surprised to realize that it appears to simply be a hidden html element that is displayed when a Javascript event listener is triggered. Am I right about this? Is there more than meets the eye?

Just wondering how it works. Thank you in advance for your consideration.

UPDATE

Great answers! I went with Ana’s response because the other considerations regarding the design go without saying. As far as the mechanisms, it really does appear to be a wonderfully understated device. Thanks to all who read, commented, and replied…

Answer 1

No, there really is not much more to it. However, I don’t really see the point of having the HTML element there from the beginning unless you don’t want to use JavaScript for your lightbox, which I don’t think it is the case here judging from your tags and which I’m not a fan of using in real projects, even though I think it is really cool that it can be done.

If you’re using JavaScript anyway in order to display the lightbox (which means that if JavaScript is disabled, your lightbox won’t get displayed even if it is there, loaded right from the beginning… so why load it if you can’t display it?), then it’s probably better to just create the lightbox element (and everything in it, and then append it to the page) only when you first want the lightbox to open.

What I mean by that is that you attach a click handler to the links (actually, I would attach it to the container an then check what was clicked, if it is a link, see what link it is and go further) and check whether you have a lightbox element. If you don’t, then you create it on the spot. If you already do, then you simply display it with whatever you need in it for that particular link that was clicked.

A basic lightbox example for an image gallery.

The HTML structure of the gallery would be:

<section class='gallery' id='gallery'>
  <a href='images/large_0.jpg' class='thumb'>
    <img class='thumb-img' src='images/small_0.jpg'>
  </a>
  <!-- as many more as you wish -->
</section>

The CSS:

/* gallery with thumbnails */
.gallery { text-align: center; }
.gallery .thumb, .gallery .thumb-img {
  display: inline-block;
  width: 10em;
  height: 5.6em;
}
/* lightbox */
.lightbox {
  z-index: 999; /* some ridiculously large value to make sure it's on top */
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.5);
  cursor: pointer;
  text-align: center;
}
.lightbox:before { /* strictly for vertical centering of large image */
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: '';
}
/* add/ remove this class to toggle display */
.hidden { display: none; }
.large { /* the large image */
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

The JavaScript:

var g = document.getElementById('gallery');

String.prototype.endsIn = function(suffixes) { /*just to check the extension*/
  for(i in suffixes) {
    if(this.indexOf(suffixes[i], this.length - suffixes[i].length) !== -1)
      return true;
  }
  return false;
};

g.addEventListener('click', function(e){
  var target = e.target, lnk, ext = ['.jpg', '.png'], lightbox, large;
  if(!target.classList.contains('thumb-img')) return;
  else {
    lnk = target.parentNode.href;
    if(!lnk.endsIn(ext)) return;
    else {
      lightbox = document.getElementById('lightbox');
      if(lightbox == null) {
        lightbox = document.createElement('div');
        lightbox.setAttribute('id', 'lightbox');
        lightbox.classList.add('lightbox');
        lightbox.innerHTML = "<img src='"+ lnk +"' id='large' class='large'>";
        document.body.appendChild(lightbox);
        lightbox.addEventListener('click', function(ev) {
          var target = ev.target, next, links = g.querySelectorAll('.thumb'), 
              len = links.length, large = document.getElementById('large');
          if(target.id == 'lightbox') lightbox.classList.add('hidden');
          else if(target.id == 'large') {
            for(var i = 0; i < len; i++) {
              if(links[i].href == large.src) {
                next = links[(i++)%len].href;
                while(!next.endsIn(ext)) next = links[(i++)%len].href;
                large.src = links[i%len].href;
                break;
              }
            }
          }
        }, false);
      }
      else {
        lightbox.classList.remove('hidden');
        large = document.getElementById('large');
        large.src = lnk;
      }
      e.preventDefault();
    }
  }
}, false);