I have the following code for my site right now. I know it's ancient and pretty simple, but it's for my father's business and he wants it to be easily navigated and this is the one he has liked the best. I would like to add to this, however, and add the following things: A second and/or third column of thumbnails if needed If possible, I'd love to have a caption or description pop up in tandom with each picture. For example, as you click on the first bench, below the large picture, and description of the bench appears. As I click on the next thumbnail, that description for the new picture appears where the old one was. Here is the link to an example page (not allowed to post active links yet, so its spaced out) stonezoneco.com /trialpics.html Here is the code as it appears now: <body> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="width: 400px; vertical-align: top;"> <img src="bottbench.jpg" width="630" height="530" alt="Large Photo" style="border: 1px solid #000000;" name="swap"> </td> <td style="width: 6px;"></td> <td style="width: 94px; vertical-align: top;"> <img src="bottbench.jpg" width="102" height="79" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onclick="document.swap.src='bottbench.jpg';"><br> <img src="radbench.jpg" width="102" height="79" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onclick="document.swap.src='radbench.jpg';"><br> <img src="bhillbench.jpg" width="102" height="79" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onclick="document.swap.src='bhillbench.jpg';"> </td> </tr> </table> </body> </html> Thanks for any and all suggestions
Hey, You can add another column of thumbnail images after the initial ones. In between the </td> and </tr> just insert another group of <td style="width: 94px; vertical-align: top;"> <img src="bottbench.jpg" width="102" height="79" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onclick="document.swap.src='bottbench.jpg';"><br> <img src="radbench.jpg" width="102" height="79" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onclick="document.swap.src='radbench.jpg';"><br> <img src="bhillbench.jpg" width="102" height="79" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onclick="document.swap.src='bhillbench.jpg';"> </td> Code (markup): With regards to the caption I'll have a look if i have a gallery similar that I used for one of my sites.
sounds great. Thank you for your help. I'm trying to create a couple of different galleries that the site owner can choose from. So far they seem to like the simple tables moreso than the fancier java/css stuff, but I would like to be able to include the captions in this table version.
Pretty much yeah, You can download the script I think and then tweak it to your needs. Stu has a lot more on his site too that may give you some inspiration for other galleries, menus etc. If you get stuck just PM me
thought I PM'ed you, but can't find history of it in my profile, so I don't know what's up with that. I almost got the new gallery (stu nichols version) up and running, but I am missing a portion somewhere. Thumbs show up, but aren't clickable...here's the link, (spaced because I'm not allowed to post links) and the code to it: stonezoneco.com / trialpics3.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" media="all" type="text/css" href="photo_click.css" /> <script src="click_gallery.js" type="text/javascript"></script> </head> <body> <div id="content"> <h2>Benches</h2> <h3></h3> <div id="gallery"> <ul> <li><i><img src="bottbench.jpg" title="" alt="" /></i><span><b>Bott Bench</b><br />This is a bott bench</span></li> <li><i><img src="radbench.jpg" title="" alt="" /></i><span><b>rad bench</b><br /> This is a rad bench</span></li> <li><i><img src="bluestonesps.jpg" title="" alt="" /></i><span><b>Blue Stone Bench</b><br />This is a blue stone bench.</span></li> <li><i><img src="bhillbench.jpg" title="" alt="" /></i><span><b>BH Bench</b><br />This is a BH Bench.</span></li> <li><i><img src="inlsradiusbench1.jpg" title="" alt="" /></i><span><b>Limestone Radius Bench</b><br />View One.</span></li> <li><i><img src="inlsradiusbench2.jpg" title="" alt="" /></i><span><b>Limestone Radius Bench</b><br />View Two.</span></li> <li><i><img src="inlsbench.jpg" title="" alt="" /></i><span><b>Limestone Bench</b><br />This is a limestone bench.</span></li> <li class="click"><i><img class="default" src="../images/trees/t19.jpg" title="" alt="" /></i><span><b>Default text.</b><br />Iudico petentium ullamcorper mei id. Sed an illum sonet quando, ei inciderint signiferumque pri, te duo omnis malis aeterno.</span></li> </ul> </div> </body> </html>