cmotiongallery boblem

**jappine** · 12-16-2007, 01:01 PM

1) Script Title: cmociongallery

2) Script URL:
http://www.russian-theatre-posters.com

3) Describe problem: Please mr. jcscheuer1 can you help me im mewbie and blind what was wrong my sourcecode!!!

**jscheuer1** · 12-16-2007, 02:15 PM

The script is not on the server in the location:

Code:

http://www.russian-theatre-posters.com/motiongallery.js

where the page is looking for it. There could also be other problems, but the script can't work if it isn't there.

**jappine** · 12-16-2007, 03:17 PM

Originally Posted by jscheuer1

The script is not on the server in the location:

Code:

http://www.russian-theatre-posters.com/motiongallery.js

where the page is looking for it. There could also be other problems, but the script can't work if it isn't there.

Uups, im silly...
....but script still doesn´t work can i put whole htlm code to you e-mail or something?

**jappine** · 12-16-2007, 04:00 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<Style type="text/css">
#Top {
position:absolute;
left:0px;
top:0px;
width:474px;
height:92px;
background-image:url(images/top.png)
}
#Middle {
position:absolute;
left:0px;
top:92px;
width:474px;
height:235px;
}
#Botton {
position:absolute;
left:0px;
top:327px;
width:474px;
height:43px;
background-image:url(images/botton.png)
}
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />





<script type="text/javascript" src="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>
</style>
</HEAD>
<body bgcolor="#F1C8B4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<Div id="Top">
<img src="images/top.png" width="474" height="92" alt="">
</Div>
<Div id="Middle">
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0px;top:0px;width:474px;height:235px;white-space: nowrap;"></div>
<nobr id="trueContainer">
<a href="javascript:enlargeimage('images/posters/a_real_man.png')">
<img src="images/posters/a_real_man_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/a_real_man.png', 600, 853)"></a>
<a href="javascript:enlargeimage('images/posters/the_swan_lake.png')">
<img src="images/posters/the_swan_lake_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/the_swan_lake.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/a_case.png')">
<img src="images/posters/a_case_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/a_case.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/an_acident.png')">
<img src="images/posters/an_acident_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/an_acident.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/art_of_comedy.png')">
<img src="images/posters/art_of_comedy_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/art_of_comedy.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/cylinder.png')">
<img src="images/posters/cylinder_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/cylinder.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/don_juan.png')">
<img src="images/posters/don_juan_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/don_juan.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/dead_princess_and7gigantes.png')">
<img src="images/posters/dead_princess_and7gigant_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/dead_princess_and7gigantes.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/fear.png')">
<img src="images/posters/fear_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/fear.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/hounted_new_heaven.png')">
<img src="images/posters/hounted_new_heaven_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/haunted_new_heaven.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/jewish_happiness.png')">
<img src="images/posters/jewish_happiness_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/jewish_happiness.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/kiss_of_tsanita.png')">
<img src="images/posters/kiss_of_tsanita_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/kiss_of_tsanita.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/indivdual.png')">
<img src="images/posters/individual_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/individual.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/katarina_izmailova.png')">
<img src="images/posters/katarina_izmailova_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/katarina_izmailova.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/kretsinski_wedding.png')">
<img src="images/posters/kretsinski_wedding_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/kretsinski_wedding.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/kovaleva_from_province.png')">
<img src="images/posters/kovaleva_from_province_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/kovaleva_from_province.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/land_for_the_workers.png')">
<img src="images/posters/land_for_the_workers_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/land_for_the_workers.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/left_front_line.png')">
<img src="images/posters/left_front_line_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/left_front_line.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/little_house.png')">
<img src="images/posters/little_house_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/little_house.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/lovely_layer.png')">
<img src="images/posters/lovely_layer_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/lovely_layer.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/our_october.png')">
<img src="images/posters/our_october_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/our_october.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/people_and_passions.png')">
<img src="images/posters/people_and_passions_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/people_and_passions.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/physicist.png')">
<img src="images/posters/physicist_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/physicist.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/revolucion.png')">
<img src="images/posters/revolucion_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/revolucion.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/small_card_with_apples.png')">
<img src="images/posters/small_card_with_apples_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/small_card_with_apples.png', 600, 894)"></a>
<a href="javascript:enlargeimage('images/posters/steps_on_sunrise.png')">
<img src="images/posters/steps_on_sunrise_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/steps_on_sunrise.png', 600, 894)"></a>....

........<a href="javascript:enlargeimage('images/posters/47.png')">
<img src="images/posters/47_s.png" border=1>
</a> <a href="javascript:enlargeimage('images/posters/47.png', 600, 894)"></a>
</a></nobr>

</div>
</div>
<Div id="Botton">
<img src="images/botton.png" width="474" height="43" alt="">
</Div>

</body>
</html>

**jappine** · 12-16-2007, 04:02 PM

/* Gallery Styles */

#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 30%; /* Set to gallery width, in px or percentage */
height: 235px; /* 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 */

**jappine** · 12-16-2007, 04:03 PM

