Image Thumbnail Viewer II Problems

[redpoint]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: I cannot get this to work. I'm very new to this stuff so it's probably an easy fix...

http://jonesandfarthing.com/mowingpics.html

I tried to copy and paste the table from the DD site and have been messing around with this for a while. The .js file is in the root directory.

Code:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td width="20%" valign="top">
<a title="Love and embrace" rev="loadarea::http://www.cssdrive.com" rel="enlargeimage::mouseover" href="/images/photo1.jpg">
<img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/photo.JPG"/></a>
<br/>
<a rev="loadarea::http://www.codingforums.com" rel="enlargeimage::mouseover" href="/images/photo2.jpg">
<img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/photo2.JPG"/></a>
<br/>
<a rev="loadarea::http://www.javascriptkit.com" rel="enlargeimage::mouseover" href="../dynamicindex14/photo3.jpg">
<img height="50" border="0" width="50" style="margin-bottom: 5px;" src="thumb3.jpg"/>
</a>
</td>
<td width="80">
<div id="loadarea" style="width: 500px; height: 250px;">
<a href="http://www.javascriptkit.com">
<img style="border-width: 0pt;" src="images/bigphoto.JPG"/></a></div>
</td>
</tr>
</tbody>
</table>


Thank you for your help!

-Matt

[jscheuer1]

Your thumbnailviewer2.js file is corrupt. The last line of code in it is incomplete, there could be other problems with it. Get a fresh copy and upload it again.

Your larger image files are missing, misnamed, not where the code says that they are, or have a mismatch in the upper/lower case of their path and/or filenames.

There could also be other problems.

[redpoint]

Thank you very much for your feedback. It was a number of problems but the most important was the .js code.

I have fixed it for the most part but I want everything to line up better.

Check the site at:


Pictures
(http://jonesandfarthing.com/pictures.html)

I would like for all of the pictures to line up at the top...I just can't seem to control the mouse over pictures.

Any suggestions would be greatly appreciated. Thanks!

-Matt

[jscheuer1]

Add this to the end of your stylesheet:


td p {
margin: 0;
}
td p img {
display: block;
padding-bottom: 20px;
}

[redpoint]

Thank you!!!!! Problem solved...Just curious, what do this code do? I had to put it in my main template for the whole site. Will it mess something up in the future? Thanks again for your help!

-Matt

[jscheuer1]

It could mess something else up, as it selects all p elements that are in td elements, and all images that are in those. To make it more specific, use a class:


.galthumbs p {
margin: 0;
}
.galthumbs p img {
display: block;
padding-bottom: 20px;
}

Then add that class to your td elements containing the thumbs:


<td class="galthumbs" width="115" valign="top">
<p align="left"><a title="Rental Cabin" rev="loadarea::cabinpond2.jpg" rel="enlargeimage::mouseover" href="../images/cabinpond2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/cabinpond1.jpg"/></a></p>

<p align="left"><a title="Curved Mow" rev="loadarea::curvemowd2.jpg" rel="enlargeimage::mouseover" href="../images/curvemow2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/curvemow1.jpg"/></a></p>

<p align="left"><a title="Nice View" rev="loadarea::fencetree2.jpg" rel="enlargeimage::mouseover" href="../images/fencetree2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/fencetree1.jpg"/></a></p>

<p align="left"><a title="Matt Mowing" rev="loadarea::mattmow2.jpg" rel="enlargeimage::mouseover" href="../images/mattmow2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/mattmow1.jpg"/></a></p>


</td>

<td class="galthumbs" width="115" valign="top">
<p align="left"><a title="Shae Mowing" rev="loadarea::shaemow2.jpg" rel="enlargeimage::mouseover" href="../images/shaemow2.jpg"><img src="images/shaemow1.jpg" alt="1" width="100" height="75" border="0" style="margin-bottom: 5px;"/></a></p>

<p align="left"><a title="Straight Lines" rev="loadarea::straightyard2.jpg" rel="enlargeimage::mouseover" href="../images/straightyard2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/straightyard1.jpg"/></a></p>

<p align="left"><a title="Beautiful Long Yard" rev="loadarea::treeyard2.jpg" rel="enlargeimage::mouseover" href="../images/treeyard2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/treeyard1.jpg"/></a></p>

<p align="left"><a title="Weed Eating Job" rev="loadarea::weedeat2.jpg" rel="enlargeimage::mouseover" href="../images/weedeat2.jpg"><img height="75" border="0" width="100" style="margin-bottom: 5px;" src="images/weedeat1.jpg"/></a></p>

</td>

As to what it does, it flattens all the p elements that you are using (p margin:0), removes all added height from images that some browsers reserve for them because they are native inline elements (img display:block), and adds a uniform padding to the images so that they space out to fit the space created by the larger image (img padding-bottom:20px).