View Full Version : Thumnails & Photos

10-05-2003, 06:08 PM
Hi everybody,

Is there a quick way to generate thumbnails (say 30 thumbs: thumb1, thumb2...) with a script on a web page?

Is there another quick way to generate 2 types of thumnails, say thumb-a & thumb-b, (again thumb-a1, thumb-a2... thumb-b1, thumb-b2...)

Thanks in advance

10-05-2003, 07:55 PM
i built a script to do something like what your after. my script genreates a gallery and has a popup function so when clicked it will open a window with the picture in also with a specific comment.

the link for the generator http://www.martin.newton1.btinternet.co.uk/1/galcode.htm

if you require something slightly different i can modify it.


Mr J
10-05-2003, 08:11 PM
Take a look here


Although the script is finished I have not yet finished the page, but it might give you some idea.

The table containing the thumbnails is dynamically generated.

This means that instead of using 4 pages for 4 galleries the same page is used for all the galleries.

View the source to see the script

10-05-2003, 09:03 PM
Thank you both for your help. Both scripts are wonderful and smartly written.

But I have a problem. Since the web page that I will have to prepare is for an artist, many of the audience will be Mac users. It has been brought to my attention that Mac users have, shall we say, some "particularities" (my apologies if this is not a politically correct term) One of them is they don't like popups, which are mostly killed instantly no questions asked. Everything has to be in the same screen, with no alterations as to scrollbars, menubars etc. Therefore when you click on the thumbnail, it has to open on the same page. In other words you have thumbnails on the left side of the page, say 3-4+ rows, and when you click, the image should open on the right side of the page.
Right now I am using frames to achieve this result.
Can the same be done dynamically?

Thanking you in advance

Mr J
10-05-2003, 11:43 PM
I could adapt my script to accomodate frames if you like.

Let me know what your frame layout is going to be


Your script is not closing the table

10-06-2003, 12:39 AM
Thanks a million.

Can it be done without frames, like having some placeholder on the same page, which will accomodate the photos, with an onclick?

The way I visualize it is as follows:
I visualize an imaginary table in the middle of the screen
On the top cell (merged 2 cells) there is the title
On the left cell, second row we see the links to Gallery1, Gallery2, Gallery 3 etc one underneath the other
Right under that we see the thumbnails, say 3-4 per row
On the right cell second row there should be a placeholder, which will accomodate the clicked photos (which will all be the same size, always).

I say "imaginary table" because people say we should drop the tables and use CSS. Personally I have not managed yet to control exact positioning (of objects in relation to each other) using CSS, that is why I say table. Nevertheless, if you like tables, by all means use them.

I used frames because I couldn't do it any other way, not because I like them.

I leave it up to you, anything will be fine as long as we avoid popup windows.

Thanks again

Mr J
10-06-2003, 09:26 AM
I'll see what I can do for you


10-06-2003, 10:20 AM
You may use "layers" (DIV controlled) generated by script (document.write or, better createElement DOM method, activated on a specific event on page). I have to do myself such a gallery within 2 weeks, or so, for a client... If you have patience till then...:-)

Anyway, my advice is to give an "array-like" name to each ID's or object on page (ie. div01, div02...img01.jpg, img02.jpg) Thus you may dratically reduce the script by using (for i=....) statesments and easy-to-handle array variables...

Mr J
10-06-2003, 10:41 AM

I have included a draft example in the attachment

You will have to put your image names/paths in the arrays as there is a limit to how much you can upload on these forums.

If you like what you see or if there is anything that you would like changing, adding, removing etc let me know.

As I am altering an existing script to suit your needs there may be comments, statements within the script that are not used.

Once we have settled on what you want I will clean up the script and send you the final version.

10-06-2003, 01:47 PM

Thank you so much for your advise. Sounds mighty complicated for me though, I am not that good....
Should you make a script though for yourself, and should you want to share it, I will be very happy. I am not in a rush

Thanks again

10-06-2003, 01:51 PM
Mr J,
Thank you so much for taking the time to assist me, I really do appreciate your helpfulness.

The script is wonderful, and very fancy!! Just perfect!!

Small details:

a) the placeholder containing the large photo, can it move just a little bit to the right? it is too close to the the left pane

b) the thumbnails under the galleries, can they be vertically aligned TOP so that if some galleries have few thumbs, they won't be much space in between

c) I usually use this doctype (and I validate at W3C)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html401/loose.dtd">
As I am not very knowledgeable, I feel somewhat scared, and I am told I have to "follow the rules" which I do as much as I can. Thus I use this doctype. What is your opinion on this matter?

