Saturday, January 06, 2007

Lightbox with always visible Prev and Next Links

The Problem: Lightbox Prev and Next Navigation being visible onMouseOver is not obvious enough

After enabling Lightbox on my picture gallery I quickly realized that the onMouseOver Prev and Next on the Lightbox were way to confusing for my viewers :) The problem with the design it the Prev and Next links on the Lightbox pop-up are mystery navigation. If you don't know to mouse over the right or left side of the image in order to get the links to appear, you don't.


The Solution: Change lightbox.css to make the navigation graphics always visible

My solution was to change the stylesheet (lightbox.css) to fix the display of the prev and next links to always be visible. I am OK with the prevLabel.gif and nextLabel.gif always showing on top of the image because it makes the navigation so much more obvious.


I know this fix is pretty obvious to the coder types but since many people who use the LightBox Library on their website are not so savvy I hope to take the mystery out of this fix. Simply:

1) Download the new Lightbox CSS File.

2) Remove the .txt from the end of the filename.

3) Make sure the nextLabel.gif and prevLabel.gif and blank.gif are pointed to in the right directory (if they are not in the ./img/ directory you need to change anywhere it says img/ to your directory name, for example images/)

4) Upload the new lightbox.css file to replace the old one

Labels: ,

Friday, December 22, 2006

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. 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. 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. 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.

Labels: , ,