PDA

View Full Version : Thumbnail Viewer + Image Border Prob



Al Fresco
07-13-2007, 04:46 AM
1) Script Title: Thumbnail Viewer 2

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

3) Describe problem: Hi, I'm having trouble getting the borders to work around images within a "loadarea". The padding seems to work fine but not the simple border outside the padding 'within' the loadarea. Am I crazy or just lost?
Any help would be greatly appreciated here. Thanks.
The Code:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />

<style type="text/css">
#loadarea {
font-family:sans-serif;
}
#loadarea img {
border:1px solid #666;
padding:1em;
}
</style>

<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"> <img border="0" src="images/name.jpg" alt=""/></div></div>

<div id="contentwrapper">
<div id="loadarea">
<div class="innertube"> <b> <em></em></b></div>
</div>
</div>

<div id="leftcolumn">
<ul>
<li><a href="images/V2.jpg" title="mmmm" rel="enlargeimage::click" rev="loadarea"> <img src="thumbnails/V2.jpg" alt="" border="0" width="25" height="25" style="margin:8px"/></a>
<a href="images/21.jpg" title="uuuuu" rel="enlargeimage::click" rev="loadarea"> <img src="thumbnails/21.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>
<a href="images/22.jpg" title="hhhh" rel="enlargeimage::click" rev="loadarea"> <img src="thumbnails/22.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a></li>
<li><a href="images/13.jpg" title="iiiiiii" rel="enlargeimage::click" rev="loadarea" > <img src="thumbnails/13.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>
<a href="images/21.jpg" title="gggggg" rel="enlargeimage::click" rev="loadarea"> <img src="thumbnails/21.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>
<a href="images/22.jpg" title="pppppp" rel="enlargeimage::click" rev="loadarea"> <img src="thumbnails/22.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a></li>
</ul>
<br>
<ul>
<li id="active"><a href="page1.html">GALLERY 1</a></li>
<li><a href="page2.html">GALLERY 2</a></li>
<li><a href="page3.html">GALLERY 3</a></li>
</ul>

<div class="innertube"><b> <em></em></b></div>
</div>

<div id="footer">
</div>
</div>
</body>
</html>

jscheuer1
07-13-2007, 09:21 AM
Find this line in the script:


var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image

Get rid of the red part.

Al Fresco
07-13-2007, 03:59 PM
Works perfectly as usual.
Thanks a million John.
Craig