d) Will I have thumbs & photos as separate jpegs, or will the photo be reduced automatically to thumb?

Artists are very particular people, they want their art to appear "exactly" so. Plus all of them would like to see their names appear somewhere. Right now I have a separate page with all the credits. So I am thinking....I don't want to abuse your willingness to help, but if it can be done without too much trouble, can we have up to 5 separate lines of text appearing next to the picture with the credits. This way I can include the name of the photographer on one line, the name of the model, the make-up artist, the hairdresser, the stylist etc (not all will have all the lines)

You don't have to do all this of course, just the a & b points will suffice, the c point will be the cream on top of the pie, and the credits will be the cherry on top of the cream!!!

Thanks a million

PS I should mention that some of the people viewing this will have Mac's with assorted OS and with all sorts of browsers. I do not have a Mac, I use a PC and have installed Netscape as well as internet explorer.

10-06-2003, 02:04 PM
Mr J

Can you please do me a great favor, if possible? Whenever you have a few minutes can you go to this link http://pages.infinit.net/zeus/test1/

Notice the credits on the right panel of the table. I want each credit to appear on a different line. Right now they are in a continuous line. Can it be done easily, without too much trouble?

If yes, please help, if not forget it.

Thanks again


Mr J
10-06-2003, 05:04 PM
Take a look at the attachment regarding the credits in the right panel.

In the Gallery page are you having any text under the thumbnails?

How much gap between the panes do you want?

10-06-2003, 06:00 PM
Wow!! Thank you so very much, the rotation script is wonderful, it solves one major problem. Is there a way to replace the "default.jpg" with some text. The artist would like to give some comments before starting the "show" If it is too much trouble, just forget it, the script is wonderful the way it is now.

Ragarding the gallery, yes it will be nice to have some text under the thumbnails.

The gap between panes could be 15px

Again, thank you so very much for helping me, I sure appreciate it


Mr J
10-06-2003, 06:48 PM
Revised "Rotating Images"

I am also in the process of revising the "Gallery" script.

To allow for easier positioning preferences I am recreating the page.

Instead of using a table I am using DIVs and CSS.

This may be easier for you

10-06-2003, 09:15 PM
hi there
thought this might interest you.I wrote this not as a web page but to use to veiw pictures stored on a disk. But i thought you might find it useful. as it does not use frames or pop ups both of which can be good to avoid if you can. It was designed to be easy to add pictures to. To help with this all the picture file name and address info is keeped in an external java script, so to add a pic just add it to the external script and you are done. The script it self will resize any pic that is to big to fit the page making it even easier to add pictures.

The down side is that this script was writen to work on my computer and with my browser (ie6). It would need work to work with other browsers.

I don't think this is the whole answer but i thought this might give you some ideas. anyway i have attached it take a look...

sorry the attachment did not work...i have placed it online but needs a little tweek but you should get the idea

10-06-2003, 09:36 PM
:) :) :) Yes, this is perfect!!!
"Chapeau" as we say in french. Thank you so much for taking the time to fix my script.
I appreciate your cooperation :) :) :)

Mr J
10-06-2003, 10:49 PM

Take a look at the attachment regarding the thumbnail script.

I have done some of the changes you mentioned, let me know what else needs to be done

10-07-2003, 12:19 AM
Well it is a wonderful script, I am very happy. Some little points, to polish it and make it perfect..

a) Credits remain after I click for another pic, they should be erased, in case I have a pic with no credits. Is there anything that I can do for this (maybe have blanks)?

b) Galleries 1 2 3 4 should be in different rows, left-aligned

c) Thumbs should start right under the galleries, at this moment there is lots of space above them

d) I would like the credits to be left-aligned. Can they also be a little closer to the photo?

e) I suppose that if I want to change the style of the type, I will modify the .galleryCSS{.... line?.

f) Am I right to assume that I can define any CSS style for the links(color..), the type(P & H1..), the image(say add border..) the usual way, in the head section?

g) Can we have a border that will encompass the photo & the credits, where the side of the photo containing cell has the same dimension as the side containing the credits?

h) Last item: the screen looks empty before we start clicking. Is there a way to have some text in place of the picture, so as to tell people what to do? ( just like the other slideshow)

Now, since I am not that good with coding, a friend gave me an editor (Hot Metal Pro 6) and I was told to use the transitional-loose doctype. When I tried to open the file with this editor & this doctype I got an error message, saying that

