jQuery Lightbox Evolution：在iframe外部加载灯箱 [英] jQuery Lightbox Evolution: Load lightbox outside a iframe

问题描述

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

I'm using a jQuery Lightbox Evolution plugin, and I have photo links inside a iframe. I wanna that Lightbox open outside a iframe, in a parent window.

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

In the FAQ, i find that I can put some code on parent:

<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标签中'初始化'插件，只需在代码中调用它。

But dont work, because my code is generated inline, dynamic with php. So I dont 'initialize' the plugin in head tag, just call that in the code.

我的代码片段初始化插件：

There's my piece of code that initialize the plugin:

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>';

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

There's a way to load this in the parent window?

谢谢

推荐答案

它在文档中：

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

9.How can I open Lightbox in parent window from inside an iframe? First thing you need to do is install the script in your parent window, but don't initialize it. Don't use jQuery(document).ready, instead, add the code below:

<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标记中。

Insert onload="frameload(this);" in your iframe markup.

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

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

When you click an image in the child page, the lightbox will be displayed in your parent page. Remember to remove the script in your child page to avoid any problem.

这篇关于jQuery Lightbox Evolution：在iframe外部加载灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！