View Full Version : Easyish Cmotion image gallery query

10-03-2005, 09:15 AM
Ok I've got this script working great - can anyone tell me how I can increase the width of the visible scroll effect? Currently it only takes up about 300 pixels - I'd like it to take up 800 across the screen?


10-03-2005, 12:08 PM
Hi alphabeta,

I believe your talking about the CMotion Image Gallery script. Just change the red value to the desired width.

<div id="motioncontainer" style="position:relative;width:400px;height:100px;overflow:hidden;">

Hope it works.

10-03-2005, 02:58 PM
Ah! obvious now - I was trying to do it too early in the morning!

Just before I start on a gung ho conversion plan - is it possible to force an image to be certain dimensions? I have hundreds of images around 1024 x 1024 pixels - if I could force them to display in the list at 100 x 100, that'd save a lot of time - I don't need to worry about bandwidth etc as it's a menu for a cd...

Is this possible or do I need to start converting?!

10-04-2005, 04:15 AM
hi again,

yeah its possible, just change the dimensions in the container line:


<nobr id="trueContainer"><a href="#" onClick="return modifyimage('displayarea', 0)"><img

src="image/hugepic.gif" height="100" width="100" border=1></a> <a href="#" onClick="return

modifyimage('displayarea', 1)">

something like that anyway. i must warn that im using 2 scripts at a time to display my pics and im not sure where one script ends and the other starts.
but the solution basically is to insert the height and width part...

10-04-2005, 05:47 AM
Ok I cleaned my script from the other script and here is how it looks:

<div id="motioncontainer" style="position:relative;width:250px;height:200px;overflow:hidden;">
<div id="motiongallery" style=" visibility: visible; position: absolute; top: 0; left: 0">
<nobr id="trueContainer"><a href="#"><img src="pictures/thumb1.jpg" height="100" width="75" border=1></a> <a href="#"><img src="pictures/thumb2.jpg" height="50" width="200" border=1></a> <a href="#"><img src="pictures/thumb3.jpg" height="150" width="150" border=1></a> </nobr></div></div>

With this code you have three same sized thumbs being forced to display at different sizes.

You could combine this with some style tags in the head I learned from john scheuer:

<style type="text/css">
#motiongallery img {

Now the thumbnails are aligned vertically and everything looks neat.