CMotion Image Gallery Dissapears when adding more than 14 pictures

[TyrionFrost]

Hello everyone.

Okay, so I'm trying to use CMotion Image Gallery (http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm) for my website. For whatever reason, it works great up to 14 images, but if I add one more.. the whole thing disappears (on both firefox and chrome).

I've set up an example..

Here is 14 images, the last being "Sleepwalking.jpg" / "Sleepwalkingthumb.jpg"
http://mindfuseproductions.com/testing1.html

As you see.. if it displays for you like it does for me.. it works fine.

Now here is 15 images, one simply added to the end "heavenly.jpg" / "heavenlythumb.jpg".
http://mindfuseproductions.com/testing2.html

For me, on testing2.html, the whole thing is gone.

Here is my gallerystyle.css:


/* Gallery Styles */

#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 180px; /* Set to gallery height */
}

#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}

#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */

and this is added to my css on both testing pages:


<style>
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}

#motioncontainer #motiongallery {
width: 100%;
}
</style>

Hopefully someone can help. Love the script, but I was hoping to add about 30 images to display my photography on my profile.

Thank you!

-Tyrion

[jscheuer1]

heavenlythumb.jpg is too big, like 800 X 600, throws the whole gallery off, resize it to like 200 x 150 like the other thumbs and things will be OK.

BTW, at least two other images in the thumbs folder - nightmarethumb.jpg and gatewaythumb.jpg are too big too, perhaps there are others. They aren't in the gallery, so they're not a problem, yet. Before using them in the gallery, if you do end up using them, resize them as well.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[TyrionFrost]

Wow, so either I was half asleep last night and forgot to correctly resize those, or they didn't save properly.. either way, that was definitely the problem. It's now working here:

www.mindfuseproductions.com/testing1.html


Thank you!

One last question.. how could I make it span all the way across the screen? I tried 100% in the css under #motioncontainer but no go.

[jscheuer1]

That is the way to do it, but yours says 50%:


/* Gallery Styles */

#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 180px; /* Set to gallery height */
}

#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}

#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */

Change that to 100%. Make sure to upload the changes, clear the browser cache and refresh the page.

But it still won't be any wider than (set in the script itself):


/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06
***********************************************/

//1) Set width of the "neutral" area in the center of the gallery.
var restarea=6;
//2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=7;
//3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=1000;
//4) Set to 1 for left star . . .

And regardless of how wide you want it to be, if there aren't enough images to fill it out, there will be gaps and/or erratic behavior.

Be careful with that. If someone has a really wide screen there could be problems. So set the maxwidth there to something you know your image train can fill.

[TyrionFrost]

Alight, I believe I got it. Thanks so much.

One last thing, can you tell me if this displays okay for you?

http://mindfuseproductions.com/testing1.html

I've tried it in a few browsers, and it stretches across the screen and functions appropriately.

Thanks again :)

[jscheuer1]

Yep, looks good here too. At 2000 maxwidth and over 3000 in overall image width, it should be fine on any screen. The only suggestion I would have is to uncomment the centering line in gallerystyle.css - change:


/* Gallery Styles */

#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 100%; /* Set to gallery width, in px or percentage */
height: 180px; /* Set to gallery height */
}

#motionconta . . .

to:


/* Gallery Styles */

#motioncontainer {
margin:0 auto; /* Uncomment this line if you wish to center the gallery on page */
width: 100%; /* Set to gallery width, in px or percentage */
height: 180px; /* Set to gallery height */
}

#motionconta . . .

That way, if someone does have a screen/window wider than 2000px, at least the gallery will be centered.