/***********************************************
* 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/s...ad.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=470;
//4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=0;
//5) Set message to show at end of gallery. Enter "" to disable message.
var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "894px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
var mainobjoffset=getposOffset(crossmain, "left"),
menuheight=parseInt(crossmain.offsetHeight),
mainobjoffsetH=getposOffset(crossmain, "top");
statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
statusdiv.style.top=menuheight+mainobjoffsetH+"px";
}

function showhidediv(what){
if (endofgallerymsg!="") {
positiondiv();
statusdiv.style.visibility=what;
}
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function moveleft(){
if (loadedyes){
movestate="left";
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
lefttime=setTimeout("moveleft()",10);
}

function moveright(){
if (loadedyes){
movestate="right";
if (iedom&&parseInt(cross_scroll.style.left)<0){
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}

function motionengine(e){
var mainobjoffset=getposOffset(crossmain, "left"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientX : e.clientX? e.clientX: "";
curposy-=mainobjoffset-dsocx;
var leftbound=(menuwidth-restarea)/2;
var rightbound=(menuwidth+restarea)/2;
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(righttime);
if (movestate!="left") moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(lefttime);
if (movestate!="right") moveright();
}
else
scrollspeed=0;
}

function contains_ns6(a, b) {
if (b!==null)
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if (!window.opera||(window.opera&&e.relatedTarget!==null))
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
clearTimeout(lefttime);
clearTimeout(righttime);
movestate="";
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
}
window.onload=fillup;

onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

**jscheuer1** · 12-16-2007, 04:57 PM

Don't post all that code when there is a link to your page. I can just look at the page. Anyways, your head is a little messed up:

Code:

<Style type="text/css">
#Top {
position:absolute;
	left:0px;
	top:0px;
	width:474px;
	height:92px;
	background-image:url(images/top.png)
}
#Middle {
position:absolute;
	left:0px;
	top:92px;
	width:474px;
	height:235px;
}
#Botton {
position:absolute;
	left:0px;
	top:327px;
	width:474px;
	height:43px;
	background-image:url(images/botton.png)
}
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
      
<!-- 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="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>
</style>
</HEAD>

Somehow you got the closing style tag out of place and took out some closing dashes on a comment tag. Tags should be lower case with your DOCTYPE. It should look like so (changes/additions red):

Code:

<style type="text/css">
#Top {
position:absolute;
	left:0px;
	top:0px;
	width:474px;
	height:92px;
	background-image:url(images/top.png)
}
#Middle {
position:absolute;
	left:0px;
	top:92px;
	width:474px;
	height:235px;
}
#Botton {
position:absolute;
	left:0px;
	top:327px;
	width:474px;
	height:43px;
	background-image:url(images/botton.png)
}
</style>
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
      
<!-- 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="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>
</head>

In the body, there is a misplaced </div> tag at the end of this line:

Code:

<div id="motiongallery" style="position:absolute;left:0px;top:0px;width:474px;height:235px;white-space: nowrap;"></div>

It belongs here:

Code:

			<img src="images/posters/47_s.png" border=1>
	</a> <a href="javascript:enlargeimage('images/posters/47.png', 600, 894)"></a>								
				</a></nobr>

</div>
</div>
</div>
<Div id="Botton">

Div and Botton should be lower case, as with other tags and ids on the page and in the style. We can stop now, its working, but you probably want to get rid of:

Code:

<style type="text/css">
#Top {
position:absolute;
	left:0px;
	top:0px;
	width:474px;
	height:92px;
	background-image:url(images/top.png)
}
#Middle {
position:absolute;
	left:0px;
	top:92px;
	width:474px;
	height:235px;
}
#Botton {
position:absolute;
	left:0px;
	top:327px;
	width:474px;
	height:43px;
	background-image:url(images/botton.png)
}
</style>

anyway, or at least parts of it. It restricts the gallery too much (to the width of only one image), but maybe that's what you are going for.

**jappine** · 12-17-2007, 01:45 PM

yes my head it´s little messed up cause i´ve been working for my pc 12h/4 days..
Theres still something wrong, how to stretch active area where posters are and those scroll bars... :-(

**jappine** · 12-17-2007, 02:39 PM

:d:d:d:d:d:d:d:d:d:d:d:d:d

**jscheuer1** · 12-17-2007, 03:27 PM

When I said your head was messed up, I meant the head section of the page. It still is a little, there are two opening style tags here and two meta content tags as well:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<Style type="text/css">
<style type="text/css">
#Top {
position:absolute;
	left:0px;
 . . .

It should be:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#Top {
position:absolute;
	left:0px;
 . . .

You still have scrollbars in IE. You can get rid of those by adding (on home.html) here (addition red):

Code:

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

Thread: cmotiongallery boblem

Thread Tools

Search Thread

cmotiongallery boblem

Now script is there

home.html

gallerystyle.css

motiongallery.js

Sorry..

Thanks a lot jscheuer1, now sites are UP!!

Bookmarks

Bookmarks

Posting Permissions