|
|
Counter
|
|
|
|
오늘: 92
어제: 285
최대: 2,057
전체: 790,809
|
|
|
|
|
|
| 심플한 라이트박스 효과 (이미지, 아이프렘, html 지원) |
글쓴이 :  (알릭)
날짜 : 07-01-30 02:58
조회 : 13696
추천 : 1 |
|
| 트랙백 & 고유주소 : http://www.alik.info/gnu/bbs/tb.php/alik/1368
|
|
다들 라이트박스 아시죠? 이미지 클릭하면 주변배경이 반투명으로 어두워지면서...
가운데 이미지가 나와주는.... 그넘이 몇차례 진화하더니...스르르륵 거리고..멋쪄지고...
그것들을 응용해서 아이프렘이나..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; }
- .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/03/01)
- // 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 src=" + url + " width="+ arguments[2] +" height="+ arguments[3] +" class='SLB_center' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' onload='SLB_setCenter(this);' /></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) {}
- }
- }
- }
-
- 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="로딩중...클릭시 취소"> Loading... </div>
-
- <div style="margin:10px 0px 0px 20px;">
-
- <p><select><option value=1 />셀렉트 박스</select></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, '오~이쁘당!<i>김태희 ^^</i>');<br />
- 설명: SLB_show('이미지주소', 'image', 반투명배경클릭시닫기?(true or false), '캡션내용');<br /><br />
- <a onclick="SLB_show('http://www.yahoo.com','iframe', 600, 400, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>아이프레임 띄우기</a><br />
- SLB_show('http://www.yahoo.com','iframe', 600, 400, true);<br />
- SLB_show('아이프래임 src', 'iframe', 가로크기, 세로크기, 아이프렘하단에 닫기버튼표시?(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('<div style=\'border:2px solid red; width:200px; height:100px; background-color:yellow\'>하하하하하<br />ㅋㅋㅋㅋ</div>','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('<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);<br /><br /><br />
- * 닫기는 SLB_show(); 를 호출하면 닫힘<br />
- * 아이프래임의 내부에 있는 문서에서 닫을려면 parent.SLB_show(); 로 닫을수 있음.<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 />에서 수정가능
-
- <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>');
- </script>
- </div>
- </body>
- </html>
소스나 사용법은 미리보기 해보시면 다 알아보실겁니다... 기존 페이지에 넣어서 사용하시는 방법은.... 우선 위 소스에서 5줄부터 143줄까지의 내용이 모두 head 안에 들어가야 하구요... 그리고 <body> 밑에는 148줄부터 150줄까지 있는 3개의 div 가 들어가주면 설치 끝입니다. 나머진...위 미리보기에 나온 사용법을 응용해서 링크 잘 만들어서 쓰시면 되는거죠~ 홧팅!
추가1:
2007/01/30 오후 4시45분경... 이미지 밑에 캡션넣을수 있게 살짝 수정했습니다.~^^
추가2: 응용에 대한 설명인데요....
눌려질 이미지가 아이프레임내부에 있을경우... 본 효과에 사용된 스크립트와 스타일와 필수div 3개는 아이프레임의 바깥쪽에 설치해두고 아이프레임 내부에서 바깥페이지의 스크립트를 parent.SLB_show('이미지주소','image',false); 로 호출해주면 아이프레임내부에만 생기는 투명배경과 이미지를 아이프렘 바깥의 페이지 전체에 보여주게 할수 있겠습니다.
추가3:
2007/03/01 오후 6시경, select 박스들이 가려지게 수정했습니다. 기타 자잘한 버그 수정했습니다.
|
|
 |
|
와 감사합니다...
정말 빠르네요... 저는 그레이박스 5.? 인가 쓰는데 완전 잠수함급 이거든요..... 이히히.....회원사진 나오는거 이걸로 바꿔야지... 감사 대박팁....
|
|
|
 |
07-01-30 13:13 |
|
|
구석구석 적용할데있나 찾아봐야겠네요~ 감사
|
|
|
 |
07-01-30 14:56 |
|
소스도 짧군요!!
감사합니다~~!! 나중에 라이트박스 필요하면 가져다 써야겠심 ㅋ;
|
|
|
|
07-01-30 16:51 |
|
테스트결과 익스, 파폭, 오페라 전부 지원 짱짱하네요 ㅋ;
불여우2 와 오페라9에서 테스트 해봤습니다 ㅋㅋㅋ;
|
|
|
|
07-01-30 16:55 |
|
|
이미지 밑에 캡션넣을수 있게 살짝 수정했습니다.~^^
|
|
|
|
감사합니다.......
적용하였습니다.......
정말 가볍고 최고로 좋습니다...
|
|
|
|
|
심플한 LIGHT BOX "알릭님의 LIGHT 버전"
본 게시물은 펌글입니다.미리보기 미니위니의 미리보기 페이지알릭님의 말 : more.. 서두 :예전에 만들었다가... 소스분실후에... 간지님께서 잘 보관중이시라는 정보를 입수하고....전달받아서 만져보다가...재미붙어서리...업그레이드해놓고 보니... 쓸만해서 올립니당.예…
http://hanr.golbin.net/tt/29
|
|
|
|
|
알릭님이 소개해준 그레이 박스 구버전 사용하고 있는데.. 이게 더 빠르군요 시간 나는대로 적용입니다. ^^
|
|
|
|
와~
알릭님, 가져다 쓸게요~
소스 분석해 보고 싶지만...살짝 귀찮아서 냅다 COPY&PASTE 합니다.
항상 고마워욤~
|
|
|
|
감사합니다. 잘 쓰고 있습니다.
그런데 제로보드 첨부이미지를 클릭하면 라이트박스로 띄우고 싶습니다.
어떻게 하면 될까요?
|
|
|
 |
07-05-26 11:28 |
|
|
배경 반투명 본문은 잘보임
|
|
|
|
|
php에서 인클루드를 사용했을때도 아이프레임과 동일하게 적용시켜야하나요? 아닌거 같은데 인클루드했을때는 안되네요;;
|
|
|
|
|
정말 너무 많아요. 공부 할것들이 휴우...언제 다 하나 정말 감사 드립니다. 자주 찾아와야 겠네요.
|
|
|
|
|
와 정말 잘만드셨네여...감사합니다.
|
|
|
|
|
ㅠㅠ 정말 멋찌다.. 감사해요
|
|
|
|
|
