Enes UYSAL WEB-Lightboxu iframe disinda acmak

OCK 11 Lightboxu iframe disinda acmak Enes UYSAL HTML, JavaScript, Gelen istek uzerine iframe icindeki resmi lightboxta iframe disinda açmak icin yapilmasi gerekenler; Oncelikle resmimizin oldugu iframe.html dosyasini hazirliyoruz Ardindan index.html'e iframe olarak iframe.html ekliyoruz Asagidaki kodlari yazdigimizda sorunsuz çalisacaktir ve iframeden resmi çagirdigimizda artik iframe icinde degil index.html içinde açilacaktir Enes UYSAL iframe.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> </head> <body> <a href="javascript:void(0)" onclick="parent.showlightbox('images/image-1.jpg')" > <img src="images/thumb-1.jpg" width="100" height="40" alt="" /> </a> </body> </html> index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>lightbox u iframe icinden nasil açarim iframe?</title> <link href="lightbox.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="lightbox-iframe.js"></script> </head> <body> <iframe src="iframe.html"></iframe> <!--lightbox--> <div id="lightbox-bg"></div> <div id="lightbox-content"> <iframe id="lightbox-iframe" width="100%" frameborder="0" scrolling="no" src="about:blank" height="100%" ></iframe> <p><a href="javascript:void(0)" onclick="closelightbox()"><img src="images/closelabel.gif" border="0"/></a></p> </div> </body> </html> Extra lightbox.css /* reset / body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset, input,p,blockquote,th,td{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0} address,caption,cite,code,dfn,em,strong,th, var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%} q:before,q:after{content:''} / reset / #product-iframe{background:url(../images/lightbox-background.jpg) no-repeat top left; height:400px;} #product-iframe ul{ width:469px; height:336px; padding-top:30px} #product-iframe ul li{ float:left;width:230px; text-align:center} / lightbox / #lightbox-content{position:absolute;height:370px;width:470px; margin:-250px 0px 0px -250px;top: 50%; left: 50%;text-align: right;background-color: #FFF; border: 1px solid #000000;display:none; z-index:100;overflow:hidden;padding:10px 10px 40px 10px;} #lightbox-content p{ margin-top:8px;} #lightbox-bg{position:absolute;top:0;left:0;z-index: 90; background:#000;display:none; width:100%;height:100%;_height:2000px;filter:alpha(opacity=70); -moz-opacity:0.6;opacity:0.6;} lightbox-iframe.js function showlightbox(ShowUrl) { document.getElementById('lightbox-content').style.display='block'; document.getElementById('lightbox-bg').style.display='block'; if(ShowUrl!='') { document.getElementById('lightbox-iframe').src=ShowUrl; } } function closelightbox() { document.getElementById('lightbox-content').style.display='none'; document.getElementById('lightbox-bg').style.display='none'; document.getElementById('lightbox-iframe').src='about:blank'; } This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Bu makale 157 kere okundu.*

OCK 11

Lightboxu iframe disinda acmak

Enes UYSAL HTML, JavaScript,

Gelen istek uzerine iframe icindeki resmi lightboxta iframe disinda açmak icin yapilmasi gerekenler;

Oncelikle resmimizin oldugu iframe.html dosyasini hazirliyoruz

Ardindan index.html'e iframe olarak iframe.html ekliyoruz

Asagidaki kodlari yazdigimizda sorunsuz çalisacaktir

ve iframeden resmi çagirdigimizda artik iframe icinde degil index.html içinde açilacaktir

Enes UYSAL

iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    </head>
<body>
<a href="javascript:void(0)" 
onclick="parent.showlightbox('images/image-1.jpg')" >
<img src="images/thumb-1.jpg" width="100" height="40" alt="" />
</a>
</body>
</html>

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>lightbox u iframe icinden nasil açarim iframe?</title>
    <link href="lightbox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="lightbox-iframe.js"></script>
</head>
<body>
<iframe src="iframe.html"></iframe> 
<!--lightbox-->
<div id="lightbox-bg"></div>
<div id="lightbox-content">

    <iframe id="lightbox-iframe" width="100%" frameborder="0" 
scrolling="no" 
src="about:blank" height="100%" ></iframe>    
    <p><a href="javascript:void(0)" onclick="closelightbox()"><img 
src="images/closelabel.gif" border="0"/></a></p>
</div>
</body>
</html>

Extra

lightbox.css

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,
var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:''}

/* reset */
#product-iframe{background:url(../images/lightbox-background.jpg) 
no-repeat top left; height:400px;}
#product-iframe ul{ width:469px; height:336px; padding-top:30px}
#product-iframe ul li{ float:left;width:230px; text-align:center}

/* lightbox */
#lightbox-content{position:absolute;height:370px;width:470px;
margin:-250px 0px 0px -250px;top: 50%;
left: 50%;text-align: right;background-color: #FFF;
border: 1px solid #000000;display:none;
z-index:100;overflow:hidden;padding:10px 10px 40px 10px;}
#lightbox-content p{ margin-top:8px;}
#lightbox-bg{position:absolute;top:0;left:0;z-index: 90;
background:#000;display:none;
width:100%;height:100%;_height:2000px;filter:alpha(opacity=70);
-moz-opacity:0.6;opacity:0.6;}

lightbox-iframe.js

function showlightbox(ShowUrl)
    {
        document.getElementById('lightbox-content').style.display='block';
        document.getElementById('lightbox-bg').style.display='block';
        if(ShowUrl!='')
        {
            document.getElementById('lightbox-iframe').src=ShowUrl;
        }
    }
function closelightbox()
    {
        document.getElementById('lightbox-content').style.display='none';
        document.getElementById('lightbox-bg').style.display='none';
        document.getElementById('lightbox-iframe').src='about:blank';
    }