Question

我正在使用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>';

有一种方法可以在父窗口中加载它吗？

由于

Answer 1

它在文档中：

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>

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

Answer 2

一个对我有用的简单解决方法是在父窗口中初始化灯箱，然后创建一个空白占位符链接，以及更改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>

jQuery Lightbox Evolution：在iframe外部加载灯箱

2 个答案: