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:


  1. // Write an iFrame instead of using an AJAX call to pull the content
  2. loadInfo: function() {
  3.    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>";
  4. new Insertion.Before($('lbLoadMessage'), info)
  5. $('lightbox').className = "done";  
  6. this.actions();  
  7.           },

You can also just download the code to make the update.

Posted by Chris Cornutt at 9:02 am

3.5 rating from 53 votes


Comments feed TrackBack URI

Why does it have twice…?!

Comment by Dominik Hahn — August 25, 2006

I can use this for real estate sites to great effect!

Thanks a ton!


Comment by Wayne Bienek, Web Designer — May 31, 2007

Leave a comment

You must be logged in to post a comment.