jQuery Lightbox Evolution：在iframe外部加载Lightbox

我使用的是jQuery Lightbox Evolution插件，我在iframe中有照片链接。我想让那个灯箱在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>

函数帧加载（iframe）{
var doc=iframe.contentWindow | | iframe.contentDocument；
如果（doc.document）{doc=doc.document；}；
$（'.lightbox'，doc.body）.lightbox（）；
};

但是不起作用，因为我的代码是用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>';

echo
'';
回音
'
$（文档）.ready（函数（）{
$（“#打开“.$emp_别名”。”）。单击（函数（ev）{
$.lightbox（['）；
而（$images\u array=mysql\u fetch\u assoc（$query\u emp\u images））{
echo'/destaques/'.$images_数组['path'].'，'；
}
回声
']);
ev.preventDefault（）；
});                                       });
';

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

---

谢谢，文档中有：

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

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

函数帧加载（iframe）{
var doc=iframe.contentWindow | | iframe.contentDocument；
如果（doc.document）{doc=doc.document；}；
jQuery（'.lightbox'，doc.body）.lightbox（）；
};

在iframe标记中插入onload=“frameload（this）；”

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

---

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

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

$（函数（）{
$（'.lightbox'）.lightbox（）；
});
函数图像预览（url）
{
$（'#fakebox'）.attr（'href'，url）；
$（'#fakebox'）。触发器（'单击'）
}

父窗口主体中的某个位置：

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