2 Motion Gallery on1 page

[immersive]

I'm using the 2 scripts on one page code and can't figure out how to make the space between each image larger. Does anyone know?

Thanks for the awesome code!

[jscheuer1]

I've moved your post to a new thread, as you should have started a new thread yourself and explained more clearly as to what code exactly you are using and as to exactly what you are trying to do with it. Please do so. Adding a link to the page on your site where you are trying to do this would probably also speed results for your question.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[immersive]

The page is not online yet. Here is the exact code I'm working with: http://home.comcast.net/~jscheuer1/s...cmotion_oo.htm

I'm trying to figure out how to widen the space between each image inside the motion gallery. I see in the "motiongallery_oo.js" code where it says "gallery.usespace=1;" but how do I adjust the space by pixels? I'd like it to be a larger gap than it is. Thanks for the help!

-Sorry for not making a new thread with sufficient information. Won't happen again

[jscheuer1]

OK, that 1 or 0 thing is just for a quick and easy way to select the two most popular spacings for the gallery(ies). However, if you understand how the script constructs the gallery(ies) you can use style to set any size gap you like. All images in all galleries on a page are:

.motioncontainer img {
margin can go here.
}

Any given set of images in a particular gallery are

#motioncontainer0 img {
margin can go here.
}

0 is for the first gallery on the page, the next would be 1, then 2, and so on.

Like, try this in your stylesheet:

.motioncontainer img {
margin-right:20px;
}

and/or this:

#motioncontainer0 img {
margin-right:10px;
}

[immersive]

Thank you! That did the trick!

There is only one last thing I was wondering if this script could do:

I have created a background with arrows on the left and right side of the gallery. I would like to extend the area that the mouse can scroll a little beyond the frame of the images. I have attached an image to better show you what I'm talking about. When the mouse is put over the arrows it should scroll, but the images won't come past their set frame point.

Let me know if you have any ideas. Thanks again!

[jscheuer1]

OK, this is a little complicated because it varies depending upon the gallery number and whether it is a percentage width gallery or not, a centered gallery or not. Also, as I just thought of it now, testing in a few browsers - I can only say that it seems to work out well.

Here goes. This part is the same for any gallery. Put a container divson around the script tags for that particular gallery:

<div>
<script type="text/javascript">
new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
</script>
</div>

Now it gets tricky, this one is for a non-centered gallery with its width set in pixels, as you can see in the above (no % sign or quotes for the width value, the 'c' parameter not specified. Since the width is 500, our container can be 600, leaving 50 pixels on either side, but to get it even the gallery must be centered inside this container. This is the second gallery on the page, so its id number is 1 (id numbers start from 0 for the first gallery, as I explained in the last post). So we can do this:

<div style="width:600px;" onmousemove="cgals[1].motionengine(event);" 
onmouseout="cgals[1].stopmotion(event);cgals[1].showhidediv('hidden');">
<script type="text/javascript">
new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225, 'c')
</script>
</div>

For a gallery that was already centered and that uses percent width, the width would need to be increased, because our container will constrain it, this is for the 1st gallery on a page, so its id number is 0:

<div style="width:60%;margin:0 auto;" onmousemove="cgals[0].motionengine(event);" 
onmouseout="cgals[0].stopmotion(event);cgals[0].showhidediv('hidden');">
<script type="text/javascript">
//new cmotiongallery(gallery_array_name, rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)
new cmotiongallery(gallery, 6, 7, 1000, 2, '90%'/*increased*/, 225, 'c')
</script>
</div>

That bit, /*increased*/ is just a comment, and need not be used, the original % was 50 on that one, but with a 60% container, its width would have been greatly reduced. To maintain centering I added - margin:0 auto; to the style of the container.

So, basically they all need the 'c' parameter now. Centering or not centering will be determined by this added container's style. The mouse events need to carry the id number of the gallery in the three places as shown. And, of course - the container width should be set wider than the gallery width.

[immersive]

Wow, thank you so much for all of that! The code works perfect for me in FireFox, but I can't get it working in Explorer. Maybe I'm missing something?

[jscheuer1]

What version and OS of IE? I tested in IE 7 and 6 on the PC (Win XP) and it was fine.

Please post a link to the page on your site that contains the problematic code so we can check it out.

Um, I just remembered you saying you don't have a live page yet, but this may require you to put up at least a page that demonstrates the problem and give me a link to it.

[immersive]

Link removed I made a temporary page here. I'm using Vista Ultimate with IE 7.

[jscheuer1]

First of all, you need at least a transitional 4.01 DOCTYPE with URL:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

not:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

which throws IE 6 and later into quirks mode where even the rendering is off.

Once you have that, I'd suggest making a class for these containers:

<div id="Oobj333">
<div id="Gcod272" class="dfltc">
<div class="oo_c" style="width:100%;margin:0 auto;" onmousemove="cgals[0].motionengine(event);" 
onmouseout="cgals[0].stopmotion(event);cgals[0].showhidediv('hidden');">
<script type="text/javascript">
//new cmotiongallery(gallery_array_name, rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)
new cmotiongallery(gallery, 6, 7, 1000, 0, '92%', 100, 'c')
</script>
</div></div>
</div>

<div id="Oobj153">
<div id="Gcode297" class="dfltc">
<div class="oo_c" style="width:100%;margin:0 auto;" onmousemove="cgals[1].motionengine(event);" 
onmouseout="cgals[1].stopmotion(event);cgals[1].showhidediv('hidden');">
<script type="text/javascript">
//new cmotiongallery(gallery_array_name, rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)
new cmotiongallery(gallery2, 6, 7, 1000, 0, '92%', 100, 'c')
</script>
</div></div>
</div>

Then use this IE only style in the head of the page:

 . . . p-equiv="imagetoolbar" content="false">

<link rel="stylesheet" type="text/css" href="gallerystyle_oo.css">
<!--[if gte IE 5.5]>
<style type="text/css">
.oo_c {
background-color:white;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=1);
}
</style>
<![endif]-->   
<script type="text/javascript" src="motiongallery_oo.js">

/***********************************************
* OO_CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamic . . .

There are other ways, the main thing is that the container must have background or something in it that the mouse can move over, or else the mouseover doesn't count in IE, that's unless there is no other element underneath it with background, as I had in my tests. You could use a background image perhaps, or make it two nested divs each with parts of the images that shows through them. The above is probably easiest for that particular layout, though some (very few that have javascript enabled) folks disallow filters in IE, but if they do, there will be no error, and I think they will manage with just the gallery mouseover scrolling which will still work for them.