1

I'm using this freeware jQuery dynamic swipebox on my website: http://brutaldesign.github.io/swipebox/.

My plunker: http://plnkr.co/edit/SP7Fh0TzpKnsGucNbWm5?p=preview

The problem is that I'm using the swipebox gallery in the iframe and when I open it, it only opens within iframe and not fullscreen as I want it to open.

This is how it works:

1) load the gallery at the end of body tag:

<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) call the gallery by assigning id="gallery":

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

Any ideas how I could make it open in the parent fullscreen mode?

I already tried - loading the code in the parent window and then calling the #gallery from iframe using

 <base target="_parent" />

It did not work.

I went through these questions:

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

Community
  • 1
  • 1
matus
  • 53
  • 8

1 Answers1

1

Here is the answer:

It is crucial that the code is loaded in the parent page:

in head:

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

at the end of body tag:

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

in children changing this code:

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

to:

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

the most crucial part: 

 parent.$.swipebox

UPDATED PLNKR: http://plnkr.co/edit/LcTP6kcFWedzUaoDP5VP?p=preview

matus
  • 53
  • 8