DIY – Thumbnail galleries

This week’s blogpost will be how to create a thumbnail gallery in your web site using css.

The quickest way to do this is to use the example from the w3schools website.

Step 1 – Create your thumbnails. Select which images you upload to the server (usually in a separate folder), and for each image, you will need to create a “thumbnail” sized image along with them (I suggest putting a “_thumb” at the end of the filename before the file tag)

Step 2 – Go to the w3schools css image gallery page, here:

Step 3 – Click on the “try it yourself button” for the code.

Step 4 – Copy the code from the left hand screen of this window:

(Make sure to copy the code from the header is copied into your header, and the same for the body)

Step 5 – In the body code, replace each “href” link with the url for your image (You can make an html page for your image if you want, but it’s easier to link to the image directly.) Replace each “src” value with the url for your thumbnail. Adjust the size of your thumbnails as you wish by inputting new values for “width” and “height” (You can even give your image a “mouse-over” text box by adding your own text to the “alt.”

And that’s it. You’ve made a thumbnail gallery.

– Dan Pinsky


~ by kravenergeist on February 6, 2011.

%d bloggers like this: