我有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; }); });
首先,您应该使用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页面的边界之外