Question

好的，之前我曾问过一个关于如何从iframe打开fancybox到父页面的问题。而解决方案就像一个魅力，仍然有效。现在我被要求显示左，右箭头，但似乎在父页面中打开的代码导致它不显示按钮？：这是我到目前为止所拥有的：

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css?v=2.0.3" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.3"></script>

 <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=2.0.3" />
 <script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.3"></script>
 <script>
     /* <![CDATA[ */
     $(document).ready(function() {
    $('.fancybox-buttons').click(function(e){
    e.preventDefault();
    parent.$.fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },
            href: this.href
        });
    });
       }); // ready
       /* ]]> */
     </script>

如果我改变了这个：

$('.fancybox-buttons').click(function(e){
    e.preventDefault();
    parent.$.fancybox({

到

$('.fancybox-buttons').fancybox({

它可以工作，但它不会在我的父页面中打开。请帮忙吗？

Answer 1

你确定你已经加载了两个页面，父页面和iframed页面，所有jquery和fancybox css和js文件（包括按钮和拇指js和css文件）？

另一方面，您说如果删除parent引用，则代码会显示左/右导航箭头？这是奇怪的，因为你使用“手动”调用方法（在父页面中打开），除非你在自定义脚本中设置手动，否则你不能拥有默认的图库： / p>

$('.fancybox-buttons').click(function(e){
 e.preventDefault();
 parent.$.fancybox([
  {href:'images/01.jpg', title: '01'},
  {href:'images/02.jpg', title: '02'},
  {href:'images/03.jpg', title: '03'}
 ],{
  // href: this.href // not needed
  // other options, e.g.
  helpers : {
   title : {
    type : 'inside'
    },
   buttons : {}
  },
  ......etc.
 }); // fancybox
}); // click

如果您要查看，我已更新了demo page here。

Answer 2

您应该从父窗口初始化元素上的fanchbox插件。

$('someElementOrButtonFromParent', window.parent).fancybox();

在父页面中打开时未显示的Fancybox按钮

2 个答案: