Light Box (Javascript)

โค้ดแสดงรูปภาพ เหมือนแกลอรี่ของผมครับ

thumbview.js


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();

โค้ด Javascript thumbview.js สามารถปรับเปลี่ยน รูปแบบ(ตัวหนังสือสีแดง) ได้ตามต้องการ โดยรุูปแบบ ของตัวรอโหลด และ กล่องแสดงรูปถูกกำหนดโดย thumbview.css

thumbview.css

#thumbBox{ /*กล่อง humbBox */
  position:absolute;
  left:0;
  top:0;
  width:auto;
  padding:10px;
  padding-bottom:0;
  visibility:hidden;
  z-index:10;
  cursor:pointer;
  background-color:#FFFAF0;
  border:3px solid #583D2E;
}

#thumbBox .footerbar{ /*พื้นที่ด้านล่าง (ปุ่มปิด) */
  font:bold 10pt Tahoma;
  line-height:1.1em;
  color:#666666;
  padding:5px 0;
  text-align:right;
}


#thumbBox #thumbImage{ /* สีพื้นของรูป */
  background-color:white;
}

#thumbLoading{ /* Loading */
  position:absolute;
  visibility:hidden;
  border:1px solid #583D2E;
  background-color:#FFFAF0;
  padding:5px;
  z-index:5;
}

การนำไปใช้งาน

<link rel="stylesheet" href="thumbview.css" type="text/css" />
<script src="thumbview.js" type="text/javascript"></script>
<br /><a href="1.jpg" onclick="return showimage('1.jpg')"><img src="01.jpg" alt="" /></a>
<br /><a href="2.jpg" onclick="return showimage('2.jpg')"><img src="02.jpg" alt="" /></a>

<a href="1.jpg" ถูกกำหนดเพื่อให้แสดงรูปแทนหากฟังก์ชั่น showimage ทำงานไม่สำเร็จ
ผู้เขียน goragod โพสต์เมื่อ 02 เม.ย. 2551 เปิดดู 19,989 ป้ายกำกับ JavascriptXHTMLCSS
^