Problems with jqZoom

JavaScript
1

Hi

I recently discovered the very wonderful jqZoom for zooming images on rollover. It works, but there’s a bit of a problem. I have my thumbnails appearing as an unordered list, which I retrieve through vbScript using the FileSystemObject, looping around until they are all there.

When I use jqZoom, however, they appear in a vertical line, and since it seems the zoom window is always placed relative to the thumbnail, the lower ones disappear off the screen. You can see the result here:
http://ionrhysteale.com/gallery.asp.

Does anyone know how to fix the position of the zoom window higher up?

Thanks.

2

If you want the thumbnails to appear side by side you will need to float the li elements. At the moment the position of the li element determines the position of the zoom window. You can set position relative on the parent div instead of li elements to get the position of the zoom window determined by the parent div instead.

3

Thanks for the tip. I can see now how I have anchored the zoom window to the li elements. I wonder if you’d be kind enough to post your proposed solution, as, although I’m quite conversant with CSS, I can’t quite see how to change this bit:

#thumbsleft, #thumbsright {
position: absolute;
overflow: auto;
margins: 10 10 10 10;
top: 155px;
height: 450px;
width: 48%;
}
#thumbsleft li, #thumbsright li {
display: inline;
}
#thumbsleft {
left: 10px;
}
#thumbsright {
right: 20px;
}

And this, which places the thumbnails:

<% Set fso = CreateObject("Scripting.FileSystemObject") %>
<% Set folder = fso.GetFolder(pServerFolder) %>
<% Set files = folder.Files %>
<ul>
<% For each folderIdx In files %>
	<% image = "images/" & pFolder & "/" & folderIdx.Name %>
	<% tn = "images/" & pFolder & "/thumbnails/" & folderIdx.Name %>
	<% title = left(folderIdx.Name,len(folderIdx.Name)-4) %>
	<li><a href="<% =image %>" class="jqzoom" style="" title="<% =title %>"><img src="<% =tn %>" border="0"/> </a></li>

<% Next %>
</ul>

Thanks for your help.