Cmotion gallery auto starting scroll

[wormann]

1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem: I would like to know if there is a way to auto-start the scrolling initially when the page loads. From there the user can control it with the mouse.

I have read in the forums and found this http://www.dynamicdrive.com/forums/s...ad.php?t=20411page, but when I have tried to implement this code I get errors on the page.

Any help would be appreciated.
Thanks in advance...

[jscheuer1]

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

[wormann]

This is the page where I have tried to implement the auto start code provided from the link referenced above in the first message:
http://www.fourleafphotography.com/about/bio.php
I get an error saying "crossmain is undefined".

Here is the CMotion script working on my site, just without the auto-start feature that I would like to add:
http://www.fourleafphotography.com/contact/contact.php

Thanks again for your assistance with this.

[jscheuer1]

Oddly enough, it works in Firefox and Opera, just not IE. I'm surprised it works at all though, because you misinterpreted the modification instructions.

In this post:

http://www.dynamicdrive.com/forums/s...61&postcount=2

It clearly states to only add the red parts. The other portions of the code shown are reference points, to show where the code goes. They should not be added as they are already there.

So, you have added too much code in the wrong spot.

Here is your good copy of the script (which I notice you modified already for other reasons) with the modification for movement onload added in the correct manner:

/***********************************************
* 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=100;
 //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=5;
 //3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=800;
 //4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=2;
 //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 : "700px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //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()
scrollspeed=2;
moveleft();
}



//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;
}

Now, this will not be continuously in motion, only in motion after the page loads and until the user interacts with the gallery. For continuous motion you also meed the modification from post #4 in the thread:

http://www.dynamicdrive.com/forums/s...98&postcount=4

If you want to use that, hopefully you will have no trouble making that modification as instructed. If you do want to and have a problem though, and I know this can be hard sometimes, just let me know.

[wormann]

Hi John,
Quite honestly I missed the red part. I remember reading it and wondering huh? but didn't see any red type. (in my defense I think it was very late at night when I first tried
At any rate thank you for your help and I have now got the code working as desired. I don't think I want the continuous motion but I have bookmarked the page so I can find it if I need it.
Thanks again so much for all your help and patience.
It is much appreciated.