Lightbox using iFrames instead of AJAX

Find Motive Blog created a new way to display images using LightBox —”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 […]

Find Motive Blog created a new way to display images using LightBox —”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.”

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.

// 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(); },

Download Complete Source (includes demo)

Findmotive | ajaxian

Lightbox using iFrames instead of AJAX