tr valign="top" height="200px"
will become
tr valign="top" to which I said OK to be able to continue

Then I got this:
HTML problem: A TR tag was found in an invalid location in a table. This error can often be corrected by moving the tag either inside a TD or TH, or outside a TABLE.

And further:
Validation log: Implied missing end-tag (/TABLE>

Also I get some of these: Bad or missing attribute value. A value for required attribute "TYPE" must be specified.

If I have no doctype in the htm file, there are no problems, except that I have difficulties making alterations to the file. With the doctype I can't use my editor, I get errors, and it does not let me go further. Is there something that I can do to circumnavigate my problem?

Thank you again so much for taking the time to help me out, I appreciate your input.


PS Believe me I debated with myself for quite some time before posting this, finally I decided to ask my questions. You do not have to modify the script, it is good enough as it is.

Mr J
10-07-2003, 03:41 PM

What browser are you using and at what resolution?

10-07-2003, 05:48 PM
My screeen: 1024x768
I use ie 6.0 & Netscape 7.1
My computer is a PC, my os win2000 & XP
Users that will view the gallery will be either on a PC or on a Mac. I dont know what versions of OS/ browsers for Mac, win people will most probably have ie v.5+, Netscape tha last two versions.
Personally I don't care for backward compatibility to the nth degree, just the most common browsers of the most common platforms, should be able to see almost the same things. (I don't think that any web developers will be going to the site)

Also, please keep in mind that I am not very familiar vith such "fancy" coding, I would like to learn though. If I will be able to make some "appearance" modifications, such as font styles, colors, sizes etc , even be able to "position" of tables a little bit right/left/up/down, it will be a tremendous plus, which will allow me to use the gallery in a variety of ways. For example, I was just thinking that I could put entire collections on a CD and wouldn't that be wonderful??? The use of this is illimited!!!

I give you all this backgrouns info, so that you have an general idea of the situation

Thanks again for helping


Mr J
10-07-2003, 07:27 PM

Our different screen resolutions is why we are both seeing differences in the layout.

My screen resolution is 800 x 600 against yours at 1024x768.

Take a look at the attachment to see the latest changes that I have made.

Let me know your views / comments etc.

10-07-2003, 11:49 PM
Mr J,
It is perfect, exactly tailor-made, I just love it!!! And so flexible, I can change colors, sizes & other styles. I am amazed and very happy. Thank you for your patience in guiding me through this endevour.

Everything is perfect. The width of the image as 300 is perfect, the height though will be different, rather 400. The images will all be the same size. If I have them 250 width & 300 height, can I make the change in the script?


Now, my last question is regarding the DOCTYPE. If you tell me that I don't need one, fine, everything works perfectly right. Should you think though that I ought to have the transitional-loose thing, then most of everything has been corrected, some small last details are:

my editor has replaced
<tr valign="top" height="200px">
<TR VALIGN="top">
that is why the thumbs will appear with space above them if there are just a few pictures

There is only one value for required attribute "TYPE" that has to be specified, apparently just before the style in the head section. What should I put there?

Only one error message:
HTML problem: A TR tag was found in an invalid location in a table.
Implied missing end-tag </TABLE>

I tried looking at the script with the Notepad, and I am getting better and better!!! It's fun!!!

Thank you again for your patience, the script is perfect.


10-08-2003, 08:10 AM
my editor has replaced

geee... you should deffinitely disable the option Autocorrect of your editor. Nomatter the editor (Dreamweaver or FrontPage or whichever), they are not (and they will not be) smart enough to autocorrect the best way.... My oppinion...

10-08-2003, 11:45 AM
Thank you for the advise, I'll try to do that, although it is an interesting feature, in case I make errors. Also it checks for validation, so that everything is according to the norms.
I am in the learning process right now, I do not feel confident enough to remove auto-correct, in general. But, in this case of course, I will disregard my aditor as soon as I understand the script well enough, so that I am able to use it according to the situation.

Mr J
10-08-2003, 10:56 PM
To change the height of the image look for the following lines

<td rowspan="2" width="300px" class="leftcell">

<img id="mypic" src="" width=300 height=300 style="display:none">

Change the width of both these lines, the height can be changed in the above line

10-08-2003, 11:08 PM
Thank you so much Mr. J
I am all set now to tackle the task in front of me, the whole script is perfect, responds to all my present needs.
I appreciate your patience, I am still in the learning mode... I hope that one day I become good enough to be able to help other people, juct like you.
Have a very pleasant day