심플한 라이트박스 효과 (이미지, 아이프레임, html 지원)

인터넷관련 2008. 2. 16. 12:59

http://oxtag.com/html/ex/slb.html

<html>
<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/08/22)
 // http://www.alik.info

 var SLB_cnt = 0;

 function SLB_show(url, type)
 {
  var a = document.getElementById('SLB_film');
  var b = document.getElementById('SLB_content');
  var c = document.getElementById('SLB_loading');
  if(url) {
   a.style.top = 0;
   a.style.left = 0;
   a.style.display = "";
   a.style.height = document.body.scrollHeight + 'px';
   document.getElementById('SLB_loading').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_show() };
    if(arguments[3]) b.innerHTML += "<div class='SLB_caption'>"+ arguments[3] +"</div>";;
   } else if (type == '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_show();' title='닫기'>close</div>";
    }
    b.onclick = ''; b.firstChild.style.cursor = 'default';
   } else if (type='html'){
    b.innerHTML = url;
    SLB_setCenter(b.firstChild);
    if(arguments[2]) b.onclick = '';
   }
   hideSelect();
  } else {
   a.onclick = '';
   a.style.display = "none";
   b.innerHTML = "";
   b.onclick = function () { SLB_show() };
   c.style.display = "none";
   showSelect();
   SLB_cnt = 0;
  }
 }
 
 function SLB_setCenter(obj) {
  if (obj) {
   var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
   var w = window.innerWidth || self.innerWidth || document.body.clientWidth;
   var l = (document.body.scrollLeft + ((w-(obj.width||parseInt(obj.style.width)||obj.offsetWidth))/2));
   var t = (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;
   if((obj.height||parseInt(obj.style.height)||obj.offsetHeight) >= h) t = 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) {
     SLB_cnt ++;
    }
   }
   obj.style.visibility = 'visible';
   if(obj.nextSibling && (obj.nextSibling.className == 'SLB_close' || obj.nextSibling.className == 'SLB_caption')) {
    obj.nextSibling.style.display = 'block';
    if(document.getElementById('SLB_content').offsetHeight < h) {
     document.getElementById('SLB_content').style.top = parseInt(document.getElementById('SLB_content').style.top) -     (obj.nextSibling.offsetHeight/2) + "px";
    }
   }
   if(!arguments[1]) {
    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();
  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();
  document.getElementById('SLB_film').style.height = document.body.offsetHeight + '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_show();" align="center" style="z-index: 99999; position:absolute;"></div>
<div id="SLB_loading" onclick="SLB_show();" title="로딩중...클릭시 취소">&nbsp;Loading...&nbsp;</div>

<div style="margin:10px 0px 0px 20px;">

<p><select><option value=1 />셀렉트 박스</select></p>

<h3><a href="./slb.js">slb.js 다운로드</a> &amp; 아래 내용은 설치법 및 사용예제!</h3>

<p style="line-height: 1.6">페이지에 slb.js 를 &lt;script language="javascript" type="text/javascript" src="/slb.js" &gt;&lt;/script&gt; 와 유사한 방식으로 추가해 주신후에 <br />
<br />
&lt;style type="text/css"&gt;<BR>&nbsp;html { width:100%; height:100%; }<BR>&nbsp;body { width:100%; height:100%; margin: 0px; padding: 0px; font-size:9pt; }<BR>&nbsp;.SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}<BR>&nbsp;.SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }<BR>&nbsp;.SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }<BR>&nbsp;#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>&lt;/style&gt;
<br /><br />페이지에 위와 같이 스타일을 추가해주시구요~(css 에 추가하시거나~)<br /><br />
&lt;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;">&lt;/div&gt;<br />
&lt;div id="SLB_content" onclick="SLB_show();" align="center" style="z-index: 99999; position:absolute;">&lt;/div&gt;     <br />
&lt;div id="SLB_loading" onclick="SLB_show();" title="로딩중...클릭시 취소">&nbsp;Loading...&nbsp;&lt;/div&gt;<br /><br />
위 3개 div 를 &lt;body&gt; 바로 밑에 추가해주시고 나서 아래의 예제를 참고하여 링크에 href="javascript:SLB_show('...');" 방식이나 onclick="SLB_show('...');" 으로 이용하시면 됩니다.</p>
<a onclick="SLB_show('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_show('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',true);<br />
설명: SLB_show('이미지주소', 'image', 반투명배경클릭시닫기?(true or false));<br /><br />
<a onclick="SLB_show('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',false, '오~이쁘당!<i>김태희 ^^</i>');" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>이미지 띄우기 - 캡션과 함께</a><br />
실행코드: SLB_show('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',false, '오~이쁘당!&lt;i&gt;김태희 ^^&lt;/i&gt;');<br />
설명: SLB_show('이미지주소', 'image', 반투명배경클릭시닫기?(true or false), '캡션내용');<br /><br />
<a onclick="SLB_show('http://www.yahoo.com','iframe', 600, 400, true, false);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>아이프레임 띄우기</a> &nbsp; <a onclick="SLB_show('./blank1.html','iframe', 400, 400, true, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>[1]</a> &nbsp; <a onclick="SLB_show('./blank2.html','iframe', 400, 400, true, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>[2]</a><br />
SLB_show('http://www.yahoo.com','iframe', 600, 400, true, false);<br />
[1] = SLB_show('./blank1.html','iframe', 400, 200, true, true)<br />
[2] = SLB_show('./blank2.html','iframe', 400, 400, true, true)<br />
설명: SLB_show('아이프래임 src', 'iframe', 가로크기, 세로크기, 아이프렘하단에 닫기버튼표시?(true or false), 내용에 맞게 아이프레임의 높이 자동 조절?(true or false));<br /><br />
<a onclick="SLB_show('<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_show('&lt;div style=\'border:2px solid red; width:200px; height:100px; background-color:yellow\'&gt;하하하하하&lt;br /&gt;ㅋㅋㅋㅋ&lt;/div&gt;','html');<br />
설명: SLB_show('html 소스', 'html', 중앙 내용클릭해도 안닫히기?(true or false));
<br /><br />
<a onclick="SLB_show('<div id=\'asd\'><div>TABLE</div><table border=1 bgcolor=#ffffff><tr><td>다른곳은</td><td> 클릭해도</td></tr><tr><td>안닫힘</td><td onclick=\'SLB_show();\' bgcolor=\'red\'>닫기는여기<br />onclick=\'SLB_show();\'</td></tr></table></div>','html', true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>html 띄우기2</a>
<br />
SLB_show('&lt;div id=\'asd\'&gt;&lt;div&gt;TABLE&lt;/div&gt;&lt;table border=1 bgcolor=#ffffff&gt;&lt;tr&gt;&lt;td&gt;다른곳은&lt;/td&gt;&lt;td&gt;클릭해도&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;안닫힘&lt;/td&gt;&lt;td onclick=\'SLB_show();\' bgcolor=\'red\'&gt;닫기는여기&lt;br /&gt;onclick=\'SLB_show();\'&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;','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_show(); 를 호출하면 닫힘<br />
* 아이프래임의 내부에 있는 문서에서 닫을려면 parent.SLB_show(); 로 닫을수 있음.<br />
* 로딩중 표시를 클릭하면 로딩 취소됨<br />
* 반투명배경의 투명도 및 색상은 <br />
&lt;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>"&gt;&lt;/div&gt;
<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>&nbsp;</p>
</div>
</body>
</html>

invalid-file

'인터넷관련' 카테고리의 다른 글

PHP 유용한상수들 SID 라는 상수  (0) 2008.02.16
설문조사 등등 로딩바 구현  (0) 2008.02.16
PHP로 작동하는 RSS 읽는 함수  (0) 2008.02.16
파일을 찾아내고 속성 알아내는 구문  (0) 2008.02.16
HTTP 인증(Basic타입)이 걸린 URL을 fsockopen에서 여는 방법  (0) 2008.02.16
설치가 필요없는 ftp, telnet 프로그램  (0) 2008.02.16
파폭에서 익스플로러를 쓰자  (0) 2008.02.16
레이어를 셀렉트박스, 자바애플릿 위에 오게 하는 방법  (0) 2008.02.16
Posted by 알 수 없는 사용자
,

티스토리툴바