Making a lightbox layout appear outside (over) an iFrame

[ Studied  ...calculating..., 6 thanks ]

                                                                   

   

    I've spent a lot of time, and I really mean a lot of time, trying to figure out how to display some pictuere and content, in a lightbox that will cover the iFrame(s) used in the pages of my website. As you could see if you browsed through this website, I succeded .

 

I needed to open a lightbox that will show....something .... when clicked, and it was pretty easy finding it and getting it to work. The problem was that on smaller resolutions monitor, the content from the lightbox was truncated and/or unintelligible; so I needed to find a way to expend the lightbox, and this could only be achieved by having it's layout covering all the iFrames that I have on that particular page....mission impossible, as it seemed !

 

I've scoured the net, looking through millions of forums on millions of pages in a million hours while smoking millions of cigarettes --- those affirmations may be a little dramatized in order to achieve the expected reaction.... --- but I found only disappointments,  "it's not possible" statements or solutions with kilometers of code. When I was ready to  give up, I stumbled upon a post that was redirecting to a page where....yuppi ! there it was; a little ambiguous, but there it was !

 

That its' why I decided to make this page, to show you how to get the desired effects in a very easy way, step by step, with examples and snippets of important code - I am aware that not everyone who's making a webpage is a coding genius, so I will show what to code and where to code as well (I saw a lot of pages where their answer was something like: "simple: just create a partially overlaid function in which implement the php part with the callback routine for the hyperactive link ! " --- duhh....hello...sprechen sie english ? Me not understand what the heck are you talking about !).

 

    Still, please be aware that this method is not working on android devices !

 

So...

 

     Let's say you have a webpage with an iFrame containing a picture, and you want to maximize that picture in an overlay. If you're doing it the simple way, what you will get is this:

 

 

 

     As you can clearly notice, the lightbox opens inside the iFrame and the picture is rescaled, so the result is...not quite what you've been expecting; - if like that, you're better of not creating the lightbox.

 

What you want to have is something like this:

 

 

     That is something else now, isn't it ?

 

"Exposing" the trick:

     Before starting to show you how I achieved the desired result, I have to specify that the lightbox I'm using for this example is "Lightbox 2.6" by Lokesh Dhakar, (which you can download by following this link ), but you can use any other lightbox you want, just pay attention to initialize and call that lightbox as per its specification and make sure that it's not conflicting with other scripts you may have on your page. And, secondly, this method I've developed is derived from Richosoft's method.

     Those being said, let's get to work. To better understand the processes I used in both cases, I will split the next paragraphs in two. In the left side of the screen will be the steps to follow to display the lightbox normally, in the contained iFrame, while in the right side you'll learn how to display the lightbox over the iFrame. Remember, this is HTML coding, so write these in the HTML part of your page !....and red defines what you need...

Lightbox inside iFrame

 

Lightbox outside iFrame

In the contained page (the page that appears in the iFrame)
     

Initialize the lightbox in the "<head>" section of your page:

 

<html>

.......

<head>

<script src="lightbox/js/jquery-1.10.2.min.js"></script>

<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox2.css" rel="stylesheet" />
.......

</head>

.......

</html>

   
     

Place the element you want to use, make it trigger the lightbox in the "<body>" section:

 

<html>

.......

<body>

.......

<a href="li.jpg" data-lightbox="li.jpg">
<img border="0" src="li.jpg" width="122" height="93"></a>

.......

</body>

.......

</html>

 

In this case, the element will trigger a hidden element situated on the main page, which has the id="piu"

 

<html>

.......

<body>

.......

<a href="#" onclick="return false">
<img border="0" src="li.jpg" onclick="parent.document.getElementById('piu').click()"width="122" height="93"></a>

.......

</body>

.......

</html>

     

In the main page (the page that contains the iFrame)

     

Here we are done !

 

Initialize the lightbox in the "<head>" section of your page:

 

<html>

.......

<head>

<script src="lightbox/js/jquery-1.10.2.min.js"></script>

<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox2.css" rel="stylesheet" />
.......

</head>

.......

</html>

   
 

Create a hidden and empty image element which will be triggered by your element and will start the lightbox:

 

<html>

.......

<body>

.......

<a href='li.jpg' data-lightbox="li.jpg">
<img border="0" id="piu" src="" width="0" height="0" style="position: absolute;VISIBILITY: hidden"></a>

.......

</body>

.......

</html>

     
     
     
     If this method is not working for you, be sure to check my second method involving using "photobox", a "lightbox" of my own conception.

     Using "photobox", you'll have a lot of advantages, such as:

          - very simple to code and debug

          - doesn't conflict with other scripts you might be using

          - resizes and centers your photo horizontally

          - allows grouping your photos in albums

          - can be used from inside an IFrame, solving the "lightbox" outside and/or over the IFrame problem

          - you can open any other webpage in it's overlay, as, after all, it's just an IFrame

          - etc.

     Be sure to check this method as well here !

 

 

     Congratulation for making your lightbox ! If there is something you didn't understand or anything else, just leave a comment !