วันนี้จะเอา Script ที่ใช้เวลาคลิกดูรูปเล็กให้เปิดเป็นรูปใหญ่ให้ popup และค่อยๆ ขยายขึ้นมานะครับ
1. สร้างไฟล์ demo.html เพื่อใช้ในการทดสอบ Script นะครับ แล้ว copy code ด้านล่างนี้ เอาไว้ที่ tag <body>...</body> นะครับ
<SCRIPT language=javascript type=text/javascript>
<!--
var winheight=100
var winwidth=100
var cat=null
step=1;
function catswindows(name,width,height,title)
{
if (!document.all)
{
if (!document.layers)
{
paramstp="height="+height+",width="+width+",top=10"+
",left=10,scrollbars=no,location=no"+
",directories=no,status=no,menubar=no,toolbar=no,resizable=no"
cat=window.open("","cat",paramstp);
oldstr="<html><title>"+title+"</title><body background="+name+">"+"</b"+"ody></h"+"tml>";
cat.document.write(oldstr);
if (cat.focus){cat.focus();}
return;
}
else
{
LeftPosition=(screen.width)?(screen.width-width)/2:100;
TopPosition=(screen.height)?(screen.height-height)/2:100;
paramstp="height="+height+",width="+width+",top="+TopPosition+
",left="+LeftPosition+",scrollbars=no,location=no"+
",directories=no,status=no,menubar=no,toolbar=no,resizable=no"
cat=window.open("","cat",paramstp);
loadpos=height/2-40
string="<html><title>"+title+"</title><body bgcolor=black>
<div id=loadintxt style='position:absolute;top:"+loadpos+"px'></div>"
string1='<s'+'cript>var animColorIndex=0;colorArray=["#FFFFFF","#CCCCCC","#999999",
"#666666","#333333","#000000","#333333","#666666","#999999","#CCCCCC"];'
string2='function textLooping(){if(animColorIndex==10)animColorIndex=0;document.loadintxt.document.open();'
string3='document.loadintxt.document.write("<center><font size=4 face=Comic Sans MS color="+colorArray[animColorIndex]+"><b>Loading...</b></font></center>");document.loadintxt.document.close();'
string4='animColorIndex++;};animInterval=setInterval("textLooping()",200);</s'+'cript>'
string5='<s'+'cript language="jav'+'ascript1.2">'
string6="function init(){document.catpic.visibility='show';clearInterval(animInterval);document.loadintxt.visibility='hide';};"
string7="</s"+"cript>"
string8="<div id=catpic style='position:absolute;left:0px;top:0px;visibility:hidden'>"
string9="<img src='"+name+"' width="+width+" height="+height+" border=0 onload='init()'></div></b"+"ody></h"+"tml>";
cat.document.writeln(string);
cat.document.writeln(string1);
cat.document.writeln(string2);
cat.document.writeln(string3);
cat.document.writeln(string4);
cat.document.writeln(string5);
cat.document.writeln(string6);
cat.document.writeln(string7);
cat.document.writeln(string8);
cat.document.writeln(string9);
if(cat.focus){cat.focus();}
return;
}
}
LeftPosition=(screen.width)?(screen.width-width)/2:100;
TopPosition=(screen.height)?(screen.height-height)/2:100;
paramstp="height="+winheight+",width="+winwidth+",top="+TopPosition+
",left="+LeftPosition+",scrollbars=no,location=no"+
",directories=no,status=no,menubar=no,toolbar=no,resizable=no"
cat=window.open("","cat",paramstp);
string="<html><title>"+title+"</title><body topmargin=0 leftmargin=0 bgcolor=black>"
string1="<div id=loadintxt style='position:absolute;width:100%;top:45%;text-align:center;visibility:visible;font-family:
Comic Sans MS;font-size:16px; font-weight:bold'>Loading...</div>"
string2="<div id=errtxt style='position:absolute;width:100%;top:45%;text-align:center;visibility:visible;font-family:
Comic Sans MS;font-size:16px;color:red;font-weight:bold;visibility:hidden'>ERROR!!! Please try again</div>"
string3='<s'+'cript>'+'var animColorIndex=0;'+
'colorArray=["#FFFFFF","#CCCCCC","#999999","#666666","#333333","#000000","#333333","#666666"
,"#999999","#CCCCCC"];'+'function textLooping(){if(animColorIndex==10)animColorIndex=0;'+
'loadintxt.style.color=colorArray[animColorIndex];'+
'animColorIndex++;}animInterval=setInterval("textLooping()",200);'
string4='function erroccur(){clearInterval(animInterval);'+
"loadintxt.style.visibility='hidden';"+
"errtxt.style.visibility='visible';}"+'</s'+'cript>'
string5='<s'+'cript language="jav'+'ascript1.2">'+
'function init(){clearInterval(animInterval);'+
"loadintxt.style.visibility='hidden';"+
'fltr.filters.item(0).Apply();fltr.filters.item(0).Play();'+
'fltr.style.visibility="visible";}'+'</s'+'cript>';
string6='<img id="fltr" style="filter:BlendTrans(Duration=5);visibility:hidden" src="'+name+'" border=0'+
' width='+width+' height='+height+' onload="init()" onerror="erroccur()">'+
'</b'+'ody></h'+'tml>';
cat.document.writeln(string);
cat.document.writeln(string1);
cat.document.writeln(string2);
cat.document.writeln(string3);
cat.document.writeln(string4);
cat.document.writeln(string5);
cat.document.writeln(string6);
x = y = step
while (x | y)
{
cat.resizeBy (x, y)
if (cat.document.body.clientWidth >= width) x = 0
if (cat.document.body.clientHeight >= height) y = 0
}
if(cat.focus){cat.focus();}
}
function CloseCatWin()
{if(cat!=null && cat.open)cat.close()}
window.onfocus=CloseCatWin;
//-->
</SCRIPT>
2. หลังจากนั้นเรามาสร้าง Link เพื่อให้ popup รูปภาพใหญ่ก็เป็นอันเสร็จเีรีัยบร้อยครับ ตามตัวอย่างด้านล่างครับ
<a href="#" onClick="catswindows('่ชื่อรูปภาพขนาดใหญ่','ขนาดความกว้างของรูป','ขนาด ความสูงของรูป','animate win for pic'); return false"><img src="ชื่อรูปภาพขนาดใหญ่" width="ขนาดของรูป" height="ขนาดของรูป" border="0" /></a>
ที่มา pantips
....
ReplyDelete