인터넷정보

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

알 수 없는 사용자 2007. 10. 11. 23:40

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>

반응형