Question

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

我的傻瓜：http://plnkr.co/edit/SP7Fh0TzpKnsGucNbWm5?p=preview

问题是我在iframe中使用了swipebox图库，当我打开它时，它只会在iframe中打开，而不是全屏，因为我希望它打开。

这是它的工作原理：

1）在正文标记的末尾加载图库：

<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调用#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

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

在body标签的末尾：

 <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

可触摸的jQuery灯箱 - 从iframe打开到全屏

1 个答案: