I forgot HTML, I forgot CSS
April 22, 2007 9:29 PM Subscribe
In making a gallery page for a website, what is the easiest way to have a scrolling area for clickable thumbnails that bring up a larger image, as well as some information about the image, in a table cell above? Specifics, examples, many self links, and my (mangled) code so far available inside.
For starters: I want to look like I have it here, but -- you know -- working and all. The three thumbnails at the bottom should be just three of many in a horizontally scrollable area about as tall as they are. Click on any one of these will change the larger image as well as the title of the image and perhaps some other information. The "next" and "previous" links up top would, as you might guess, take you to the next and previous images in the row of thumbnails.
Sounds fairly easy, at least it should be. I just haven't designed a website in four years and I never knew more than pidgin HTML and CSS to begin with. I don't want to use flash, even though I know it might be an easier way to go about it. I have thought about frames, but have yet to try it because I was hoping to just do it on one page if possible.
The rest of my malformed examples have the table borders set to 1, which should make it just a hair easier to follow along at home.
Here is the stylesheet, which has an impact on the spacing of many of the table cells on the site and might make some stuff make a little bit of sense.
To summarize the site structure:
The top row is two cells with colspan each set at 2.
The second row is the largest with two cells, a narrow cell for navigation and a big wide cell for the main content (with a colspan of 3).
The third row is one empty cell (just to be a spacer under the navigation cell) and on most pages has three cells, each with one thumbnail image. For this particular page I want it to be a long row of thumbnails.
In example 2 I have created a new row at the bottom and given it a table with the property of "overflow" set to "scroll". The site didn't like that.
Example 3 has a new table nested into a new row. The result is still very weird.
Example four starts to work, but still no scrolling. Example five is similar, just with a ton more thumbnails. Both of these have a table nestled in one of the cells of the third row. This is the closest to what I want so far, but it still doesn't scroll
Example six has just two cells in the bottom row, and many thumbnails simply dumped into the rightmost one.
That's where I am right now. I don't even know if this is something simple that I am stupidly missing, or something complex that I shouldn't bother with.
If you want to play with the code and see what it looks like at home, the site URL is http://www.welldisposedcameras.com
Images are in the /images folder and thumbnails are in the /images/th/ folder the CSS is just /stylesheet.css (as linked above).
Aside from all this, I haven't even come up with a good idea for linking the thumbnails to the image. Am I going to need to create a separate page for every image and link to it with every thumbnail?
In case any one wonders, this is this and the images are from one of our members. I want to finish the site and get more cameras back from users before I post this to either Projects or MeTa.
Sorry if this is obvious or stupid. Thanks for any help!
For starters: I want to look like I have it here, but -- you know -- working and all. The three thumbnails at the bottom should be just three of many in a horizontally scrollable area about as tall as they are. Click on any one of these will change the larger image as well as the title of the image and perhaps some other information. The "next" and "previous" links up top would, as you might guess, take you to the next and previous images in the row of thumbnails.
Sounds fairly easy, at least it should be. I just haven't designed a website in four years and I never knew more than pidgin HTML and CSS to begin with. I don't want to use flash, even though I know it might be an easier way to go about it. I have thought about frames, but have yet to try it because I was hoping to just do it on one page if possible.
The rest of my malformed examples have the table borders set to 1, which should make it just a hair easier to follow along at home.
Here is the stylesheet, which has an impact on the spacing of many of the table cells on the site and might make some stuff make a little bit of sense.
To summarize the site structure:
The top row is two cells with colspan each set at 2.
The second row is the largest with two cells, a narrow cell for navigation and a big wide cell for the main content (with a colspan of 3).
The third row is one empty cell (just to be a spacer under the navigation cell) and on most pages has three cells, each with one thumbnail image. For this particular page I want it to be a long row of thumbnails.
In example 2 I have created a new row at the bottom and given it a table with the property of "overflow" set to "scroll". The site didn't like that.
Example 3 has a new table nested into a new row. The result is still very weird.
Example four starts to work, but still no scrolling. Example five is similar, just with a ton more thumbnails. Both of these have a table nestled in one of the cells of the third row. This is the closest to what I want so far, but it still doesn't scroll
Example six has just two cells in the bottom row, and many thumbnails simply dumped into the rightmost one.
That's where I am right now. I don't even know if this is something simple that I am stupidly missing, or something complex that I shouldn't bother with.
If you want to play with the code and see what it looks like at home, the site URL is http://www.welldisposedcameras.com
Images are in the /images folder and thumbnails are in the /images/th/ folder the CSS is just /stylesheet.css (as linked above).
Aside from all this, I haven't even come up with a good idea for linking the thumbnails to the image. Am I going to need to create a separate page for every image and link to it with every thumbnail?
In case any one wonders, this is this and the images are from one of our members. I want to finish the site and get more cameras back from users before I post this to either Projects or MeTa.
Sorry if this is obvious or stupid. Thanks for any help!
Best answer: Aside from all this, I haven't even come up with a good idea for linking the thumbnails to the image. Am I going to need to create a separate page for every image and link to it with every thumbnail?
Gah! no. You can use javascript to swap the images. Tag the main image like so:
img name="main_image" src="Images/image1.jpg"
And tag the thumbnails like so:
img src="Images/Thumbs/Image2.jpg" name ="rollover1" border="0" onmouseover='main_image.src="Images/Image2.jpg"'
onmouseout='main_image.src="Images/image1.jpg"'
posted by Otis at 6:21 AM on April 23, 2007
Gah! no. You can use javascript to swap the images. Tag the main image like so:
img name="main_image" src="Images/image1.jpg"
And tag the thumbnails like so:
img src="Images/Thumbs/Image2.jpg" name ="rollover1" border="0" onmouseover='main_image.src="Images/Image2.jpg"'
onmouseout='main_image.src="Images/image1.jpg"'
posted by Otis at 6:21 AM on April 23, 2007
Would you consider letting photo album software create the pages for you? I use the free, Jalbum which is highly customizable, and runs on multi-platforms.
posted by jaimev at 7:55 AM on April 23, 2007
posted by jaimev at 7:55 AM on April 23, 2007
Response by poster: Otis:
This javascript, it vibrates?
I've fixed most of my problems now, and I used your javascript suggestion (which, to me, is like some kind of evil sorcery that I am all to willing to dabble in). You can see an example of it working here, as well as with the scrolling finally figured out.
But this magic still eludes me in four ways.
How can I:
1. use the same mouse over action to turn the cursor into the "click here" hand everyone understands
2. change the text beneath the image to the image title
3. make the main image a link to a larger version of itself (basically, a dynamic link)
4. change the navigation links at the top so they are always pointing to the next and previous images?
Please don't feel like you need to answer these questions point by point. I would be just as happy with a pointer to a good basic javascript site or book.
Thanks for your help!
posted by ztdavis at 11:28 AM on April 23, 2007
This javascript, it vibrates?
I've fixed most of my problems now, and I used your javascript suggestion (which, to me, is like some kind of evil sorcery that I am all to willing to dabble in). You can see an example of it working here, as well as with the scrolling finally figured out.
But this magic still eludes me in four ways.
How can I:
1. use the same mouse over action to turn the cursor into the "click here" hand everyone understands
2. change the text beneath the image to the image title
3. make the main image a link to a larger version of itself (basically, a dynamic link)
4. change the navigation links at the top so they are always pointing to the next and previous images?
Please don't feel like you need to answer these questions point by point. I would be just as happy with a pointer to a good basic javascript site or book.
Thanks for your help!
posted by ztdavis at 11:28 AM on April 23, 2007
Glad it worked. Welcome to the dark side. Check out some of the image gallery scripts at Dynamic Drive. There are some more full-featured tricks there that might be adapted to accomplish what you want.
posted by Otis at 12:10 PM on April 23, 2007
posted by Otis at 12:10 PM on April 23, 2007
This thread is closed to new comments.
If it's just a small selection of images then you can do a css gallery (you probably already looked online but just in case one example).
But for any project more than 10 images I would recommend having a look at this php gallery - which although may seem like a big step will probably save you more time in the long run by having the functionality you need already - and then you can just play with the default template to get it to look the way you want.
posted by gomichild at 1:06 AM on April 23, 2007