And*_*res 10 html iframe jquery fancybox
我有2页,我的index.html和social.html.我清理了我的索引,只留下了fancybox的jquery代码需要我想要做的是在social.html中有图像,当点击它时,它会打开fancybox并显示它但在index.html中不在iframe内部.出现的错误是:
Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
onclick
这是我的index.html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
function showImage(image) {
$.fancybox('<img src="img/' + image + '" alt="" border="0" />');
};
</script>
</head>
<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>
在IFrame页面中:
<img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>
PS:两个页面都在同一个域...编辑:video.js - >这是来自fancybox我没有这个.
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
JFK*_*JFK 20
首先,您应该使用fancybox v2.x无缝地执行此操作(修补fancybox v1.3.x不值得付出努力)
其次,你需要在两个页面,父页面和iframed页面,加载jquery和fancybox css和js文件,以便正确地超越fancybox,
所以在这两个页面中你应该至少有类似的东西:
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
和
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
然后在您的iframed(子)页面中,您的脚本基本相同(但是使用v2.x的正确的fancybox选项... 请查看此处的文档)
$(".video").click(function() {
$.fancybox({
'padding' : 0,
// more options (v2.x) etc
而不是这个
$.fancybox({
做这个:
parent.$.fancybox({
然后fancybox将在iframed页面边界的父页面中显示
更新:演示页面在这里