영원한사랑

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

인터넷정보2007. 10. 10. 11:26
<!--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) 2007.10.10
폰트 사이트  (0) 2007.10.10
레이어 여러개 반투명하게 교차하기  (0) 2007.10.10
모서리 둥근 테이블, 이미지 없이 구현하기  (0) 2007.10.10
로딩 페이지에 들어갈 이미지가 여기다 있습니다  (0) 2007.10.10
클릭 한번으로 창 여러개 두개 이상 띄우기  (0) 2007.10.10
스크립트로 이미지 모서리를 둥글게  (0) 2007.10.10
XML 을 이용한 세로 플래시 메뉴 Ver 1.1  (0) 2007.10.10
이쁜 테이블 태그입니다.  (0) 2007.10.10
무료 사용 가능한 오픈 디자인 사이트 14곳 모음  (0) 2007.10.09

티스토리툴바