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.