一个可触摸的 jQuery 灯箱 - 从 iframe 打开到全屏答案

【问题标题】：A touchable jQuery lightbox - open from iframe to fullscreen一个可触摸的 jQuery 灯箱 - 从 iframe 打开到全屏
【发布时间】：2016-02-03 12:40:07
【问题描述】：

我在我的网站上使用这个免费的 jQuery 动态滑动框：http://brutaldesign.github.io/swipebox/。

我的笨蛋：http://plnkr.co/edit/SP7Fh0TzpKnsGucNbWm5?p=preview

问题是我在 iframe 中使用 swipebox 库，当我打开它时，它只在 iframe 中打开，而不是像我希望的那样全屏打开。

它是这样工作的：

1) 在body标签末尾加载图库：

<script type="text/javascript">
$( '#gallery' ).click( function( e ) {
   e.preventDefault();
   $.swipebox( [
       { href:'big/image1.jpg', title:'My Caption' }, 
       { href:'big/image2.jpg', title:'My Second Caption' }
   ] );
} );
</script>

2) 通过分配 id="gallery" 调用画廊：

 <a id="gallery" href="#">View gallery</a>

有什么想法可以让它在父全屏模式下打开吗？

我已经尝试过 - 在父窗口中加载代码，然后使用 iframe 从 iframe 调用#gallery

 <base target="_parent" />

没有用。

我经历了这些问题：

Linking an iframe to open in Lightbox

How to make a lightbox 'breakout' of an iframe?

Open lightbox link outside of iframe window

jQuery Lightbox Evolution: Load lightbox outside a iframe

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

答案如下：

代码在父页面加载很关键：

在头上：

 <!-- Swipebox-master styles -->
 <script src="swipebox-master/lib/jquery-2.2.0.js"></script>
 <script src="swipebox-master/src/js/jquery.swipebox.js"></script>
 <link rel="stylesheet" href="swipebox-master/src/css/swipebox.css">

在正文标签的末尾：

 <script src="swipebox-master/lib/ios-orientationchange-fix.js"></script>
 <script src="swipebox-master/lib/jquery-2.2.0.min.js"></script>
 <script src="swipebox-master/src/js/jquery.swipebox.js"></script>

在更改此代码的儿童中：

 <script type="text/javascript">
 $( '#gallery' ).click( function( e ) {
    e.preventDefault();
    $.swipebox( [
        { href:'big/image1.jpg', title:'My Caption' }, 
        { href:'big/image2.jpg', title:'My Second Caption' }
    ] );
 } );
 </script>

到：

 <script type="text/javascript">
 $( '#gallery' ).click( function( e ) {
    e.preventDefault();
    parent.$.swipebox( [
        { href:'big/image1.jpg', title:'My Caption' }, 
        { href:'big/image2.jpg', title:'My Second Caption' }
    ] );
 } );
 </script>

最关键的部分：

 parent.$.swipebox

更新的 PLNKR：http://plnkr.co/edit/LcTP6kcFWedzUaoDP5VP?p=preview

【讨论】：