Lightbox Tutorial

-------------------------------------
EXAMPLE
-------------------------------------

  

-------------------------------------
TUTORIAL
-------------------------------------

I promise this is 100x easier than it looks!

1. Upload your photos to flickr as usual. Sign out of flickr and go to your photostream (http://www.flickr.com/photos/USERNAME/) -- keep this page open.
   
2. Write your blog post as usual in Blogger. To add the slideshow -- before you hit PUBLISH POST -- click the tab on the top right of the tan box (next to the "Compose" tab) that says "Edit Html".
3. Do not fear the Html!  Go to the bottom of all the text you see and hit "return" a couple times.
4. Now to add the images!  Here's the template to use:
   
    

   <a href="LINK1" rel="lightbox-FIRSTNAMEDATE" title="CAPTION"><img src="LINK2"></a>

   
   
   Just copy/paste that for every image you want to insert into the post.  
   
   
5. FIRSTNAMEDATE is going to be something like LAURA0401 and will be the same for every image.  (This just marks all images with this text as part of the same slideshow.)
6. LINK1, CAPTION, and LINK2 are going to change with every image that you include.  CAPTION is just the caption you want shown beneath the image when the slideshow pops up (i.e. "Winged Victory").
7. You kept your flickr photostream page open, right?  Find the first photo you want to include and click on it so it opens up on its own page.  Then click on the little magnifying glass icon right below the title that says "ALL SIZES".  You'll see some size options at the top that say "Square", "Thumbnail", "Small", "Medium", and "Large".  Find the image size whose largest dimension is no more than 600px (suitable for onscreen viewing) and select it.  On the new page, right-click on the image (or, on a Mac, hold down ctrl and click) and select "Copy Image Address".  Now paste it where LINK1 is.
8. One more step!  For LINK2 do the same thing as LINK1 but use the image on the "Square" option flickr page.

So your final bit of code should look something like this:

<a href="http://farm4.static.flickr.com/3262/3161463166_dab290a413.jpg" rel="lightbox-LAURA0401" title="Winged Victory"><img src="http://farm4.static.flickr.com/3262/3161463166_dab290a413_s.jpg"></a>

(Note that LINK1 and LINK2 look the same at a glance, but are going to be slightly different at the end before "...jpg" Basically, LINK1 is the full size image, and LINK2 is the little square thumbnail that shows up in the body of your post.)

Repeat the steps above for each image you want to include in the lightbox slideshow, each time changing LINK1, CAPTION, and LINK2, while keeping FIRSTNAMEDATE the same.