Question

我有一个包含iframe的小脚本。在那个i帧中，我有一个图像配置通过Fancybox在iframe外面弹出。

当我尝试在图像链接上实现that fancybox option时（请参阅右侧的iframe第2页）以弹出iframe的外部并将其上传到我的服务器 - 它工作得很好。

但是，当我尝试在独立版本上完成这项工作时（意味着，我希望该功能仅适用于我的计算机上的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

Answer 1

尝试在Firefox浏览器中运行独立页面，并尝试从Apache（localhost）运行您的页面。它会工作。

Answer 2

我需要的只是在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;
        }

现在我可以在iframe之外弹出图片了。

无需服务器端。

如何实现Fancybox在iFrame外部弹出

2 个答案: