Lightbox with iFrames Reloaded
I recently redesigned my picture gallery as part of moving my website to a WordPress powered site. As part of that redesign, I wanted to move my full size picture view to one that uses LightBox JS 2.0. That worked out smashingly until I decided that I wanted the home movies in my gallery to also display in a LightBox frame. Turns out that LightBox is coded to display image files and does not work out of the Box (har har har) for displaying movies.
After a quick google search I stumbled upon the MPOV blog and a post on Lightbox with iframes. I downloaded his script and plugged it in instead of my current lightbox.js file. It worked great to display the movies but wouldn’t display the images because of a bug. To display my Flash movies in the new iFrame LightBox JS v2.0 I just edited the existing link to the Flash created simple HTML file to include the rel=”lightbox” property. The HTML file is simply a file with an embedded Flash movie (.flv) playing file (.swf).
My issue with the new hacked LightBox was that although it now allowed me to define a height for the iFrame and Lightbox, it didn’t support setting the width of the iFrame and the LightBox and it would no longer display the images. So, when my Flash movie would load in LightBox it, depending on its size, would have a scroll bar. You can set the width at the top of the lightbox.js as the iFrameWidth variable but my videos are a variety of sizes so I needed to be able to dynamically set the width for the LightBox/iFrame.
No biggie, though, with the addition of a few lines of code the new Lightbox with iFrames now supports setting the height and width of the iFrame and therefore LightBox and it also now displays images :). To pass in the width and height use: rel=”lightbox|WIDTH|HEIGHT”. For instance if you want to display a 640px X 480px movie you would use rel=”lightbox|660|500″ The script automatically adds the defined LightBox border (var = borderSize) x 2 to the width and height.
Download the new LightBox with iFrames Reloaded
Install by changing the extension to .js from .txt and replace your existing lightbox.js file with the new one.
Note: You will need the full LightBox v2.0 installed already which you can download from here.
For an example of using LightBox to open embedded Flash movies and standard JPG images check out our Picture Gallery. Click on one of the movies links from the first page to see an iFrame + LightBox being used to display the Flash Video or one of the thousand pictures for the standard LightBox image usage.
Thanks to Lokesh Dhakar for the LightBox script and Tim Morgan cool iFrame hack.
22 Responses to “Lightbox with iFrames Reloaded”
January 9th, 2007 at 12:01 pm
Thanks for doing the bulk of the work getting iFrames to work.
I also found and squashed a bug in your iFrame version where updateNav() wasn’t being called for image types.
March 15th, 2007 at 8:36 am
I had been searching all over the web for this exact fix for the Lightbox video solution. My only question is this: What kind of software did you use to convert your movies to flash, and how did you get the play button, progress bar etc?
March 31st, 2007 at 8:05 am
David : I used Macromedia’s Flash Video Encoder software that comes with the Flash 8 software set. I think, though, there is a way to post your video to YouTube, mark it as private, let them encode it into Flash, and then download the resulting file. Its the downloading part I think is tricky but just Google it and I think it is possible.
The progress bar again is a part of Flash when you create a new project as a movie.
April 15th, 2007 at 10:58 pm
Hi, I somehow stumbled upon your website, and noticed that in your gallery, the next and previous buttons stay on constantly. I desperate to get this to happen on my website, how did you do it?! I’m running the latest original Lightbox script.
Thanks very much,,
Andrew.
Email: lude_1@hotmail.com
PS. Cute baby! =)
April 16th, 2007 at 8:02 am
Andrew : I edited the Lightbox.css file to change how the Prev and Next links were displayed. In the original version there is a blank image that is usually displayed in those div’s.
I posted a blog entry about how to do it and that post has a link to the CSS file I used. You can look at it and use that to make yours work the same way.
Here is the post: http://www.richandstephsipe.com/wordpress/2007/01/05/lightbox-with-always-visible-prev-and-next-links/
May 17th, 2007 at 2:25 am
Hi Rich,
I really like your script with the iframe but I was wondering how i could change some of the iframe settings. b.e. Scroll= no of border=0?
Thank you very much!
Odee
May 21st, 2007 at 9:35 am
Hi!
I came across your site while looking for a way to incorporate movies as a lightbox option and your file worked beautifully! So, thank you 🙂
Now I was wondering if you could point me in the right direction of having your photos from your gallery open using lightbox? I’m also using lightbox, gallery and the wp-gallery2 plugin. Thanks so much!
June 16th, 2007 at 11:46 am
any reason why the video doesn’t show, but the audio can be heard just fine?
I’m on a Mac using FF and Safari.
July 7th, 2007 at 11:11 am
rich! many thanks for sharing the fine script! I spent most of yesterday banging my head against the wall, then this afternoon after taking a break from the screen I found your site! Exactly what I was looking for. Again many thanks!
July 7th, 2007 at 2:09 pm
After playing with this a bit, I love it! Except one issue…on my photo gallery page, I have an embedded windows media player file playing. The lightbox script doesn’t cover over the media player (it shows through). I tried wrapping the Media Player object in a div with a lower z-index, with no luck…any thoughts?
November 19th, 2007 at 3:39 pm
thanks for the script it works great. How do you get your image thumbnails to look so good and be so very organized by size. Is it a simple setting, or maybe some code I can add?
December 9th, 2007 at 11:13 am
Thank you for this much needed hack. This is so much more useful than the original.
A thing to consider: Ability to create sets of iframes like you can do with photos?
February 14th, 2008 at 5:37 pm
Hi,
Works fine with Safari and IE. However it fails to load the SWF on Safari in both Mac and Win OS’s.
Just see a white box…
Any suggestions please?
May 14th, 2008 at 1:00 pm
Hello Richard …
Thanks for the tips.. this is a Great Hack. (of a Hack)
It is almost exactly what I was looking for ages.
I have been using another hack up until now, one that shows the “close” button + nav at the top of the lightbox, but I have searched for ages for a simple one to show swf and flv …
Any chance to have a top nav with your hack as well ?
June 27th, 2008 at 8:08 pm
This is a great addition! However, I came across a problem: my SWF files don’t start up automatically in Firefox (v2.0). Works great in IE7, but I just get an empty frame in FF. However, if I use the browser Back button in FF, that kick-starts the SWF file into playing. Weird. Any ideas on a fix?
July 11th, 2008 at 6:04 am
For all those having problems linking to the Flash movies: You have to link the page to the HTML page created with the flash file embedded in it and NOT just the .SWF page! You can not link directly to the SWF File.
Just publish your flash movie, grab the HTML file Flash creates, FTP it to your server, In the Lightbox link put that file (Movie.html or whatever) as the link. It uses an iFrame so you must use a browser page for the content.
If you want to see an example go to my picture gallery and view the source. The movie section links at the top all do the linking to flash files.
August 7th, 2008 at 10:31 am
I have this working to display youtube videos on a site but it fails in IE6. The video seems to play behind the overlay and actually has text indicating that the video no longer exists.
Any ideas? Works fine in Firefox and ie7
November 6th, 2008 at 11:28 am
Muchos Gracious for the altered script. This hs definitely been very helpful. You can see an example of the use of the script on my site at
at the moment of posting its not up yet but it should be up shortly. Just click on the link to view my Interactive portfolio.
November 18th, 2008 at 9:23 pm
Hi Richard, Is there any way you can update this to work with Lightbox 2.03? I am very specific about the version number here as this is the only version I can find that work with imagemaps.
I have tried to copy all the iframe code from your version into 2.03 but it breaks the imagemap compatibility. My new script works fine with regular links but not imagemap links.
I have replaced it bit by bit annd it seems to break when I make the iframe code change under the
// once image is preloaded, resize image container
Comment.
Any help would be apreciated.
Cheers
May 23rd, 2009 at 5:21 pm
THANK YOU THANK YOU THANK YOU!!!!
For the last 3 days I have been glued to my monitor, trying like mad to get an swf to load in a lightbox, to display my portfolio images more nicely.
I tried SO MANY different types! Milkbox, shadowbox, lightbox gone wild, thinbox, thickbox, thickbox lite, ibox….I know there were more than that. NONE worked!
This works! It does exactly what I wanted! Now I just need to finish tweaking each individual slideshow before I overwrite my existing page.
THANK YOU SO MUCH!!!!
June 24th, 2009 at 9:36 am
Has anyone managed to get iframe working with lightbox 2.04??
December 20th, 2006 at 2:29 pm
Hey, cool hack-of-a-hack! Thanks for sharing.