Question

I have been scratching my head for a while on this one. I dont really play around with HTML formatting that often.

I have a smoothDivScroll using JQuery (http://maaki.com/thomas/SmoothDivScroll/) to scroll through dynamically generated images.

What I want it for, is to have multiple small images lined up right next to each other, and each image has a section of writting underneath. about 25 images, 140px width each in a 7560px span.

I acheived this great by putting a table inside the div, and each image inside a<td>.This works

problem i have, is that i need the slider to start from the furthest RIGHT image, and slide automatically left. This is acheived by (if you look at the link above) – startAtElementId:

But if I am using a table inside the div, it is taking the TABLE as a element and not the TD… so it doesnt work. I know this because if I change every image to be inside tables (i.e 25 tables), it works… but obviously then the formatting is not how I want.

Can anyone think of a way I can use this slider (modifications to the js code or not), with 25 images that NEED to be right next to each other, no gap.

I guess this is more of a formatting question, than about the slider. Because I only know ONE way of doing what I want, and thats to have below which will not alow me to set startAtElementId.

    <div class="scrollableArea">
        <table width="7560px" class="index-body">
        <tr> 
        <td width="140px"><center><a onclick="__doPostBack('getEarlierDate');" ><img src="../images/olderGraphs.gif" width="140" height="60"></a>Click for more</center></td>
        <td width="300px"><center><a onclick="__doPostBack('chartClicked25');" ><cewolf:img chartid="verticalbar25" renderer="cewolf" width="300" height="60"/></a><c:out value="${date25}"/></center></td>
        <td width="300px"><center><a onclick="__doPostBack('chartClicked24');" ><cewolf:img chartid="verticalbar24" renderer="cewolf" width="300" height="60"/></a><c:out value="${date24}"/></center></td>

and so on

Answer 1

I would remove the table and replace it with a series of div’s instead. Inside each div you put the image and a paragraph tag, something like this:

<div><img src="images/myImage.jpg"><p>Image text goes here</p></div>
<div><img src="images/myImage.jpg"><p>Image text goes here</p></div>
<div id="startAtMe"><img src="images/myImage.jpg"><p>Image text goes here</p></div>

Using some CSS you will be able to make these div’s line up and if you remove all padding and margins you can position the div’s with the images side by side without any gaps.