如何實現Fancybox在iFrame外彈出

我有一個包含iframe的小腳本。在這個我框架我有一個圖像配置通過Fancybox彈出iframe外。如何實現Fancybox在iFrame外彈出

當我試圖實現that fancybox option圖片鏈接，他們沒有像（見IFRAME第2頁在右邊），彈出圖像之外iframe的，並把它上傳到我的服務器 - 它運作良好。

在這裏看到：My site

然而，當我嘗試做出獨立版本的工作（的手段，我想，功能在我的HTML文件，我的電腦上只工作）我沒有得到任何迴應，並沒有任何反應。

我想我錯過了js和css轉發部分，但我非常確定我添加並將所有js和css轉發到正確的位置。我真的不知道爲什麼它不工作。

我需要的是彈出這樣的形象：

但同樣，什麼也沒有發生在一個獨立的腳本。

這裏是主頁代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="Jose Francisco Diaz/picssel.com" /> 
<title>call fancybox from an iframe in the parent page</title> 
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" /> 
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/helpers/jquery.fancybox-buttons.css" /> 

<script type="text/javascript" src="fancybox2.0.4/helpers/helper.js" id="zZwx_MainScript"></script> 
    <link rel="stylesheet" href="fancybox2.0.4/helpers/helper.css" type="text/css" media="all" /> 

<style type="text/css"> 
a {outline: 0 none;} 
#wrap { 
width: 978px; 
height: 1000px; 
margin: 20px auto; 
} 
#iframe01 { 
width: 450px; 
height: 300px; 
float: left; 
} 
#iframe02 { 
width: 450px; 
height: 300px; 
float: right; 
} 
.spacer { 
clear: both; 
height: 1px; 
display: block; 
} 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script> 
<script type="text/javascript" src="fancybox2.0.4/helpers/jquery.fancybox-buttons.js"></script> 
</head> 
<body> 
<div id="wrap"> 

    <iframe id="iframe01" src="../pages/7.html"></iframe> 
    <iframe id="iframe02" src="iframedPage02_20apr12.html"></iframe> 
    <div class="spacer"></div> 

</div><!--wrap--> 
</body> 
</html>

這裏是的iframe頁面代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" /> 
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/helpers/jquery.fancybox-buttons.css" /> 

<script type="text/javascript" src="fancybox2.0.4/helpers/helper.js" id="zZwx_MainScript"></script> 
    <link rel="stylesheet" href="fancybox2.0.4/helpers/helper.css" type="text/css" media="all" /> 

<style type="text/css"> 
#wrap { width: 100%;} 
a {outline: 0 none;} 
</style> 
<script src="jquery.js"></script> 
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script> 
<script type="text/javascript" src="fancybox2.0.4/helpers/jquery.fancybox-buttons.js"></script> 

<script> 
/* <![CDATA[ */ 
$(document).ready(function() { 
    $('.imagen').click(function(e){ 
     e.preventDefault(); 
parent.$.fancybox([ 
{href:'img/ebay-home.jpg', title: '01'}, 
],{ 
//   href: this.href, 
      helpers: { 
       overlay: { 
       opacity: 0.3 
       } // overlay 
       //, buttons: {} 
      } // helpers 
     }); // fancybox 
    }); // click 
    $('.video').click(function(e){ 
     e.preventDefault(); 
     parent.$.fancybox({ 
      href: this.href, 
      width: 560, 
      height: 315, 
      type: 'iframe', 
      helpers: { 
       overlay: { 
       opacity: 0.3 
       } // overlay 
      } // helpers 
     }); // fancybox 
    }); // click 
$(".pdf").click(function(){ 
parent.$.fancybox({ 
type: 'html', 
autoSize: false, 
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />', 
beforeClose: function() { 
$(".fancybox-inner").unwrap(); 
}, 
      helpers: { 
       overlay: { 
       opacity: 0.3 
       } // overlay 
      } 
}); //fancybox 
return false; 
}); //click 
}); // ready 
/* ]]> */ 
</script> 
</head> 
<body> 
<div id="wrap"> 
    <p>Hello, I am the iframed page 02.</p> 
    <p>Open different type of content (imagen, video and/or pdf) in fancybox outside the iframe in the parent page.</p><br /> 
    <a class="imagen" href="img/ebay-home.jpg">open image gallery</a><br /> 
    <a class="video" href="http://www.youtube.com/embed/3l8MwU0IjMI?autoplay=1">open youtube video</a><br /> 
