how to make multiple cmotion gallery

[davelf]

1) Script Title: how to make multiple cmotion gallery

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

3) Describe problem:
i want to make more than 1 cmotion gallery in 1 page? on which part i need to customize, please give me example...

i've already try to make 2 cmotion gallery in 1 page but there's only one cmotion gallery that work well.

thx...

[jscheuer1]

http://www.dynamicdrive.com/forums/s...3998#post53998

[davelf]

thx john, it's great.

[jimmyhendrix]

http://www.dynamicdrive.com/forums/s...3998#post53998

but how can I do it for the vertical version ?

[jimmyhendrix]

Ok nice,

I change it from myself and it works well. I tested the script in IE, works great, but in Firefox, for some reason, the lastest picture doesn't show up completely and I'm not able to solve the problem.

Any help ?

Here's the script :

// Set message to show at end of gallery(s). Enter "" to disable message.
var endofgallerymsg="";


 //declare gallery's name:
var gallery=new Array();
 // Use a space character between each image for this gallery? (use 1 for yes, 0 for no):
gallery.usespace=1;
 //define gallery's image train:
gallery[0]='<a href="dynamicbook1.gif" onclick="return enlargeimage(this.href);"><img src="photo1.jpg" border="1"></a>';
gallery[1]='<a href="dynamicbook1.gif" onclick="return enlargeimage(this.href, 300, 300);"><img src="photo2.jpg" border="1"></a>';
gallery[2]='<a href="http://www.dynamicdrive.com"><img src="photo3.jpg" border="1"></a>';
gallery[3]='<a href="#"><img src="photo4.jpg" border="1"></a>';
gallery[4]='<a href="#"><img src="photo5.jpg" border="1"></a>';
gallery[5]='<a href="#"><img src="photo6.jpg" border="1"></a>';
gallery[6]='<a href="#"><img src="photo7.jpg" border="1"></a>';
gallery[7]='<a href="#"><img src="photo8.jpg" border="1"></a>';
gallery[8]='<a href="#"><img src="photo9.jpg" border="1"></a>';

 //function used optionally to enlarge an image. Change as desired:
function enlargeimage(path, optWidth, optHeight){
if(!document.body.filters)
if(thewin&&thewin.name=='cwin'&&window==thewin.opener)thewin.close();
var actualWidth=typeof optWidth!="undefined" ? optWidth : 600; //set 600 to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : 500; //set 500 to  default height
actualWidth+=window.opera? 0 : 20, actualHeight+=window.opera? 0 : 20;
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable,status";
thewin=window.open(path,"cwin", winattributes);
if(document.body.filters)
thewin.resizeTo(actualWidth+12, actualHeight+70);
thewin.focus();
onunload=function(){if(thewin&&thewin.name=='cwin')thewin.close();};
return false;
}

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

var iedom=document.all||document.getElementById, cgals=[], thewin=null;

function cmotiongallery(gallery, rest, maxs, maxh, startp, width, height, c){
if(!iedom)
return;
this.gallery=gallery;
this.usespace=this.gallery.usespace? ' ' : '';
this.height=/%/.test(height)? height : parseInt(height)+'px';
this.width=width;
this.c=c? 'margin:0 auto;' : '';
this.loadedyes=0;
this.movestate='';
this.scrollspeed=0;
this.galid=cgals.length;
cgals[cgals.length]=this;
this.rest=rest;
this.maxs=maxs;
this.maxh=maxh;
this.startpos=startp;

for (var i_tem = 0; i_tem < this.gallery.length; i_tem++)
this.gallery[i_tem]=!/on[cC]lick/.test(this.gallery[i_tem])? this.gallery[i_tem].replace(/href="#"/, 'href="#" onclick="return false;"') : this.gallery[i_tem];

document.write('<div class="motioncontainer" id="motioncontainer'+this.galid+'" style="'+this.c+'height:'+this.height+';width:'+this.width+'px;position:relative;left:0;top:0;overflow:hidden;">\n'+
'<div id="motiongallery'+this.galid+'" style="position:absolute;left:0;top:0;white-space: nowrap;">\n'+
'\n'+
'<nobr id="trueContainer'+this.galid+'">'+this.gallery.join(this.usespace)+'<\/nobr>\n'+
'\n'+
'<\/div>\n'+
'<\/div>')
this.fillup();
}

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

