Cmotion image gallery help

[Sof]

Hi,

I am trying to install this picture gallery in my site but I cannot get it to work. Can anyone help me with this. I have done what it says in the instructions.

Here's the url for the page. I want the image gallery to display in the bottom div but no luck..

Please....

[Marco]

1.) The body onload is causing trouble (delite)
2.) Make sure that you downloaded the motiongallery.js file to your html folder?
3.) With this code inside the body the slider will work:
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:23px;white-space: nowrap;">
<nobr id="trueContainer">
<a href="#"><img src="../imggallery/g1.jpg"></a><a href="#"><img src="../imggallery/g2.jpg"></a><a href="#"><img src="../imggallery/g3.jpg"></a><a href="#"><img src="../imggallery/g4.jpg"></a><a href="#"><img src="../imggallery/g5.jpg"></a><a href="#"><img src="../imggallery/g6.jpg"></a></nobr></div></div>

Saludos de Hamburgo

[Sof]

Originally Posted by Marco

1.) The body onload is causing trouble (delite)
2.) Make sure that you downloaded the motiongallery.js file to your html folder?
3.) With this code inside the body the slider will work:
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:23px;white-space: nowrap;">
<nobr id="trueContainer">
<a href="#"><img src="../imggallery/g1.jpg"></a><a href="#"><img src="../imggallery/g2.jpg"></a><a href="#"><img src="../imggallery/g3.jpg"></a><a href="#"><img src="../imggallery/g4.jpg"></a><a href="#"><img src="../imggallery/g5.jpg"></a><a href="#"><img src="../imggallery/g6.jpg"></a></nobr></div></div>

Saludos de Hamburgo

Hi Marco,

I have done what you said there. Deleted the body on load and put your code into the div where I want the gallery to show. But it is still not working. I have put the motiongallery.js in both my scripts folder and my html folder.

<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->
<script type="text/javascript" src="../scripts/motiongallery.js">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>
<link href="../css/gallerystyle.css" rel="stylesheet" type="text/css" />

<div class="leftwrapper">
  <div class="second2"><div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:23px;white-space: nowrap;">
<nobr id="trueContainer">
<a href="#"><img src="../imggallery/g1.jpg"></a><a href="#"><img src="../imggallery/g2.jpg"></a><a href="#"><img src="../imggallery/g3.jpg"></a><a href="#"><img src="../imggallery/g4.jpg"></a><a href="#"><img src="../imggallery/g5.jpg"></a><a href="#"><img src="../imggallery/g6.jpg"></a></nobr></div></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>


</div>

[jscheuer1]

You've made progress, now in you stylesheets make these changes:

.leftwrapper {
	width:auto;
	height:210px;
	float:left;
	padding-top: 10px;

}

.second2 {
	float:left;
	width:816px;
	height:210px;
	border: thin none #FFFFCC;
	margin-left: 20px;
	margin-right: 10px;
	background-color: #FFFFCC;
}

#motioncontainer {
	height: 210px;
	width: auto;
}

[Marco]

Sent a ZIP-File to your website E-mail address.
Hope this will help

Marco

[Sof]

Alrighty!

Now it is working! Thank you very much! And thanks for a good script (youre the one who made it arent you) Why is the hight of so much importance?

[Marco]

We have to thank John (CMotion Image Gallery by jscheuer1) for this nice script!
John, if you read this - could you please take a look at a new thread which I posted this morning in thr Dynamic Drive script help section, title:
Swiss Army Slideshow and CMotion Gallery in combination.
Maybe you have an idea how this could work.
I´m going to upload a test version with a single swiss-army slideshow on my website and will post the link in addition to my thread.

Thank you!

[jscheuer1]

Originally Posted by Sof

Alrighty!

Now it is working! Thank you very much! And thanks for a good script (youre the one who made it arent you) Why is the hight of so much importance?

ddadmin originally coded this script. I just updated it for a few improvements as noted on the demo page.

To answer your question about the height you need to understand that there is no height unless one is specified for a container that holds absolutely positioned elements. The #motioncontainer division is such a container. Just giving it the height of your images (which are themselves in an absolutely positioned child of the #motioncontainer) allows them to be seen. The other height specifications were merely to make the gallery fit well into the rest of your layout. Had those other heights not been specified, there would have been extra white space and/or extra unfilled background space in the layout that I didn't believe you intended.

[Sof]

Thanks for that reply John, I am constantly learning !

This is probably a HTML question but I want to make popups for the gallery but I want them with at set hight and width. Do you know how to make that happen....

I have managed to make the popup by using

<a href="javascript:enlargeimage('elpiano.html')">

But the popup remains rezizable, and I don't want that..

[Marco]

Hello again,
Eric Kings Popup Window Generator on Dynamic Drive will work fine in combination with Cmotion.
http://www.dynamicdrive.com/dynamicindex8/popwin.htm
Description: Use Eric's Popup window Generator to easily add popup windows to your site! The windows are activated by clicking on a link, and can be fine tuned in every aspect, such as dimensions, scrollbars, toolbar etc. Awesome tool.

saludos,
Marco