Thumb button - creates a thumbnail and galleries

[ws]

Button name: Thumb

Feature or effect: Produces a "thumbnail" (about an inch high rectangle) of a picture with a decorative border. When the mouse cursor is over the "thumbnail" a hover effect causes the border to fade. Clicking on the "thumbnail" opens the thumbnail's full size picture in a new window.

Testing and usage:

a. You need to have the photo's url (link) from the hosted photo's location (like on photobucket) ready to copy and paste. Notepad makes a handy repository for such clipboard copied urls.

b. Click the thumb button. Then just paste in the photo's url into place indicated (replace that text with the url). When you copy your url from it's source you don't need the "http://," but if you do grab it and paste it be sure to backspace out any extra "http://" that might be there (you only want one).

c. Click the Thumb button a second time. Then paste your photo url a second time where shown (replacing that text). Check to be sure you don't have two"http://" and you are ready to go.

d. Add a many as you want... it automatically lines them up and forms a gallery effect.

e. You can customize your Thumbnail size. For example, if you made it width="320" height="266" then it would fit one of the book pages. Just adjust size to whatever you like (smaller than destination pic).

f. Click Save
Thumbs are best displayed as a gallery. If done single fashioned they automatically postion left aligned (so they work well for galleries).

Just use the Center button for a single thumbnail to be aligned in the center of your display.

Additional "thumb" feature.

Allows you to have a beauifully formatted caption under each thumb.


Click here for an example:

http://noevidenceofacrime.com/gallery.php?blog=12&order=ASC&posts=1&page=1&paged=20

Thumbnails and wrapping

Anytime that you use the thumb feature to create a thumbnail. Any text which follows will automatically wrap with what is above (the thumbnail). This is desirable in most cases. To cause that text not to wrap (but to follow), follow the thumbnail with this code:

<div class="clear"></div>

That "clear" command is inserted by clicking the Clear button.

Following a thumb with a table can also produce problems. It will often appear to the side (as though it is another thumbnail) making a gallery. But, just use the clear mechanism after a thumb to avoid anything being misaligned that follows..