matus matus - 3 months ago 32
Javascript Question

A touchable jQuery lightbox - open from iframe to fullscreen

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

Answer

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

Comments