lightbox.js

(function() {
  if (! document.addEventListener ) { return false; }
  
  var wrapper = document.getElementById("WrapWindow") /* ModalWindow */
  var fadingTimer = false /* IntervalTimer */
  var alpha = 0.0 /* ModalWindows's alpha number */
  var lboxImage = document.getElementById("LBoxImg") /* target img object */
  var eimg /*Base Image*/

  /* draw content */
  var displayContent = function() {
  }
  
  /* fading out (interval callback) */
  var fadeout = function() {
    if (alpha < 0.8) {
      alpha = alpha + 0.05
      wrapper.style.backgroundColor = "rgba(0,0,0," + alpha + ")"
    } else {
      clearInterval(fadingTimer)
      fadingTimer = false
      displayContent()
    }
  }
  
  /* set this for event callback */
  var setLightboxTrigger = function(e) {
  
    /* Set next image */
    LBoxImage.src = e.currentTarget.getElementsByTagName("img")[0].src.replace("/thumb/", "/fig/")
    LBoxImage.style.maxHeight = window.innerHeight || document.documentElement.clientHeight
    LBoxImage.style.maxWidth = window.innerWidth || document.documentElement.clientWidth
  
    wrapper.style.visibility = "visible"
    fadingTimer = setInterval(fadeout, 30)
  }

  /* Return from lightbox */
  wrapper.addEventListener("click", function(e) {
    if (fadingTimer) {
      clearInterval(fadingTimer)
    }
    wrapper.style.backgroundColor = "transparent"
    wrapper.style.visibility = "hidden"
    alpha = 0.0
  }, false)

  
  var articles = document.getElementsByTagName("article")
  
  var lend = articles.length
  for(var i=0; i < lend; i++) {
    var figs = articles[i].getElementsByTagName("figure")
    llend = figs.length
    for(var ii=0; ii < llend; ii++) {
      figs[ii].addEventListener("click", setLightboxTrigger, false)
    }
  }
  
  
})()