Lightbox using iFrames instead of AJAX
I've been using the Lightbox Gone Wild hack of Lightbox on Indiefy to give the user experience more of an "application" feel. I like the users focus being brought to one area and not allowing them to do anything else until the current task is done.
For those of you who don't know what Lightbox is check out the original version here for more information.
Particle tree's hack of Lightbox allows other content besides images to be put into a Lightbox, but it uses AJAX to pull the content into the box. For my purposes this is overkill because an AJAX call is loading an iFrame which results in 2 HTTP requests and for forms inside a lightbox this won't function the way I want. I want the form to act separately from the current page so the user will not be redirected when the form is submitted. To me this gives the UI a smoother feel. Here is the code section that I modified.
Code
-
// Write an iFrame instead of using an AJAX call to pull the content
-
loadInfo: function() {
-
-
info = "<div id='lbContent'><center><a href='#' class='lbAction' rel='deactivate'>(x) close.</a></center><iframe frameborder='0' width='500' height='350' src='" + this.content + "'</iframe></div>";
-
new Insertion.Before($('lbLoadMessage'), info)
-
$('lightbox').className = "done";
-
this.actions();
-
-
},
I completely removed the processInfo function since it was no longer needed. The new loadInfo function is basically the modified code from processsInfo to write an iFrame instead of using AJAX. This will still take the href from the activating link and use that as the iframe's source URL. I hope this helps!
Download Complete Source (includes demo)
lightbox-iframe.zip (15k)
NOTE: The original version of Lightbox does NOT use AJAX. This code is based off of Particle Tree's lightbox implementation which DOES use AJAX. Some people were confused by this.
My name is Noah Everett. I live in Tulsa, OK. I started 
[...] The Find Motive blog has a quick tip for Lightbox users looking for a little bit different way to tdisplay the images. They show how to push the information into an iframe instead. Particle tree's hack of Lightbox allows other content besides images to be put into a Lightbox, but it uses AJAX to pull the content into the box. For my purposes this is overkill because an AJAX call is loading an iFrame which results in 2 HTTP requests and for forms inside a lightbox this won't function the way I want. I want the form to act separately from the current page so the user will not be redirected when the form is submitted. To me this gives the UI a smoother feel. Here is the code section that I modified. [...]
"I want the form to act separately from the current page so the user will not be redirected when the form is submitted. "
I had the same challange - but put an Ajax.Updater call ( new Ajax.Updater('dup', url, {method:'get', asynchronous:true, evalScripts:true}); ) in Ryan's lighbox. The passback was an alert to explain things were "ok", a redirect, then focus on the original page.
alert(\"Success! ".$Message."\");
window.location=\"".$this->baseURL."news/\";
document.login.login.focus();
[...] http://www.findmotive.com/2006/08/23/lightbox-using-iframes-instead-of-ajax/ [...]
[...] Survey of Javascript Inheritance TechniquesUnobtrusive Javascript and Ajax for RailsAdding AJAX to a Website step by step, Part II[...]
[...] Buena utilidad para montar Lightbox con iFrames, una solución a esos problemas que Ajax nos puede causar. [Descargar] [...]
[...] http://www.findmotive.com/2006/08/23/lightbox-using-iframes-instead-of-ajax/ [...]
Just what I needed, but after searching for literlally, hours.....no way to close the lightbox from the iframe itself after posting...
After 6 hours of trying various cross frame scripts, I eventually managed to call 'deactivate' from within the iframe.
If anyone else had the same problem, let me know, and i will post the code here...
*Phrost
Please post your method for calling deactivate from the inner iframe, I too am searching for such a method (allthough I'm in hour 2
)
function rem() {
var t = parent.document.getElementById('lightbox');
var i = parent.document.getElementById('overlay');
var c = parent.document.getElementById('lbContent');
c.parentNode.removeChild(c);
t.style.display = "none";
i.style.display = "none";
}
make a function like that in the document containing the iframe and call it from a link or whatever and the lightbox will go away - no need to click on the close link.
At work now, and my code is on my laptop at home, but basically what I had to do was the following:
I had to create a hidden form value in the parent window.
From the child window, a click event sends a command to its parent, and the parent inits and fires the event (in this case 'deactivate') and closes the window.
I needed to do this as I had a lsit of products, and on clicking "EDIT", the lightbox had to open up the edit page for a particular product. Once updated however, I needed the lightbox to auto-close and the parent to either refresh or do nothing (dependant on the command I sent it from the child)
Your method will work too. I just wanted something simpler to implement from within the iframe.
I made it so that it just sends a command argument to the parent page, which then parses this and sees which sub function it needs to do. (i.e. close lightbox or refresh or...whatever.)
I will post the sample files to location tonight...
nothing spectacular...but hopefully this might help some with the iframe closing problem...
http://www.tearsofeden.com/LightBoxIframe/
With a bit of time and effort, the parsing functions can be extended to do quite a bit...
[...] This is a follow up post to an article I wrote a few weeks ago about Lightbox Using iFrames Instead of AJAX. [...]
[...] I am having a very weird issue with Firefox and my Lightbox implementation. I have a flash movie inside the iframe content thats being called by the Lightbox, but sometimes the flash will not load or render. Upon viewing the source I found that all the code is there. I’ve searched mozilla’s bug database and found nothing matching my issue. [...]
[...] I've been using my Lightbox using iFrames hack with some of my current projects, but I was having an issue with flash randomly not rendering with Lightbox in Firefox. So when I searched for an alternative I came across the Prototype Window Class. [...]
[...] Lightbox using iFrames instead of AJAX - Find Motive (tags: ajax lightbox iframe javascript) [...]
[...] Now you want to create another file which will incorporate a few includes (our lightbox files and the ubiquitous prototype.js) and call our bug-tracking form into a lightbox (don’t worry, you can download these a bit later in the post.) I’m using code based off of Noah Winecoff’s work with lightbox and iframes. You might want to edit the lightbox.css and lightbox-iframe.js files and adjust your iframe size to match the length and width of your form you built with Wufoo. [...]
I notice no mention has been made of IE. This works wonders in Firefox, but in IE it opens the link directly.
Does anyone have the same issue? Is IE working properly for the rest?
[...] In my logs I noticed that on the previous version of PodAPic, I lost a lot of people after they uploaded their pictures. I was allowing users to upload a photo, add a caption, select a color, and then submit the information and confirm their entries on a second page. From this page, they could submit their order to me. My traffic logs showed a lot of exits from this page, so to combat that, I used Noah Winecoff’s take on Lightbox techniques to get the user image and offer the appearance of keeping users on the same page. I think it’s a more effective approach, and I think I’ll notice a difference on order completions. [...]
Great script!
Where can I change the name of to the css-file?
I'm sorry, I just realised this question was quite dumb.
My problem is that I'm using your lightbox and the original at the same time, which isn't that easy because they need a different css but their divs are called the same.
Just wanted to say I'm using your Lightbox-iframes for a little rails project. I wanted to pop a google maps mashup into a modal-style lightbox (interactively shows escorted tour travelers sightseeing points they'll visit that day) but standard lightbox techniques involve copying the google div to another layer. Always messed up the google js events. Lightbox-iframe proved perfect for the task. Many thanks! Jim.
[...] Además, Noah Winecoff también ha modificado esta clase pero con el objetivo de dar soporte para iframes o cargar contenido con AJAX, es decir para cargar paginas, ademas de mantener el soporte nativo para imágenes. [...]
Without making this sound too confusing...so, lets say my webpage already contains an iframe, if I call the lightbox from the page in my iframe then the lightbox would appear only in the iframe of my page....how can i call the lightbox from within the framed page but having the box appear over the entire page (not just in the frame?)
[...] Además, Noah Winecoff también ha modificado esta clase pero con el objetivo de dar soporte para iframes o cargar contenido con AJAX, es decir para cargar paginas, ademas de mantener el soporte nativo para imágenes. [...]
[...] Lightbox Using iFrame Hack http://www.findmotive.com/2006/08/23/lightbox-using-iframes-instead-of-ajax/ [...]
[...] Enlace / Peso: 12kb. / Framework: Prototype, script.aculo.us / Descargar / Modificaciones: Lightbox Gone Wild, Lightbox Using iFrame, Lightbox without Lightbox, LightWindow, Multifaceted Lightbox [...]
gracias, gracias, gracias. me salvo la vida este iframe
Hi
I'm using your lightbox - thank you BTW,
I have some problem with chenging the IFrame size and maybe you or someone here can help me ...
I'm using the lightbox to compose a message in a dating site,
when the user as finished to fill in the form and submit the page, my page dinmensions are smaller and you can see the page background ,
how can i change the Iframe dinmesions when the user is submiting the form ?
tnx
Just use Lightview or Thickbox for this kind of functionality. Both of them have more features, such as making the modal disappear when the user presses the Esc key or clicks outside in the black translucent area.
hi, I m using a light/ grey box. I want to close it automatically when the form is submitted. Any help??its Urgent.
parent.lightbox.prototype.deactivate();
Removes the popup from the iframe. That way you dont need to have the "x close" link at the top, it can be in your iframe.
does lightbox and prototype window work in a same page?
[...] Framework: Prototype, script.aculo.us / Descargar / Modificaciones: Lightbox Gone Wild, Lightbox Using iFrame, Lightbox without Lightbox, LightWindow, Multifaceted [...]
We use this light box and it works wonders for the tons of functionality that used to launch in pop ups.
However, because we use this script multiple times, the height and width of the loaded content is not aways the same. I was wondering if anyone has successfully passed in the lightbox AND iframe height and width on a per link basis.
Because the height and width is defined in both the .css file and the .js file where the <iframe... actually appears i can't seem to get it to change per content loaded.
For example -
Small Light Box
Big Light Box