Hi guys. I know that the web has this magical thing called JavaScript which makes making some types of web pages much easier. I was wondering if you could help me by providing a code snippet or something for this situation:

I am making a site for my art teacher that displays the work of her students. I already have some of it down, except it needs a lot of work. The basic setup is Home > pick a course > pick an assignment > view images. On each of the assignment pages, I put thumbnails and a big frame to display the selected image. An example:

Art 1 - Pencil Portrait
Please forgive me for the extremely long load times; this is what I meant by "needs a lot of work".

Anyway, you get the basic setup. User clicks on thumbnail, and an HTML page with the image in it pops up in iFrame. The image that pops up there can also be clicked on to show the image in its actual size.

The problem with that is that I have to make an HTML page for each image in which I put the resized image and make it a link to see the actual size one.

I have hundreds of images. (and more in future semesters) I do not want to make a custom HTML page for each one. I was also thinking of putting the thumbnails on each assignment page in a frame, so that I can expand easily in future semesters. This would make a total of 2 iFrames on each page. One for the thumbnails, and one for the image currently being viewed.

Is it possible to have some script on each assignment page that makes it so that when you click on one of the thumbnails, it loads the image in the iFrame with the iFrame's height? I know there's a way, I'm just not experienced enough to pull it off without help. There are also a few things to note:

  • I do not want the image to open in a new window
  • I do not have access to the server (as in I can't implement any server-side stuff)
  • The captions that you see below the image [that show who the work was done by] are unnecessary; I don't need them anymore.
  • I am still willing to make the thumbnails on each page, just not the customized HTML pages that they link to.
  • I would like the image in the iFrame to link to the actual size image.

If you could provide me with a solution that works I'd appreciate it GREATLY.

can you use php at all? i can make a script for this in a few hours in php but i am still trying to think of a way to do this in javascript.

It just so happens that I am switching host providers. I will now be using the amazing x10hosting.com with the no ads, free 10GB/month bandwidth with cPanel and all the support for php, mySQL and that other stuff. so yes, the server ill be using does support php but i hope i dont have to rebuild a huge chunk of the site because of it.

you shouldn't have to. i sent you a private message with a url to a test script i made. have a look. i think it would work for your site quite nicely.