Easyish Cmotion image gallery query

[alphabeta77]

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?


Thanks!

[bobbby]

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.

[alphabeta77]

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?!

[bobbby]

hi again,

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

example:

<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...

[bobbby]

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 {
vertical-align:middle;
}
</style>

Now the thumbnails are aligned vertically and everything looks neat.