썸네일을 클릭하면 레이어 팝업형태로 이미지를 띄웁니다.
팝업은 드래그 가능하며.. 팝업 오른쪽 하단 귀퉁이를 잡고 드래그 하면 확대,축소가 가능합니다.(페이지가 리프레쉬 될때까지는 다른 이미지를 클릭해도 확대 및 축소된 상태를 기억합니다.)
상단 타이틀바에 있는 +,-버튼을 이용하여 확대,축소 가능하고 X를 누르면 닫힙니다.
테마 설정방법은 아래 스크립트에 다음과 같은 옵션을 줄 수 있습니다.
var puTheme= "gray" ; //테마설정
옵션종류 : gray, blue, navy, black, brick, pink, brown, olive, linen
<html>
<head>
<title>해피CGI</title>
<script language="JavaScript1.2">
var puCopyright= "COPYRIGHT ⓒ 2004 - 2007 BLUE-B. ALL RIGHTS RESERVED." ; //하단 카피라이트 문장
var puTheme= "gray" ; //테마설정
var imgpreview= "이미지 팝업뷰" ; //타이틀바 제목
</script>
</head>
<body>
<div style="display:none">popvu</div>
<script language="JavaScript1.2" src="photo_popup.js"></script>
<b>각각의 썸네일 이미지를 클릭해보세요.</b><p>
<a href="image/Photo02.jpg" title="치즈케익" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo02.jpg" border=0 width="100"></a>
<a href="image/Photo05.jpg" title="My BMW" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo05.jpg" border=0 width="100"></a>
<a href="image/Photo06.jpg" title="베스보트" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo06.jpg" border=0 width="100"></a>
<a href="image/Photo07.jpg" title="귀여운 작은 술병들" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo07.jpg" border=0 width="100"></a>
<a href="image/Photo08.jpg" title="곡성기차마을" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo08.jpg" border=0 width="100"></a>
<a href="image/Photo09.jpg" title="소나무" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo09.jpg" border=0 width="100"></a>
</body>
</html>
|