cmotiongallery.prototype.creatediv=function(){
this.statusdiv=document.createElement("div")
this.statusdiv.setAttribute("id","statusdiv"+this.galid)
this.statusdiv.className="statusdiv";
document.body.appendChild(this.statusdiv)
this.statusdiv=document.getElementById("statusdiv"+this.galid)
this.statusdiv.innerHTML=endofgallerymsg
}

cmotiongallery.prototype.positiondiv=function(){
this.mainobjoffset=getposOffset(this.crossmain, "left"),
this.menuwidth=parseInt(this.crossmain.offsetWidth),
this.mainobjoffsetH=getposOffset(this.crossmain, "top");
this.statusdiv.style.left=this.mainobjoffset+(this.menuwidth/2)-(this.statusdiv.offsetWidth/2)+"px";
this.statusdiv.style.top=this.menuheigth+this.mainobjoffsetH+"px";
}

cmotiongallery.prototype.showhidediv=function(what){
if (endofgallerymsg!="") {
this.positiondiv();
this.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;
}


cmotiongallery.prototype.moveup=function(){
if (this.loadedyes){
this.movestate="up";
if (iedom&&parseInt(this.cross_scroll.style.top)>(this.menuheight-this.actualheight)){
this.cross_scroll.style.top=parseInt(this.cross_scroll.style.top)-this.scrollspeed+"px";
this.showhidediv("hidden");
}
else
this.showhidediv("visible");
}
this.uptime=setTimeout("cgals["+this.galid+"].moveup()",10);
}

cmotiongallery.prototype.movedown=function(){
if (this.loadedyes){
this.movestate="down";
if (iedom&&parseInt(this.cross_scroll.style.top)<0){
this.cross_scroll.style.top=parseInt(this.cross_scroll.style.top)+this.scrollspeed+"px";
this.showhidediv("hidden");
}
else
this.showhidediv("visible");
}
this.downtime=setTimeout("cgals["+this.galid+"].movedown()",10);
}

cmotiongallery.prototype.motionengine=function(e){
this.mainobjoffset=getposOffset(this.crossmain, "top"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientY : e.clientY? e.clientY: "";
curposy-=this.mainobjoffset-dsocy;
this.upbound=(this.menuheight-this.rest)/2;
this.downbound=(this.menuheight+this.rest)/2;
if (curposy>this.downbound){
this.scrollspeed=(curposy-this.downbound)/((this.menuheight-this.rest)/2) * this.maxs;
clearTimeout(this.downtime);
if (this.movestate!="up") this.moveup();
}
else if (curposy<this.upbound){
this.scrollspeed=(this.upbound-curposy)/((this.menuheight-this.rest)/2) * this.maxs;
clearTimeout(this.uptime);
if (this.movestate!="down") this.movedown();
}
else
this.scrollspeed=0;
}

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

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

cmotiongallery.prototype.fillup=function(){
if (iedom){
this.crossmain=document.getElementById? document.getElementById("motioncontainer"+this.galid) : document.all["motioncontainer"+this.galid];
if(typeof this.crossmain.style.maxHeight!=='undefined')
this.crossmain.style.maxHeight=this.maxh+'px';
this.menuheight=this.crossmain.offsetHeight;
this.cross_scroll=document.getElementById? document.getElementById("motiongallery"+this.galid) : document.all["motiongallery"+this.galid];
this.loading=document.getElementsByTagName? document.getElementById('trueContainer'+this.galid).getElementsByTagName('img') : document.all['trueContainer'+this.galid].all.tags('img');
for (var i_tem = 0; i_tem < this.loading.length; i_tem++)
if(typeof this.loading[i_tem].complete=='boolean'&&this.loading[i_tem].complete==false){
setTimeout("cgals["+this.galid+"].fillup()", 500);
return;
}
this.actualheight=document.getElementById? document.getElementById("trueContainer"+this.galid).offsetHeight : document.all['trueContainer'+this.galid].offsetHeight;
if (this.startpos)
this.cross_scroll.style.top=(this.menuheight-this.actualheight)/this.startpos+'px';
this.crossmain.onmousemove=new Function("e", "cgals["+this.galid+"].motionengine(e)");

this.crossmain.onmouseout=new Function("e", "cgals["+this.galid+"].stopmotion(e);cgals["+this.galid+"].showhidediv('hidden')");
}
this.loadedyes=1
if (endofgallerymsg!=""){
this.creatediv();
this.positiondiv();
}
}


function cmotionresize(){
for (var i_tem = 0; i_tem < cgals.length; i_tem++){
if (document.all&&document.all['motioncontainer'+i_tem]&&document.all['motioncontainer'+i_tem].filters){
document.all['motioncontainer'+i_tem].style.height="0";
document.all['motioncontainer'+i_tem].style.height=cgals[i_tem].height;
document.all['motioncontainer'+i_tem].style.height=Math.min(document.all['motioncontainer'+i_tem].offsetHeight, cgals[i_tem].maxh)+'px';
}
cgals[i_tem].menuheight=cgals[i_tem].crossmain.offsetHeight;
cgals[i_tem].cross_scroll.style.top=cgals[i_tem].startpos? (cgals[i_tem].menuheight-cgals[i_tem].actualheight)/cgals[i_tem].startpos+'px' : 0;
}
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "resize", cmotionresize, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onresize", cmotionresize );
else {
    if ( window.onresize != null ) {
        var oldOnresize = window.onresize;
        window.onresize = function ( e ) {
            oldOnresize( e );
            cmotionresize();
        };
    }
    else
        window.onresize = cmotionresize;
}

and it's the same way to call a new gallery

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

between the body tags

[jimmyhendrix]

Haha ! That's it ! I've got my solution !

I changed "nobr" for "div" in that part :

for (var i_tem = 0; i_tem < this.gallery.length; i_tem++)
this.gallery[i_tem]=!/on[cC]lick/.test(this.gallery[i_tem])? this.gallery[i_tem].replace(/href="#"/, 'href="#" onclick="return false;"') : this.gallery[i_tem];

document.write('<div class="motioncontainer" id="motioncontainer'+this.galid+'" style="'+this.c+'height:'+this.height+';width:'+this.width+'px;position:relative;left:0;top:0;overflow:hidden;">\n'+
'<div id="motiongallery'+this.galid+'" style="position:absolute;left:0;top:0;white-space: nowrap;">\n'+
'\n'+
'<nobr id="trueContainer'+this.galid+'">'+this.gallery.join(this.usespace)+'<\/nobr>\n'+
'\n'+
'<\/div>\n'+
'<\/div>')
this.fillup();
}

and it works fine everywhere ! Hope it can help somebody !

[uberchemist]

Hi guys, been a longtime fan of the site and finally had to register to ask for help with the problem I'm having.

I'm using the CMotion image gallery script in conjunction with another script from a different website. The second script uses an onclick event and an external JS file housing the code to create a pop-up image. These two scripts work together just fine.

Now that I want to include more than one image train to the same page AND use my secondary script, I run into a problem: the earliest version of the CMotion script allows for the onclick event, but the newer version posted by jscheuer1 now houses the gallery image source and links within the JS file.

I'd love to be able to keep the links within my html to utilize the other script, but my skills are somewhat limited (I've already tried combining several ways to no avail). Could anyone offer a suggestion? Much appreciated!