Light Box (Javascript)

var definefooter = '<div class="footerbar" onclick="closeit()"><img src="thumb/close.gif" alt="" /></div>' //ข้อความด้านล่าง
var defineLoading = '<img src="thumb/wait.gif" alt="" /> รอสักครู่...' //ข้อความ รอโหลด
var scrollbarwidth = 16

function createthumbBox() { //สร้างกล่ิอง thumbBox
  document.write('<div id="thumbBox" onclick="closeit()"><div id="thumbImage"></div>'+definefooter+'</div>')
  document.write('<div id="thumbLoading">'+defineLoading+'</div>')
  thumb_Box=document.getElementById("thumbBox")
  thumb_Image=document.getElementById("thumbImage")
  thumb_Loading=document.getElementById("thumbLoading")
  standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
}

function showimage(image) {
  if (thumb_Box.style.visibility=="visible") closeit()
  var imageHTML='<img src="'+image+'" alt="" />'
  centerDiv(thumb_Loading)
  thumb_Image.innerHTML=imageHTML
  featureImage=thumb_Image.getElementsByTagName("img")[0]
  featureImage.onload=function() {
    thumb_Loading.style.visibility="hidden"
    showthumbBox()
  }
  featureImage.onerror=function() {
    thumb_Loading.style.visibility="hidden"
  }
  return false
}

function centerDiv(divobj) { //วาง object กลาง page
  var ie=document.all & !window.opera
  var dom=document.getElementById
  var scroll_top=(ie)? standardbody.scrollTop : window.pageYOffset
  var scroll_left=(ie)? standardbody.scrollLeft : window.pageXOffset
  var docwidth=(ie)? standardbody.clientWidth : window.innerWidth-scrollbarwidth
  var docheight=(ie)? standardbody.clientHeight: window.innerHeight
  var objwidth=divobj.offsetWidth
  var objheight=divobj.offsetHeight
  var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px"
  divobj.style.left=docwidth/2-objwidth/2+"px"
  divobj.style.top=Math.floor(parseInt(topposition))+"px"
  divobj.style.visibility="visible"
}

function showthumbBox() { //แสดง thumbBox
  setimgopacity(0)
  centerDiv(thumb_Box)
  currentopacity=0
  opacitytimer=setInterval("opacityanimation()", 20)
}

function setimgopacity(opacity) {
  thumb_Box.style.opacity = (opacity / 100);
  thumb_Box.style.MozOpacity = (opacity / 100);
  thumb_Box.style.KhtmlOpacity = (opacity / 100);
  thumb_Box.style.filter = "alpha(opacity=" + opacity + ")";
}

function opacityanimation() {
  currentopacity+=10
  if (currentopacity>100) stopanimation()
  else setimgopacity(currentopacity)
}

function stopanimation() {
  if (typeof opacitytimer!="undefined") clearInterval(opacitytimer)
}

function closeit() {
  stopanimation()
  thumb_Box.style.visibility="hidden"
  thumb_Image.innerHTML=""
  thumb_Box.style.left="-2000px"
  thumb_Box.style.top="-2000px"
}

createthumbBox();