PDA

View Full Version : Easyish Cmotion image gallery query



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


Thanks!

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

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

bobbby
10-04-2005, 04:15 AM
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
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 {
vertical-align:middle;
}
</style>

Now the thumbnails are aligned vertically and everything looks neat.