Friday, August 25th, 2006
Lightbox using iFrames instead of AJAX
Category: JavaScript
, Programming
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.
Here's the 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></iframe></div>";
-
new Insertion.Before($('lbLoadMessage'), info)
-
$('lightbox').className = "done";
-
this.actions();
-
},
-
You can also just download the code to make the update.
Why does it have twice…?!
I can use this for real estate sites to great effect!
Thanks a ton!
Wayne