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
6 Responses to “Lightbox with always visible Prev and Next Links”
November 27th, 2007 at 8:59 am
Great tip.
The only thing I thought would be helpful for others is knowing what are the changes. This is what I saw changed.
/** Original Line
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
*/
/* Changes to*/
#prevLink { left: 0; float: left; background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(images/nextlabel.gif) right 15% no-repeat; }
February 29th, 2008 at 7:23 am
What a great idea. I’ve been going nuts trying to figure this out!
July 10th, 2008 at 7:54 pm
this looks awesome.. ive been trying to plug it into my existing lightbox interface, just like you instructed (and lightbox works perfectly) but unfortunately the swf or flv wont launch, and in all the web browsers only give me the option to save to disk? are you familiar with this?
thanks in advance!
July 11th, 2008 at 6:02 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.
April 16th, 2007 at 5:39 pm
Awesome!, Thanks for this tip!