Lightboxes

Ginger's picture

Tags: 

These are "lightboxes". Click them to open, and use arrow key / buttons to page through,  type X or click X to exit.

 2 peppers, smaller than a fingertip

To make a lightbox:

1. On the editor toolbar, click the Insert/Edit Image button. Don't worry about the Latin - it's just a preview of how text flows around your picture.

2. There are several tabs on the dialog that opens. On the first tab, you want to enter: a. The URL of your thumbnail image, and b. alternative text (a caption for your picture). If you do not have a thumbnail image, you can set width or height to 128 here - but it slows down the website. Use thumbnail images - Google Picasa, Flickr, Photobucket - they all provide thumbnails.

3. On the second tab, you enter a. the URL of a bigger image to pop up, and b. select lightbox / lightshow / lightvideo on the "Lightbox" list of choices. A lightbox lets the user page through the images. A lightshow auto-advances to the next picture. Only use lightvideo for small videos. (You still use the Insert/Edit Image button for a video - the image you're inserting is a thumbnail, and the "bigger image" 2nd tab URL is that of the video.)

4. Add blanks (use spacebar) between images for a nice margin. Etc. The spacing and centering in the thumbnails above is just a centered paragraph containing two thumbnails with a blank between them.

By default, all images added to a page (which includes comments!), are in the same lightbox "group" named "page". You can use the Source button to change that, if you understand the documentation attached below. However, if you use the Image button to edit the thumbnail again, the [page] group will re-assert.

Documentation attached for all the lightbox features. Ignore Introduction and Installation - go straight to the section on adding lightbox functionality to your images.

Getting Image URLs

You see an image on the screen in your web browser - like a Picasa Web Album page with many little thumbnails. To get the URL of one of those thumbnails:

  • In Firefox:  right-click on the picture, and select Copy Image Location. (Not Copy Link Location.)
  • In Internet Explorer:  right-click on the picture, and select Properties. The popup reports the "Address". Manually highlight the address and ^C to copy it.

I haven't hunted for this functionality in other web browsers, but they all have some way to do it.

FWIW, if you use Google Picasa, the thumbnail URL will contain the sub-address "s120" or "s144" for a thumbnail - that means "size 120", etc. You can paste the exact same URL on the destination (bigger) image URL and just edit "s144" (or "s120") to "s640", "s720", or "s800", instead of going back and copying the big-image URL. I like "s640" best - the bigger ones often scale the picture down to fit inside the lightbox and add a white "expand" icon to zoom in. Which works, but doesn't do nearly as nice a photo scaling job as Google Picasa.

Other online photo albums probably have similar systematic relationships between the thumbnail and medium-sized versions of the same picture, which can be divined from studying their URLs. (If you discover any, please comment below.)

AttachmentSize
Plain text icon README.txt10.48 KB
0
No votes yet