라이트박스 효과 (이미지, 아이프렘, html 지원)

인터넷관련 2008. 2. 15. 10:31
<!--StartFragment--><html> 
    <head> 
        <title>심플 라이트박스 효과</title> 
        <meta&#033&#033 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> 
        <pre class="scripts" 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);        
            }  
        </pre> 
    </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>

        <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);" 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('&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 /><br /><br /> 
        * 닫기는 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 />에서 수정가능

<p><iframe width=200 height=100 id="testframe" name="testframe"></iframe></p>
<pre class="scripts">
testframe.document.write('<p>아이프레임 내부의<br /><br /><select><option value=1 />셀렉트 박스</select></p>');
</pre>
    </div> 
    </body> 
</html>

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

이쁜 테이블 태그입니다.  (0) 2008.02.15
무료 사용 가능한 오픈 디자인 사이트 14곳 모음  (0) 2008.02.15
XML 을 이용한 세로 플래시 메뉴 Ver 1.1  (0) 2008.02.15
클릭 한번으로 창 여러개 두개 이상 띄우기  (0) 2008.02.15
패비콘을 3d 도트로 변환해주는 사이트  (0) 2008.02.15
한국정보통신기술협회가 인증한 한국형 무료 안티스파이웨어 KS1  (0) 2008.02.15
웹사이트 특정 부분만 출력하기 - iframe  (0) 2008.02.15
듀얼코어 활용하기  (0) 2008.02.15
Posted by 알 수 없는 사용자
,

티스토리툴바