Site hosted by Angelfire.com: Build your free website today!

Steveís Thumbnail Tutorial

note: if you make your thumbnail's by using the height=
and width= attributes they will take forever to load.
I have 15 thumbnail's per page 80x100 and
each page loads in 15 second's,

 

Step One:

Transload the full size pics to your web site and rename them to

pic1.jpg pic2.jpg pic3.jpg etc.

Step two:

Take the url of your pic to ~ Image Magick ~ and re-size the full size pic to 80x100 or any size thumb you want.

Click ~ Here ~ for an Image Magick Tutorial.

note: Image Magick is a very busy site
you might have to use it at off hours.

Step Three:

Tansload the re-sized thumbnail to your web site and rename it pic1t.jpg pic2t.jpg pic3t.jpg etc.The t is so you know which one the thumbnail is. Repeat above steps for all your pics.

Step four:

After you have all the picís re-sized you make the thumbnail a clickable link to the full size pic using this code.

<a href=
"http://url of full size pic here">
<img src=
"http://url of thumbnail pic here"></a>

Step Five:

To put 5 thumbnails in a row use this table code

<table border="0" width="450">
<tr>
<td align="center">
<a href=
"http://url of full size pic here">
<img src=
"http://url of thumbnail here"></a></td>
<td align="center">
<a href=
"http://url of full size pic here">
<img src=
"http://url of thumbnail here"></a></td>
<td align="center">
<a href=
"http://url of full size pic here">
<img src=
"http://url of thumbnail here"></a></td>
<td align="center">
<a href=
"http://url of full size pic here">
<img src=
"http://url of thumbnail here"></a></td>
<td align="center">
<a href=
"http://url of full size pic here">
<img src=
"http://url of thumbnail here"></a></td>
</tr>
</table>

It will look like this.

To start a new row of five thumbnailís just add a (tr)
the (tr) starts a new row.
then repeat the above code.

 

If you have any questions just mail me sss_2333@yahoo.com