예전에 웹 2.0이 막 이슈가 됐을때 이미지나 대화창을 웹에서 멋지게 띄워주는 라이트박스 라는것을 보고 적용해보고 싶어서 소스를 다운 받았는데, 분량이 너무 많아서 소스를 다 분석 하기가 힘들더군요. 그래서 다음으로 미루려다 알릭님의 심플 라이트박스라는걸 우연히 발견하고 공부할겸 소스에 한줄 한줄 주석을 다는 작업을 했었습니다.
이렇게 이미지를(또는 웹페이지) 띄워주고 배경은 반투명하게 만들어 줍니다. 이곳 텍스트큐브에도 라이트박스효과가 있지요.
lightBoxEffect.zip
소스보기..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>심플 라이트박스 효과</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type="text/css">
html { width:100%; height:100%; }
body { width:100%; height:100%; margin: 0px; padding: 0px; font-size:9pt; }
.SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}
.SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
.SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
#SLB_loading { cursor: pointer; display:none; z-index: 99998; position:absolute; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding: 3px 0px 4px 0px; border: solid 2px #cfcfcf; }
</style>
<script language="javascript" type="text/javascript">
// 심플 라이트박스 효과 by 알릭 (2007/11/07)
// http://www.alik.info
// 주석 : nayuta
var SLB_cnt = 0;
function SLB(url, type)
{
var a = document.getElementById('SLB_film'); // 반투명 검정 배경 div
var b = document.getElementById('SLB_content'); // 내용을 띄워줄 div
var c = document.getElementById('SLB_loading'); // 로딩중 메시지 div
if(url) {
a.style.top = 0; // 배경 최상단 고정
a.style.left = 0;
a.style.display = ""; // 스타일 속성 초기화
if (document.documentElement.scrollHeight > document.body.scrollHeight) { //아마도 스크롤 상태라면 ...
a.style.height = document.documentElement.scrollHeight + 'px'; //배경을 스크롤 높이 까지 넓여줘라
} else { //그게 아니면
a.style.height = document.body.scrollHeight + 'px'; // 바디 크기만큼만 덮어줌
}
c.style.display = "block"; //일단 로딩중 메시지를 띄워줌
// 로딩 오브젝트 위치 설정
SLB_setCenter(c,true);
//컨텐트 박스 타입에 따라 설정
if(type == 'image') { //타입이 이미지라면
b.innerHTML="<img src=" + url + " class='SLB_center' onload='SLB_setCenter(this);' />"; //이미지 경로를 걸어주고 위치를 설정해 준다
if(arguments[2]) a.onclick = function () { SLB() }; //전달받은 세번째 인자가 true라면 필름에 화면닫기 붙여줌
if(arguments[3]) b.innerHTML += "<div class='SLB_caption'>"+ arguments[3] +"</div>"; //전달받은 네번째 인자가 있다면 그 인자값으로 캡션을 붙여넣어줌
} else if (type == 'iframe') { //전달받은 인자가 iframe라면
b.innerHTML="<iframe id='SLB_iframe' src=" + url + " width="+ arguments[2] +" height="+ arguments[3] +" class='SLB_center' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' onload='tryReHeight("+arguments[5]+");'/></iframe>"; //아이프레임을 넣고 넓이와 높이 그리고 화면사이즈에 따른 높이 설정을 넣어준다
if(arguments[4]) { //다섯번째 인자가 있다면
b.innerHTML += "<div class='SLB_close' onclick='SLB();' title='닫기'>close</div>"; //닫기 버튼을 넣어준다.
}
b.onclick = ''; //iframe 타입은 내용박스에 클릭 이벤트 없음
b.firstChild.style.cursor = 'default'; //첫번째자식인 iframe에 커서 스타일 기본
} else if (type='html'){ //타입이 html 이라면
b.innerHTML = url; //url을 써줌
SLB_setCenter(b.firstChild);
if(arguments[2]) b.onclick = ''; //세번째 인자값이 true라면 지워줌
}
hideSelect();
} else { //전달받은 오브젝트가 없다면
a.onclick = ''; //이벤트 지움
a.style.display = "none"; //화면 표시 안함
a.style.height = '100%';
a.style.width = '100%';
b.innerHTML = ""; //초기화
b.onclick = function () { SLB() };
c.style.display = "none";
showSelect();
SLB_cnt = 0;
}
}
//받은 오브젝트를 센터에 고정
function SLB_setCenter(obj) {
if (obj) {
//clientHeight 속성값은 블럭 개체의 높이를 픽셀단위로 나타내는 정수값이다
//window 개체는 사용자 체계의 최상위 개체인 윈도우를 호출하여 접속하고, 윈도우의 속성들를 설정할 수 있게 한다.
//innerHeight / innerWidth 윈도우의 내부의 높이 / 너비를 픽셀단위로 반환하거나 지정한다
//self 현재의 윈도우나 프레임의 참조를 반환한다.
//document 개체는 현재 열려있는 HTML 문서를 말하며 script를 통해 접속하고 제어를 가능하게 한다.
//clientHeight 블럭 개체의 높이를 픽셀단위로 반환한다
//pageXOffset / pageYOffset 현재 페이지의 보이는 윈도우 상에서 왼쪽 맨위 모서리의 X, Y 위치를 반환한다
//documentElement 문서의 최상위 노드(root) 참조를 반환한다.
//scrollLeft 개체의 왼쪽 모서리와 현재 윈도우에서 보이는 내용의 가장 왼쪽까지의 거리를 반환하거나 설정한다.
var h = (window.innerHeight || self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight); //값들중 하나를 높이값으로 구함
var w = (window.innerWidth || self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth); //값들중 하나를 넓이값으로 구함
var l = ((window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) + ((w-(obj.width||parseInt(obj.style.width)||obj.offsetWidth))/2)); //스크롤 된 길이를 감안하여 창에서 오브젝트의 넓이의 반만큼 뺀 값
var t = ((window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) + ((h-(obj.height||parseInt(obj.style.height)||obj.offsetHeight))/2)); //스크롤 된 높이를 감안하여 창에서 오브젝트의 높이의 반만큼 뺀 값
if((obj.width||parseInt(obj.style.width)||obj.offsetWidth) >= w) l = 0; //오브젝트 넓이가 화면 넓이보다 넓거나 같다면 왼쪽 위치 0
if((obj.height||parseInt(obj.style.height)||obj.offsetHeight) >= h) t = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); //오브젝트가 높이가 화면보다 크다면 스크롤된 높이위치에 띄워줌
document.getElementById('SLB_content').style.left = l + "px"; //컨텐트 박스 왼쪽 포지션 설정
if(SLB_cnt == 0) { //
document.getElementById('SLB_content').style.top = t + "px"; //컨텐드 박스 위쪽 포지션 설정
if(document.getElementById('SLB_content').offsetHeight >= h - 20) { //실제 컨텐트 박스의 크기가 높이 -20보다 크다면
SLB_cnt ++;
}
if(obj.nextSibling && (obj.nextSibling.className == 'SLB_close' || obj.nextSibling.className == 'SLB_caption')) { //다음 오브젝트가 존재하고 클레스네임이 SLB_close 이거나 SLB_caption이라면
obj.nextSibling.style.display = 'block'; //화면 표시
if((t - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop))>(obj.nextSibling.offsetHeight/2)) { //
document.getElementById('SLB_content').style.top = parseInt(document.getElementById('SLB_content').style.top) - (obj.nextSibling.offsetHeight/2) + "px";
}
}
}
obj.style.visibility = 'visible'; //오브젝트 표시
if(!arguments[1]) { // arguments : 함수를 호출할 때 전달되는 인자에 대응되는 배열 형태의 객체
document.getElementById('SLB_loading').style.display = "none"; //로딩 화면 표시 지움
} else {
obj.style.left = l + "px"; //오브젝트 위치 설정
obj.style.top = t + "px";
}
}
}
//셀렉트 박스 숨김
function hideSelect() {
var windows = window.frames.length;
var selects = document.getElementsByTagName("SELECT");
for (i=0;i < selects.length ;i++ )
{
selects[i].style.visibility = "hidden";
}
if (windows > 0) {
for(i=0; i < windows; i++) {
try {
var selects = window.frames[i].document.getElementsByTagName("SELECT");
for (j=0;j<selects.length ;j++ )
{
selects[j].style.visibility = "hidden";
}
} catch (e) {}
}
}
}
//셀렉트 박스 보임
function showSelect() {
var windows = window.frames.length;
var selects = document.getElementsByTagName("SELECT");
for (i=0;i < selects.length ;i++ )
{
selects[i].style.visibility = "visible";
}
if (windows > 0) {
for(i=0; i < windows; i++) {
try {
var selects = window.frames[i].document.getElementsByTagName("SELECT");
for (j=0;j<selects.length ;j++ )
{
selects[j].style.visibility = "visible";
}
} catch (e) {}
}
}
}
//화면 비율에 따른 컨텐트 넓이
function tryReHeight(sign) {
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0;
var currentfr=document.getElementById('SLB_iframe');
if(sign == true) {
try {
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) {
setIframeSize(currentfr.contentDocument.body.offsetHeight+FFextraHeight);
} else if (currentfr.Document && currentfr.Document.body.scrollHeight) {
setIframeSize(currentfr.Document.body.scrollHeight);
}
}catch(e) { }
} else {
SLB_setCenter(currentfr);
}
}
//아이프레임 위치 설정
function setIframeSize(h, w) {
SLB_cnt = 0;
var ifr = currentfr=document.getElementById('SLB_iframe');
if (ifr) {
if(w) {
ifr.width = w;
}
if(h) {
ifr.height = h;
}
SLB_setCenter(ifr);
}
}
//스크롤 됐을경우 필름 맞춤
var prevOnScroll = window.onscroll;
window.onscroll = function () {
if(prevOnScroll != undefined) prevOnScroll();
if (document.documentElement.scrollHeight > document.body.scrollHeight) {
document.getElementById('SLB_film').style.height = document.documentElement.scrollHeight + 'px';
} else {
document.getElementById('SLB_film').style.height = document.body.scrollHeight + 'px';
}
document.getElementById('SLB_film').style.width = document.body.scrollWidth + 'px';
SLB_setCenter(document.getElementById('SLB_content').firstChild); //다시 중앙 맞춤
}
//리사이즈시 필름 맞춤
var prevOnResize = window.onresize;
window.onresize = function () {
if(prevOnResize != undefined) prevOnResize();
if (document.documentElement.scrollHeight > document.body.scrollHeight) {
document.getElementById('SLB_film').style.height = document.documentElement.scrollHeight + 'px';
} else {
document.getElementById('SLB_film').style.height = document.body.scrollHeight + 'px';
}
document.getElementById('SLB_film').style.width = document.body.offsetWidth + 'px';
SLB_setCenter(document.getElementById('SLB_content').firstChild); //다시 중앙 맞춤
}
</script>
</head>
<body>
<div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#000000; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div>
<div id="SLB_content" onclick="SLB();" align="center" style="z-index: 99999; position:absolute;"></div>
<div id="SLB_loading" onclick="SLB();" title="로딩중...클릭시 취소"> Loading... </div>
<div style="margin:10px 0px 0px 20px;">
<p><select><option value=1 />셀렉트 박스</select></p>
<h3><a href="./slb.js">slb.js 다운로드</a> & 아래 내용은 설치법 및 사용예제!</h3>
<p style="line-height: 1.6">페이지에 slb.js 를 <script language="javascript" type="text/javascript" src="/slb.js" ></script> 와 유사한 방식으로 추가해 주신후에 <br />
<br />
<style type="text/css"><BR> html { width:100%; height:100%; }<BR> body { width:100%; height:100%; margin: 0px; padding: 0px; font-size:9pt; }<BR> .SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}<BR> .SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }<BR> .SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }<BR> #SLB_loading { cursor: pointer; display:none; z-index: 99998; position:absolute; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding: 3px 0px 4px 0px; border: solid 2px #cfcfcf; }<BR></style>
<br /><br />페이지에 위와 같이 스타일을 추가해주시구요~(css 에 추가하시거나~)<br /><br />
<div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#000000; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div><br />
<div id="SLB_content" onclick="SLB();" align="center" style="z-index: 99999; position:absolute;"></div> <br />
<div id="SLB_loading" onclick="SLB();" title="로딩중...클릭시 취소"> Loading... </div><br /><br />
위 3개 div 를 <body> 바로 밑에 추가해주시고 나서 아래의 예제를 참고하여 링크에 href="javascript:SLB('...');" 방식이나 onclick="SLB('...');" 으로 이용하시면 됩니다.</p>
<a onclick="SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>이미지 띄우기</a><br />
실행코드: SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',true);<br />
설명: SLB('이미지주소', 'image', 반투명배경클릭시닫기?(true or false));<br /><br />
<a onclick="SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',false, '오~이쁘당!<i>김태희 ^^</i><br />하하하하하<br />하하');" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>이미지 띄우기 - 캡션과 함께</a><br />
실행코드: SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',false, '오~이쁘당!<i>김태희 ^^</i>');<br />
설명: SLB('이미지주소', 'image', 반투명배경클릭시닫기?(true or false), '캡션내용');<br /><br />
<a onclick="SLB('http://www.naver.com','iframe', 600, 400, true, false);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>아이프레임 띄우기</a> <a onclick="SLB('./blank1.html','iframe', 400, 400, true, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>[1]</a> <a onclick="SLB('./blank2.html','iframe', 400, 400, true, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>[2]</a><br />
SLB('http://www.yahoo.com','iframe', 600, 400, true, false);<br />
[1] = SLB('./blank1.html','iframe', 400, 200, true, true)<br />
[2] = SLB('./blank2.html','iframe', 400, 400, true, true)<br />
설명: SLB('아이프래임 src', 'iframe', 가로크기, 세로크기, 아이프렘하단에 닫기버튼표시?(true or false), 내용에 맞게 아이프레임의 높이 자동 조절?(true or false));<br /><br />
<a onclick="SLB('<div style=\'border:2px solid red; width:200px; height:100px; background-color:yellow\'>하하하하하<br />ㅋㅋㅋㅋ</div>','html');" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>html 띄우기1</a><br />
SLB('<div style=\'border:2px solid red; width:200px; height:100px; background-color:yellow\'>하하하하하<br />ㅋㅋㅋㅋ</div>','html');<br />
설명: SLB('html 소스', 'html', 중앙 내용클릭해도 안닫히기?(true or false));
<br /><br />
<a onclick="SLB('<div id=\'asd\'><div>TABLE</div><table border=1 bgcolor=#ffffff><tr><td>다른곳은</td><td> 클릭해도</td></tr><tr><td>안닫힘</td><td onclick=\'SLB();\' bgcolor=\'red\'>닫기는여기<br />onclick=\'SLB();\'</td></tr></table></div>','html', true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>html 띄우기2</a>
<br />
SLB('<div id=\'asd\'><div>TABLE</div><table border=1 bgcolor=#ffffff><tr><td>다른곳은</td><td>클릭해도</td></tr><tr><td>안닫힘</td><td onclick=\'SLB();\' bgcolor=\'red\'>닫기는여기<br />onclick=\'SLB();\'</td></tr></table></div>','html', true);<br />
<p><iframe width=200 height=100 id="testframe" name="testframe"></iframe></p>
<script>
testframe.document.write('<p>아이프레임 내부의<br /><br /><select><option value=1 />셀렉트 박스</select></p>');
testframe.document.close();
</script>
<p>
* 닫기는 SLB(); 를 호출하면 닫힘<br />
* 아이프래임의 내부에 있는 문서에서 닫을려면 parent.SLB(); 로 닫을수 있음.<br />
* 로딩중 표시를 클릭하면 로딩 취소됨<br />
* 반투명배경의 투명도 및 색상은 <br />
<div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; <font style="BACKGROUND-COLOR: #ffff00" color=#fe1100>background-color:#000000; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;</font>"></div>
<br />에서 수정가능<br />
* 검정색 이미지 테두리의 두께와 색상은<br />
.SLB_center { cursor:pointer; visibility:hidden; <font style="BACKGROUND-COLOR: #ffff00" color=#fe1100>border: solid 4px #000000;</font> background-color: #FFF}
<br />에서 수정가능<br />
* '내용에 맞게 아이프레임의 높이 자동 조절' 은 아이프레임 내부의 문서가 외부의 문서와 같은 도메인 안에 존재할때만 작동함.<br />
* '내용에 맞게 아이프레임의 높이 자동 조절' 을 true 로 설정해도 기본으로 아무값이나 가로, 세로 값을 넣어줘야 함!.
</p><p> </p>
</div>
</body>
</html>
비밀 댓글 입니다.
답글삭제비밀 댓글 입니다.
답글삭제@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cool sitename man)))
@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cool sitename man)))
@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cool sitename man)))
@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cool sitename man)))
비밀 댓글 입니다.
답글삭제비밀 댓글 입니다.
답글삭제비밀 댓글 입니다.
답글삭제@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cooooolest domain name)))
------------------------
ads: http://dewat.ru/
@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cooooolest domain name)))
------------------------
ads: http://dewat.ru/
@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cooooolest domain name)))
------------------------
ads: http://dewat.ru/
@Anonymous - 2009/01/19 15:25
답글삭제nayuta.textcube.com - cooooolest domain name)))
------------------------
ads: http://dewat.ru/
@Anonymous - 2009/01/19 15:25
답글삭제ix3yrg3l608jgtcs
답글
@Anonymous - 2009/01/19 15:25
답글삭제<a href=http://www.kennavi.net/smf/index.php?topic=1228.0>ѓVѓAѓЉѓX •›Ќм—p</a>
ѓVѓAѓЉѓX Њш‚©‚И‚ў ѓVѓAѓЉѓXЏщ
@Anonymous - 2009/01/19 15:25
답글삭제<a href=http://www.kennavi.net/smf/index.php?topic=1228.0>ѓVѓAѓЉѓX ЊВђl—A“ь</a> 3:*> <a hrefl="http://www.kennavi.net/smf/index.php?topic=1228.0">ѓVѓAѓЉѓX ЊВђl—A“ь</a>
<a href=http://www.kennavi.net/smf/index.php?topic=1247.0>ѓoѓCѓAѓOѓ‰</a> :-8( ѓVѓAѓЉѓX Њш‚©‚И‚ў ѓVѓAѓЉѓX ”М”„
@Anonymous - 2009/01/19 15:25
답글삭제ѓVѓAѓЉѓX ”М”„ (:- <a hrefl="http://www.kennavi.net/smf/index.php?topic=1228.0">ѓVѓAѓЉѓXЏщ</a>
<a href=http://viagura.wikidot.com>ѓoѓCѓAѓOѓ‰</a> :-x ѓVѓAѓЉѓX ”М”„ ѓVѓAѓЉѓX ”М”„