【发布时间】：2016-07-08 06:34:37
【问题描述】：
我有包含 iframe 的小脚本。 在那个 i 框架中，我通过 Fancybox 配置了一个图像以在 iframe 之外弹出。
当我尝试像他们一样在图像链接上实现that fancybox option 时（参见右侧的 iframe 第 2 页）以弹出 iframe outside 的图像并将其上传到我的服务器 - 它正在工作好吧。
请看这里：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
【问题讨论】：
标签： javascript jquery html iframe fancybox