<a class="pdf" href="images/Fancybox.pdf">open pdf</a> 
</div> 
</body> 
</html>

又一次在這裏一住就是一個：My site

來源

2016-07-08 StackBuck

我只需要在iframe外部彈出工作圖像。

我發現，解決，但在其他的方式的東西：

PureCSS完全教程

這裏是一個活鏈接：Here

，這裏是一個配置JSfiddle

這裏是html：

 <!-- Lightbox usage markup --> 
<section id="gallery"> 
    <!-- thumbnail image wrapped in a link --> 
    <section class="item"> 
     <a href="#img1"> 
      <img src="http://oi67.tinypic.com/23lblu8.jpg"> 
     </a> 
    </section> 

</section> 

<!-- lightbox container hidden with CSS --> 
<div class="lightbox" id="img1"> 
    <div class="box"> 
    <a class="close" href="#">X</a> 
    <p class="title">Lorem ipsum dolor sit amet</p> 
    <div class="content"> 
     <img class="imgbox" src="http://oi67.tinypic.com/23lblu8.jpg"> 
     <p class="desc">Lorem ipsum dolor sit amet desc fully</p> 
    </div> 

    <div class="clear"></div> 
    </div> 
</div>

這裏是CSS：

#gallery { 
    width:600px; 
    } 

#gallery a { 
    text-decoration:none; 
    } 

#gallery .item { 
    width: 350px; height: 300px; overflow:hidden; 
    border: 4px solid #333; 

    margin: 5px; 
    margin-right: -20px; 
    } 


#gallery .item a { 
    overflow: hidden; 
    } 

#gallery .item a img { 
    height: 100%; 
    align-self: center; 
    } 

.lightbox { 
    /** Hide the lightbox */ 
    display: none; 


    /** Apply basic lightbox styling */ 
    position: fixed; 
    z-index: 9999; 
    width: 95%; 
    height: 75%; 
    top: 0; 
    left: 0; 
    color:#333333; 
    } 

.lightbox:target { 
    /** Show lightbox when it is target */ 
    display: block; 
    outline: none; 
} 

.lightbox .box { 
    width: -webkit-min-content; 
    width: -moz-min-content; 
    width: min-content; 
    min-width:500px; 
    margin: 0 auto; 
    padding:10px 20px 10px 20px; 
    background-color:#FFF; 
    box-shadow: 0px 1px 26px -3px #777777; 
    } 

.lightbox .title { 
    margin:0; 
    padding:0 0 10px 0px; 
    border-bottom:1px #ccc solid; 
    font-size:22px; 
    } 

.lightbox .content { 
    display:block; 
    position:relative; 
    } 

.imgbox {max-width: 830px; } 


.lightbox .content .desc { 
    z-index:99; 
    bottom:0; 
    position:absolute; 
    padding:10px; 
    margin:0 0 4px 0; 
    background:rgba(0,0,0,0.8); 

    color:#fff; 
    font-size:17px; 
    opacity:0; 
    transition: opacity ease-in-out 0.5s; 
    } 

.lightbox .content:hover .desc { 
    opacity:1; 
} 

.lightbox .next, 
.lightbox .prev, 
.lightbox .close { 
    display:block; 
    text-decoration:none; 
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:22px; 
    color:#858585; 
    } 

.prev { 
    float:left; 
    } 

.next, .close { 
    float:right; 
    } 

    .clear { 
     display:block; 
     clear:both; 
     }

，現在我可以在外面的I幀圖像彈出。

不需要服務器端。

來源

2016-07-08 07:47:52 StackBuck

嘗試在Firefox瀏覽器中運行您的獨立頁面，並嘗試從A運行您的頁面帕什（本地主機）。它會工作。

來源

2016-07-08 06:41:56 Pandiarajan

同樣，我希望它在我的電腦上工作，而不是從我的服務器上工作。 – StackBuck

如果直接打開iFrame，iFrame將不起作用。最好的辦法是，你必須在你的機器上安裝Apache或任何其他Web服務器，並訪問它像http：//localhost/project1/index.html – Pandiarajan

在本地安裝一個腳本的Apache？ – StackBuck

如何實現Fancybox在iFrame外彈出

回答

相關問題