brian zollinhofer

artwork | math class | calendar | contact

Lightbox FAQ - 2007-05-07 20:18

What is Lightbox?

It’s a script that allows images to pop-up above a website. It’s a nice little javascript that makes pop-ups more pleasing. Visit huddletogether.com to see examples and to download the code. If this FAQ has been helpful or if you have emailed me and have found my help donation-worthy, donate away. The amount is up to you. Please know that I am in no way affiliated with the creation of Lightbox. I just help people who have a hard time understanding how to get it up and running.

Lightbox FAQ Topics:
How do you install Lightbox 2.0?
Is there a limit to the size an image can be?
How do I get the overlay to stretch over the entire window?
How do I create a gallery of images?
Is there a way to have one picture lead to a gallery of a lot of pictures?
How do I add a caption to the images?
How do I fix the broken loading images?
How do I make the previous and next buttons always show instead of just showing up when hovering?

How do you install Lightbox 2.0?

Download lightbox 2.0 from huddletogether.com.

Change the name of the downloaded folder from “lightbox2.02 Folder” to “lightbox”. Upload this folder to the root directory on your server.

Add the following code to the head of the html page you want to use lightbox on.
<script type="text/javascript" src="lightbox/js/prototype.js"></script> <script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"> </script> <script type="text/javascript" src="lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

You may need to change the paths to make sure they point to where you have put the files. I use absolute paths, like:
http://zollinhofer.com/lightbox/js/prototype.js. To make sure that you have set your paths correctly, type whatever you have as the path above into the address bar of your favorite browser. If the file shows up, you did it correctly. If not, try again or shoot me an email and I’ll help you get it set up.

You will most likely need to go into your lightbox.js file and change the paths to the loading.gif and close.gif. You can find these near the top under “configuration”. Again, you can use an absolute path, or just set it to: “lightbox/images/loading.gif” & “lightbox/images/closelabel.gif”.

To make an image use Lightbox, you need to add rel=“lightbox” to the link. So this:
<a href="http://zollinhofer.com/images/picture1.jpg"> First Picture</a>
Would become:
<a href="http://zollinhofer.com/images/picture1.jpg" rel="lightbox">First Picture</a>

To make a group of pictures add rel=“lightbox[nameofset]” to the link. Add this tag to every picture that you want to be a part of the set.

Is there a limit to the size an image can be?

No, there is no limit, but the bigger an image is (filesize), the longer it takes to load. Also, the bigger an image is (height & width), you may end up having to scroll to see all of it. I manually crop my pictures to around 400 × 600 (at the biggest) so that I know if fits on the screen (and the filesize is reduced). If you don’t want to bother with manually cropping, you can check out the thread about A Solution For Large Images on the huddletogether forum (which discusses how to apply an extra piece of code that will resize the image for you).

How do I get the overlay to stretch over the entire window?

For some reason, there is a bit of a oversight in the lightbox.js code. You can do one of two things to fix this…

#1. Download my lightbox.js file and replace your lightbox.js with mine.

#2. Fix the file yourself. Open up lightbox.js and search for “this.showImage();”. You should see a line that has
this.showImage();
Add the following code right after that code:
var pageSize = getPageSize(); if((imgHeight + 150) > pageSize [1]) Element.setHeight('overlay', imgHeight + 300);
So the code should now look like:
this.showImage(); var pageSize = getPageSize(); if((imgHeight + 150) > pageSize [1]) Element.setHeight('overlay', imgHeight + 300);

How do I create a gallery of images?

Begin with the markup for your pictures. I’m going to use 4 pictures for my example.
<a href="http://yoursite.com/images/picture1.jpg" rel="lightbox">My first picture</a><a href="http://yoursite.com/images/picture2.jpg" rel="lightbox">My second picture</a><a href="http://yoursite.com/images/picture3.jpg" rel="lightbox">My third picture</a><a href="http://yoursite.com/images/picture4.jpg" rel="lightbox">My fourth picture</a>

You then need to change the rel=“lightbox” to rel=“lightbox[nameofgallery]”.
<a href="http://yoursite.com/images/picture1.jpg" rel="lightbox[mygallery]">My first picture</a><a href="http://yoursite.com/images/picture2.jpg" rel="lightbox[mygallery]">My second picture</a><a href="http://yoursite.com/images/picture3.jpg" rel="lightbox[mygallery]">My third picture</a><a href="http://yoursite.com/images/picture4.jpg" rel="lightbox[mygallery]">My fourth picture</a>

Is there a way to have one picture lead to a gallery of a lot of pictures?

Sure. There are two easy ways to do this.

