Image thumbnail viewer

**designkitt** · 05-03-2006, 01:51 AM

I am having a problem with alignment when viewing on a pc but it views perfect on my mac in several browers. For some reason the first column does not accomodate two photos per row as the third column. Middle column is for viewing and this is not centered either. I set the table up with three cells each having the same number of columns. Here is the url:

URL removed as requested

If anyone has suggestions it would be greatly appreciated!

**djr33** · 05-03-2006, 06:16 AM

DO NOT CROSS POST. I responded in your OTHER thread, but am moving it here as this is the right forum.
We WILL see your thread... no need to post twice.

Also, you should post a link to the script (on DD) that you are using so we can help you.

I'm on a mac at the moment, and looks fine to me. not helping, though, I guess.

What browsers? (mac and pc)

**designkitt** · 05-03-2006, 11:02 AM

Sorry about posting in two places.
I'm new here and did not notice that there were catagories before I submitted the post.

As I had mentioned, it looks fine on my mac in several browers. The problem is on a pc, internet explorer, not sure what version.

Here is the link to the script I used:
http://dynamicdrive.com/dynamicindex4/thumbnail2.htm

**jscheuer1** · 05-03-2006, 05:33 PM

Code:

<html>
<head>

<style type="text/css">
A {color: #ffffff; text-decoration: none; }
A:hover {color: #004bc6; text-decoration: none; }
A.headerlink:hover {color: #91001b; text-decoration: none; }
A.headerlink {color: #111111; text-decoration: none; }
p  {font: 8pt/11pt "Helvetica", "arial"
    font-weight:normal }
}
.style2 {
 font-size: 9px; 
 font-family: verdana, sans-serif;
	color: #fcfbdd;
}
.style3 {
 font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #999999;
}
.style6 {	font-size: xx-small;
	color: #C1C7C4;
}
.style4 {color: #FFFFFF}
.style12 {font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- &#169; 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
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["images/image1lg.jpg", ""]
dynimages[1]=["images/image2lg.jpg", ""]
dynimages[2]=["images/image3lg.jpg", ""]
dynimages[0]=["images/image1lg.jpg", ""]
dynimages[1]=["images/image2lg.jpg", ""]
dynimages[2]=["images/image3lg.jpg", ""]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

</head>

<body bgcolor="#004bc6">
<font size="1" color="#004bc6">  We specializing in wedding photography, senior portraits, corporate photography, Barmitzvahs, Batmitvahs, and aerial photography servicing Rochester NY and the surrouding areas of Monroe County.</font><br>
<img src="images/trans.gif" width="80" height="10">
<br>




<table width="780" border="0" cellpadding="10" cellspacing="0" bgcolor="black" align="center" height="600">

<tr>
<td colspan="3" background color="black" align="center" valign="top">
<font face="verdana" size="2" color="#004bc6">
<img src="images/trans.gif" width="40" height="2">

home
<img src="images/trans.gif" width="40" height="2">
about us
<img src="images/trans.gif" width="30" height="2">

<img src="images/parkavesportslogo.gif" align="center">

<img src="images/trans.gif" width="20" height="2">
pricing
<img src="images/trans.gif" width="40" height="2">
contact
<img src="images/trans.gif" width="40" height="2">


</td>
</tr>

<tr>
<td align="center" width="33.33&#37;" valign="top" style="padding-left:30px;">

<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)" onclick="return false;"><img src="images/image3.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)" onclick="return false;"><img src="images/image3.jpg" border="0"></a>

</td>



<td id="dynloadarea" style="width:33.33%;height:33.33%" align="center" valign="top">
<img src="images/soccer girl.jpg" border="0">
</td>

<td width="33.33%" align="center" valign="top" style="padding-right:30px;">


<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)" onclick="return false;"><img src="images/image3.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)" onclick="return false;"><img src="images/image3.jpg" border="0"></a>

</td>
</tr>


<tr>
<td colspan="3" align="center" valign="top">
<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)" onclick="return false;"><img src="images/image3.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)" onclick="return false;"><img src="images/image3.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onclick="return false;"><img src="images/image1.jpg" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)" onclick="return false;"><img src="images/image2.jpg" border="0"></a>

</td>
</tr>

<tr>
<td colspan="3" align="center" valign="top">



<br>
<font face="verdana" size="3"><b>
<a href="#" target="blank"><u>CLIENTS ONLY</FONT>
<font face="verdana" size="2" color="#ffffff"><i>...Find Your Event Here</a></u></i></font>
<p>
<font face="arial" size="2" color="#ffffff">
office: (585) 292.9890 &nbsp;| &nbsp;fax: (585) 292.6988</font>

<br>


<img src="images/sportsLogoparkavesm.gif" width="75" height="100" valign="middle">


<font face="verdana" size="1" color="#ffffff">
: (585) 260.5764
</font>



<img src="images/trans.gif" height="1" width="200">

<font face="verdana" size="1" color="#ffffff">
Contact Info
</font>

<img src="images/szlogo sm.gif" height="100" valign="top">

<p>


<font face="arial" size="1" color="#004bc6" valign="top">

Copyright&#169;2006
</font>

</td>
</tr>




</table>

</body>
</html>

**designkitt** · 05-03-2006, 09:25 PM

John,
THANK YOU SO MUCH!!

It works great!

**designkitt** · 05-10-2006, 09:15 PM

Now that this is running great, I would like to adjust the size of the image that appears after rolling over the thumbnails. If possible, can the image be larger to fill the space more? I've tried changing the percentage associated with the cell, but that did not work. I also changed the size of the larger images, but that didn't seem to work either.

Any suggestions would be greatly appreciated.

**jscheuer1** · 05-10-2006, 09:52 PM

I'm not exactly sure what you are asking. The best way to get the images larger is to use larger images. Relying upon the browser to resize the images can be done but, almost always results in distorted images and, in a few browsers perhaps, more serious problems. Once you have assembled your larger images and configured the script to use them, you may, depending upon how much larger they are, have to adjust the layout to accommodate them.

Generally though, due to the limited bandwidth available to dialup users and the fact that even high speed connections sometimes suffer from limited bandwidth availability, images used on the web should be as small as possible to get across the point. The byte size of the images is more crucial than their dimensions but, the one usually follows the other. To this end (small byte size for images) it is best to optimize all your web based images.

**designkitt** · 05-11-2006, 01:11 AM

John,
For some reason when I was testing this by draging into a browser window it didnt seem to work. Now that the files are actually uploaded it works fine. Thank you for the advice concerning file size. There still relatively small ...223K.

**djr33** · 05-11-2006, 01:18 AM

Sorry about soundling like I was yelling at you. Bold and no please. "Please don't double post." No problem if you just missed it. Some people post twice to get more responses, not that it works... just annoys people.
Anyway, good luck.

Thread: Image thumbnail viewer

Thread Tools

Search Thread

Image thumbnail viewer

Bookmarks

Bookmarks

Posting Permissions