I'm new in web design and I want to build a web site where my family can view thumbnail pages with family photos and select the thumbnails to view the original photo. As a starter I thought about a couple of thumbnail pages to increment or decrement. I want to generate the pages with a free tool in order to review the html code for self learning purpose. Is this a good approach and is there any free tool suitable for this?


Tillo

hm well yeah you can learn from it but basicly what most html gallery programs do is make a table and generate thumbs put them in <img> tags and then you can define the thumbs max width and height and also how many rows per page and how many thumbs per row ect. and then it just makes all the html pages. and it usualy makes a page for each picture you can click on.

If you are VERY new to HTML it might help you a bit but its nothing you can learn from to code by hand because what there programs do is take a whole load of workload off of you. You can look at download.com for some software that makes HTML GALLERYs. if you get shareware their most likly gonna watermark your images or put some text on your website that tells it was made by that program. so see ifyou can get freeware but im not sure those dont watermark it either your gonna have to look around.

if you dont find anything search for THUMB GENERATOR or somehting like that.

if you have any more questions feel free to ask

Here is one of several links to found right here in the trap17 forums:
http://www.trap17.com/forums/php-photo-ima...ipt-t31792.html
Please use the Search feature found at the top of each page. Or look at the bottom of the Topic and there will always be a 'Similar Topics' list to link to.
This question has been asked several times recently and there are several topics for review. I have posted only one.

You can just create thumbnails for your images (very fast if you use a batch process in your graphics editing software) and all I do is put them in a table to keep them nice and neat and add an onClick behaviour to each one so that when someone clicks on the thumnail it opens a window with the full sized picture. It can be laborious if you have a lot of pictures but it is very basic and if you have good wysiwyg software (I use Dreamweaver MX) it's very straight forward. The downside is, as I said, if you have a lot of pictures, it's arduous and if the person viewing the pictures has a pop-up blocker, the full size pictures won't open. This is the method I use in my picture gallery (I'd love to point you to it but because my current host has screwed me big time, the link won't open ) Anywayz, this is how I do it:
The code looks like this:

<a href="javascript:;"><img src="miniaturehorse_thumb.jpg" width="150" height="102" border="0" onClick="MM_openBrWindow('miniaturehorse.jpg','','width=357,height=250')"></a>

<a href="javascript:;"> is just to add a link to the thumbnail. You can't add a behavior to a picture unless it is linked. You could just put in '#' (<a href="#"> but if you use #, every time someone clicks on a picture the page will jump to the top so I use an empty javascript command "javascript:;". The next part is the thumbnail that I want people to be able to click on, the width and height is obviously just the size of the thumbnail (you don't have to make a thumbnail, you can just make the original picture smaller by altering it's width and height attributes). The onClick is the behavior that allows someone to click on it. The MM_openBrWindow is what will happen when they click, in this case, open a window. The bit in the bracket immediately after is what will be in the window that opens (in this case a picture called miniaturehorse.jpg) and how big the window will be - 357 x 250 pixels. If you use this method, I would recommend that the window be 20 pixels bigger than the picture e.g if your picture is 100 x 130, the window would be 120 x 150. You can also set things like if the window will have scroll bars, navigation bar, resizing etc but I always disable them to make the window look nice and neat. This is of course clunky comparitively speaking and there are some much smoother javascripts out there but you would have to search for them. This is just one way using very basic html and javascript.

I use tumbnails on my site often. A sample can be seen at
http://www.websetsbydonna.com/sideanimals.htm
Try it out, if this is what you want, you can use my page as a template. Or I can make you one if you like.


Actually here is a better example/template from my homepage site.

http://members.ync.net/dstahlarson/photosbydonna/

This would probably suit your purposes better. Of course, I would make the background color different. I am a purple and green freak.



This post has been edited by jlhaslip: Jan 17 2006, 09:09 PM

Ok I've done a search on Google and found these..
Hope they can somehow help in designing a HTML picture gallery.

http://www.mihov.com/eng/gc.html
http://www.nonags.com/nonags/htmlgallery.html
http://graphicssoft.about.com/od/webgalleryfreepc/
http://janim.net/web-freeware/free-html-gallery-creators.php

I can't post more links here but you can search for more by googling "html gallery freeware" as the keywords..

Wow, thank you all for the good replies! Thanks for the nice examples, links and lessons. I have enough information to study for a whole weekend. The website made by Mich is just what I had in mind.

tillo

Glad I could be of help. Here is a template version of my tumbnail link page for your photos. You can edit it to suit your needs.

Zip File Containing Template

Be patient when you click on the link, it takes a few moments for the download window to appear. If I can help in any other way, please feel free to PM me.