...

View Full Version : Need help with thumbnail generator. PLEASE HELP!



shivboy
04-14-2003, 12:00 AM
hi,

i made this totally DOM-based thumbnail generating code. it works absolutely fine but at one place. Kindly visit this link:

http://www14.brinkster.com/spark2003/exp01.html

The problem here is that i do not want the vertical scroll bar to appear. In other words, I want all the images to appear horizontally only. But it is still not appearing that way, i do not understand why. Please help me with this. Any help is appreciated. Here's the code for the same:



<html>
<head>
<title></title>
<style>
.nStyle {top: 50px; left: 20px; height: 90; width: 300px; z-index: 3; position: absolute; overflow: scroll; clip: rect(0,300,90,0);}
.dStyle {z-index: 4; top: 1px; left: 1px; background-color: red; position: absolute; visibility: visible;}
.imStyle{margin-top: 5px; margin-left:10px;}
</style>
<script language="JavaScript">
<!--
var tHeight = 60;
var tWidth = 80;
var tBorder = 0;
var px = "px";

function makeThumb()
{
var img = new Array()
img[0] = "1.jpg"
img[1] = "2.jpg"
img[2] = "3.jpg"
img[3] = "4.jpg"
img[4] = "5.jpg"

var x = document.getElementById("oDiv");
x.style.visibility = "visible";
var w = 0;
x.innerHTML = '';
for(i=0;i<img.length;i++)
{
w += tWidth;
x.style.width = w + px;
x.innerHTML += '<a href="#"><img id="im'+i+'" class ="imStyle" src="'+img[i]+'" height="'+tHeight+'px" width="'+tWidth+'px" border="'+tBorder+'"></a>';
}
}
//--></script>
</head>
<body onload="makeThumb()">
<div id="sDiv" class="nStyle">
<div id="oDiv" class="dStyle">&nbsp;</div>
</div>
</body>
</html>



Please help me with this.

thanx,
shivboy

SPD
04-14-2003, 07:00 PM
Try to copy the below code for the particular case you are showing in your post.

In general, however, what I did was to add another image that does not exist (see bold in code below) and to cut the extra space in the table and to enlarge (see bold in code below).

However, this is a "solution" until you find (or other user) the right solution. This is not a permanent solution... as you see...

Let me know what you think.

:thumbsup:



<html>
<head>
<title></title>
<style>
.nStyle {top: 50px; left: 20px; height: 90; width: 600px; z-index: 3; position: absolute; overflow: scroll; clip: rect(0,460,70,0);}
.dStyle {z-index: 4; top: 1px; left: 1px; background-color: red; position: absolute; visibility: visible;}
.imStyle{margin-top: 5px; margin-left:10px;}
</style>
<script language="JavaScript">
<!--
var tHeight = 60;
var tWidth = 80;
var tBorder = 0;
var px = "px";

function makeThumb()
{
var img = new Array()
img[0] = "1.jpg"
img[1] = "2.jpg"
img[2] = "3.jpg"
img[3] = "4.jpg"
img[4] = "5.jpg"
img[5] = "6.jpg"
var x = document.getElementById("oDiv");
x.style.visibility = "visible";
var w = 0;
x.innerHTML = '';
for(i=0;i<img.length;i++)
{
w += tWidth;
x.style.width = w + px;
x.innerHTML += '<a href="#"><img id="im'+i+'" class ="imStyle" src="'+img[i]+'" height="'+tHeight+'px" width="'+tWidth+'px" border="'+tBorder+'"></a>';
}
}
//--></script>
</head>
<body onload="makeThumb()">
<div id="sDiv" class="nStyle">
<div id="oDiv" class="dStyle">&nbsp;</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum