1

我正在使用 jQuery Lightbox Evolution 插件，并且我在 iframe 中有照片链接。我希望 Lightbox 在 iframe 之外的父窗口中打开。

在常见问题解答中，我发现我可以在父级上放置一些代码：

<script type="text/javascript">
  function frameload(iframe) {
    var doc = iframe.contentWindow || iframe.contentDocument;
    if (doc.document) { doc = doc.document; };

    $('.lightbox', doc.body).lightbox();
  };
</script>

但不工作，因为我的代码是内联生成的，是用php动态生成的。所以我不会在 head 标签中“初始化”插件，只是在代码中调用它。

有我的一段代码初始化插件：

echo 
'<a style="cursor:pointer;" id="open_'.$emp_alias.'"></a>';

echo 
'<script type="text/javascript">
   $(document).ready(function(){
     $("#open_'.$emp_alias.'").click(function(ev) {
        $.lightbox([';
        while($images_array = mysql_fetch_assoc($query_emp_images)) {
     echo '"/destaques/'.$images_array['path'].'",';
    }
    echo
         ']);
    ev.preventDefault();
    });                                       });
</script>';

有办法在父窗口中加载它吗？

谢谢

4

2 回答 2

2

它在文档中：

9.如何在 iframe 中打开父窗口中的 Lightbox？您需要做的第一件事是在您的父窗口中安装脚本，但不要初始化它。不要使用 jQuery(document).ready，而是添加以下代码：

<script type="text/javascript">
function frameload(iframe) {
    var doc = iframe.contentWindow || iframe.contentDocument;
    if (doc.document) { doc = doc.document; };

    jQuery('.lightbox', doc.body).lightbox();
};
</script>

插入 onload="frameload(this);" 在您的 iframe 标记中。

<iframe src="iframe_child.html" onload="frameload(this);" width="500" height="500"> </iframe>

当您单击子页面中的图像时，灯箱将显示在您的父页面中。请记住删除子页面中的脚本以避免任何问题。

于 2013-01-03T02:47:55.147 回答
0

一个对我有用的简单解决方法是在父窗口中初始化灯箱，然后创建一个空白占位符链接，以及更改 href 并单击占位符链接的函数：

在父窗口的页眉或页脚中：

<script type="text/javascript">
  $(function () {
    $('.lightbox').lightBox();
  });

  function image_preview(url)
  {
     $('#fakebox').attr('href',url);
     $('#fakebox').trigger('click')   
  }
</script>

在父窗口主体的某处：

<a href="" class="lightbox" id="fakebox"></a>

所以在 iframe 中我调用父函数来启动fancybox：

<a href="JavaScript:void(0);" class="btn btn-tertiary btn-small" onClick="parent.image_preview('http://static8.depositphotos.com/1007989/1011/i/950/depositphotos_10118078-Grinning-Smiley.jpg')">Preview</a>
于 2013-03-26T08:02:21.083 回答