CMotion and Scrolling AND now reflections

[woweriux]

Im using the script for Cmotion found at http://www.dynamicdrive.com/dynamici...iongallery.htm

But I ran into a problem, no matter what i tried it just wont scroll from side to side. I'v placed all the filles in the right directories and entered the code as it said in the instructions. Can someone help me out? tell me what im doing wrong?

The site that im trying to use it for: mantas.moved.in

[jscheuer1]

In your main.css file, you have this definition:

a{display:block;color: #F7F8FA;padding:10px}

Either get rid of it (your page doesn't have any <a href= link tags on it except for the gallery) or, follow it with this gallery specific definition:

a{display:block;color: #F7F8FA;padding:10px}
#trueContainer a {display:inline;padding:0;}

[woweriux]

Thanks mate, that worked perfectly...never thought that css file might've affected CMotion

[woweriux]

OK now i have another problem...didn't really know who to turn to but figured something had to be changed in CMotion in order to add reflections to the images. (http://cow.neondragon.net/stuff/reflection/)
It seems if include the reflection class then cmotion does not line up the images correctly.

[jscheuer1]

Reflections uses the DOM to add elements to the page's markup. It uses divisions. A division is a block level element that introduces a line break into the flow of a page. The CMotion gallery, as written, cannot contain line breaks. If each image in the Cmotion gallery were to be in its own table cell in a table with a single row, it might work out. Try substituting such a table for the nobr element and give this table the nobr's id. Extra height will need to be added to the motioncontainer division, if you haven't already done so, to acommodate the added height of the reflections.

[jscheuer1]

I just tried this and it worked, one other thing is that the nowrap value and white-space property need to removed from the inline style of the 'motiongallery' division for FF:

<div id="motioncontainer" style="position:relative;width:700px;height:404px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;">

<table id="trueContainer" ><tr>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td>
<td><a href="tarheel.jpg" rel="lightbox"><img src="tarheel.jpg" class="reflect" border=1></a></td></tr></table>

</div>
</div>