1. Give each one of the images an extra class (I use the class “hide”) except for the very first image which you don’t want to hide. I’ll use the same example as above:

<a href="http://yoursite.com/images/picture1.jpg" rel="lightbox[mygallery]" title="Picture 1">My first picture</a><a href="http://yoursite.com/images/picture2.jpg" rel="lightbox[mygallery]" class="hide" title="Picture 2">My second picture</a><a href="http://yoursite.com/images/picture3.jpg" rel="lightbox[mygallery]" class="hide" title="Picture 3">My third picture</a><a href="http://yoursite.com/images/picture4.jpg" rel="lightbox[mygallery]" class="hide" title="Picture 4">My fourth picture</a>

I’ve added class=“hide” to the 2nd, 3rd, and 4th images. You will need to add the class “hide” to your css file as well. Open up the lightbox.css file and add the following code:

.hide { display: none; }

This way the only image I’ll see on the page is the first one. The others will be hidden. This way is the most accessible.

The second way is to leave the text for the link blank, so there is nothing to click. This way is not quite as good because if for some reason the user has javascript disabled, they won’t be able to get to those pictures. But this is how you would do it if you chose to go that route:

<a href="http://yoursite.com/images/picture1.jpg" rel="lightbox[mygallery]" title="Picture 1">My first picture</a><a href="http://yoursite.com/images/picture2.jpg" rel="lightbox[mygallery]" title="Picture 2"></a><a href="http://yoursite.com/images/picture3.jpg" rel="lightbox[mygallery]" title="Picture 3"></a><a href="http://yoursite.com/images/picture4.jpg" rel="lightbox[mygallery]" title="Picture 4"></a>

How do I add a caption to the images?

It is quite easy to add a caption to an image. You should start with the regular markup for an image:
<a href="http://yoursite.com/images/picture1.jpg" rel="lightbox">My first picture</a>
All you have to do is add a title to the image…
<a href="http://yoursite.com/images/picture1.jpg" rel="lightbox" title="Whatever little phrase you want your caption to be">My first picture</a>
That’s it!

How do I fix the broken loading images?

For some reason, the original lightbox.js file has the wrong paths. You’ll need to go into the file and fix the paths under configurations (which is directly under the table of contents). I used absolute paths for mine.
var fileLoadingImage = "http://zollinhofer.com/lightbox/images/loading.gif"; var fileBottomNavCloseImage = "http://zollinhofer.com/lightbox/images/closelabel.gif";

If you set the paths correctly, you should be able to type the path into your browser and the image should show up. If you installed lightbox in the method I explained above, your path should be similar to mine (with your site’s name where zollinhofer.com is).

How do I make the previous and next buttons always show instead of just showing up when hovering?

All you have to do is go into the lightbox.css file and change a few lines. Find the id for prevLink & nextLink as you see below:

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) 0 15% no-repeat; border: none; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) 100% 15% no-repeat;
border: none;
}


and change it to this:

#prevLink, #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) 0 15% no-repeat; border: none; } #nextLink, #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) 100% 15% no-repeat;
border: none;
}


Recent Articles
iPod Touch
600 chip poker case
Poker Chips
Christmas from a Teenage Perspective
What I learned about myself on Sunday
Teaching Settlers of Catan
Lightbox FAQ
Kylen update - 7 months
A Day to Remember
Multi Touch User Interface
» complete list...

Brian's Buddies

• couchfort
• jstar
• Open Switch
• RU-Smiling
• Somewhere Between Now & Then
• standards for life
• think in pencil
• Twofive

Sites Often Visited

• 9rules
• A List Apart
• CSS Beauty
• Godbit
• Godly Creative People
• Iconfactory
• Mezzoblue
• Phill Ryu
• SonSpring

Random Bits

• Despair
  Motivational posters, step aside. These are Demotivators, the ultimate in sarcasm. Please buy me one for my classroom!
• ShapeShifter Unsanity
  Want to customize your pooter? Yeah, a Mac looks nice, but it is in our nature to want to customize it. Shapeshifter lets you, and Amora is a great theme.
• Sketch Up
  All I can say is wow. I'm quite excited to figure out if I can use this in my classroom. A free 3D drawing program from Google. Go check out some of the videos to see what is possible with it.
• Postsecret
  An interesting site about people sending in their secrets on the back of a postcard. May be some questionable content. Remember, they are people's secrets...
• Ask A Ninja
  Hee hee. Ben at Open Switch put me onto Ask A Ninja. Thanks Ben! As long as you like stupid things, you'll enjoy this. And ninjas. Stupid ninjas.
» complete list...