I am trying to create a thumbnail gallery using a simple table layout. My problem is that when I hyper link the image src to the cell it comes in at full size. I would like to be able to have the image come in at a smaller size and then allow the user to click on the image to see the full size picture. Now the Question: How do I write the HTML code so I can do this? Any pointers would be appreciated<br />
(I am currently using a Yahoo Picture Briefcase...check out the family site <!-- w --><a class="postlink" href="http://www.geocities.com/labarrefamily">www.geocities.com/labarrefamily</a><!-- w --> )<!--content-->Right heres how it goes<br />
Limit the size of the datacell and then limit the pic to that size ie.... <br />
<td width="100" height="100"><a href=http://www.htmlforums.com/archive/index.php/"http://tothepic"><img src="http://tothepic" width="100" height="100"></a></td><!--content-->You *can* take any size file and cram it into a 100x100 <td> but it'll look horrible and still take forever to load. <br />
<br />
If images are forced to render at any size other than size they are, the will look distorted and funky -- not to mention that you wont be saving anything in the page loading time as the file size will remain the same.<br />
<br />
Another solution is to create two image files -- one thumbnail sized at about 150x150 (or something like that) and one at the size you would like to display. Link the smaller image to a new page (or pop-up window) with the larger image.<br />
<br />
-beth<!--content-->I have been thinking of doing the same thing like what etridco refered to having the new image display in a popup window would be really cool.<br />
<br />
Here is a page I found with this function;<br />
<!-- m --><a class="postlink" href="http://www.dirtbikemagazine.com/picgal2.asp">http://www.dirtbikemagazine.com/picgal2.asp</a><!-- m --><!--content-->Many ways that the thumbnail can be achieved!! Find the one best for you! or if you use dreamweaver or Frontp*ss then use their create thumbnail option!!<!--content-->Go to Download <!--more-->.cnet.com and do a search for a program called Arles Image Web Page Creator.<br />
<br />
You tell it which pics you want on the page, the colors and the layout, and it automatically creates the pages with thumbnails and links to the full size images.<br />
<br />
If you dont like the way the pages are made, you can just save the thumbs they create, then create your own page and link them to the full size images.<!--content-->Originally posted by etridico <br />
If images are forced to render at any size other than size they are, the will look distorted and funky -- not to mention that you wont be saving anything in the page loading time as the file size will remain the same.<br />
<br />
<br />
Absolutely. The whole point of having clickable thumbnails is to speed up the whole viewing process. If you reduce the size of an image using HTML, it doesn't make any difference to the loading time of the page as the image file sizes are still the same. You may just as well load all the full size images onto the page because it wouldn't be any slower. To create true thumbnails, you need to open the files in an image editor and resize them. By doing that, it will also greatly reduce the file size making the page load faster. Then the viewer need only open the full size images that they are interested in.<!--content-->
(I am currently using a Yahoo Picture Briefcase...check out the family site <!-- w --><a class="postlink" href="http://www.geocities.com/labarrefamily">www.geocities.com/labarrefamily</a><!-- w --> )<!--content-->Right heres how it goes<br />
Limit the size of the datacell and then limit the pic to that size ie.... <br />
<td width="100" height="100"><a href=http://www.htmlforums.com/archive/index.php/"http://tothepic"><img src="http://tothepic" width="100" height="100"></a></td><!--content-->You *can* take any size file and cram it into a 100x100 <td> but it'll look horrible and still take forever to load. <br />
<br />
If images are forced to render at any size other than size they are, the will look distorted and funky -- not to mention that you wont be saving anything in the page loading time as the file size will remain the same.<br />
<br />
Another solution is to create two image files -- one thumbnail sized at about 150x150 (or something like that) and one at the size you would like to display. Link the smaller image to a new page (or pop-up window) with the larger image.<br />
<br />
-beth<!--content-->I have been thinking of doing the same thing like what etridco refered to having the new image display in a popup window would be really cool.<br />
<br />
Here is a page I found with this function;<br />
<!-- m --><a class="postlink" href="http://www.dirtbikemagazine.com/picgal2.asp">http://www.dirtbikemagazine.com/picgal2.asp</a><!-- m --><!--content-->Many ways that the thumbnail can be achieved!! Find the one best for you! or if you use dreamweaver or Frontp*ss then use their create thumbnail option!!<!--content-->Go to Download <!--more-->.cnet.com and do a search for a program called Arles Image Web Page Creator.<br />
<br />
You tell it which pics you want on the page, the colors and the layout, and it automatically creates the pages with thumbnails and links to the full size images.<br />
<br />
If you dont like the way the pages are made, you can just save the thumbs they create, then create your own page and link them to the full size images.<!--content-->Originally posted by etridico <br />
If images are forced to render at any size other than size they are, the will look distorted and funky -- not to mention that you wont be saving anything in the page loading time as the file size will remain the same.<br />
<br />
<br />
Absolutely. The whole point of having clickable thumbnails is to speed up the whole viewing process. If you reduce the size of an image using HTML, it doesn't make any difference to the loading time of the page as the image file sizes are still the same. You may just as well load all the full size images onto the page because it wouldn't be any slower. To create true thumbnails, you need to open the files in an image editor and resize them. By doing that, it will also greatly reduce the file size making the page load faster. Then the viewer need only open the full size images that they are interested in.<!--content-->