심플 라이트박스 효과

slb.js 다운로드 & 아래 내용은 설치법 및 사용예제!

페이지에 slb.js 를 <script language="javascript" type="text/javascript" src="/slb.js" ></script> 와 유사한 방식으로 추가해 주신후에

<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>

페이지에 위와 같이 스타일을 추가해주시구요~(css 에 추가하시거나~)

<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>

위 3개 div 를 <body> 바로 밑에 추가해주시고 나서 아래의 예제를 참고하여 링크에 href="javascript:SLB('...');" 방식이나 onclick="SLB('...');" 으로 이용하시면 됩니다.

이미지 띄우기
실행코드: SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',true);
설명: SLB('이미지주소', 'image', 반투명배경클릭시닫기?(true or false));

이미지 띄우기 - 캡션과 함께
실행코드: SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',false, '오~이쁘당!<i>김태희 ^^</i>');
설명: SLB('이미지주소', 'image', 반투명배경클릭시닫기?(true or false), '캡션내용');

아이프레임 띄우기 [1] [2]
SLB('http://www.yahoo.com','iframe', 600, 400, true, false);
[1] = SLB('./blank1.html','iframe', 400, 200, true, true)
[2] = SLB('./blank2.html','iframe', 400, 400, true, true)
설명: SLB('아이프래임 src', 'iframe', 가로크기, 세로크기, 아이프렘하단에 닫기버튼표시?(true or false), 내용에 맞게 아이프레임의 높이 자동 조절?(true or false));

html 띄우기1
SLB('<div style=\'border:2px solid red; width:200px; height:100px; background-color:yellow\'>하하하하하<br />ㅋㅋㅋㅋ</div>','html');
설명: SLB('html 소스', 'html', 중앙 내용클릭해도 안닫히기?(true or false));

html 띄우기2
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);

* 닫기는 SLB(); 를 호출하면 닫힘
* 아이프래임의 내부에 있는 문서에서 닫을려면 parent.SLB(); 로 닫을수 있음.
* 로딩중 표시를 클릭하면 로딩 취소됨
* 반투명배경의 투명도 및 색상은
<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>
에서 수정가능
* 검정색 이미지 테두리의 두께와 색상은
.SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}
에서 수정가능
* '내용에 맞게 아이프레임의 높이 자동 조절' 은 아이프레임 내부의 문서가 외부의 문서와 같은 도메인 안에 존재할때만 작동함.
* '내용에 맞게 아이프레임의 높이 자동 조절' 을 true 로 설정해도 기본으로 아무값이나 가로, 세로 값을 넣어줘야 함!.