Results 1 to 7 of 7

Thread: how to make multiple cmotion gallery

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default how to make multiple cmotion gallery

    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...
    Last edited by davelf; 05-04-2010 at 07:00 AM.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    davelf (05-04-2010)

  4. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    thx john, it's great.
    _____________________

    David Demetrius // davejob
    _____________________

  5. #4
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    but how can I do it for the vertical version ?

  6. #5
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 :
    HTML Code:
    // 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

    HTML Code:
    <script type="text/javascript">
    new cmotiongallery(gallery, 6, 7, 1000, 1, 225, 500)
    </script>
    between the body tags

  7. #6
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking

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

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

    HTML Code:
    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 !

  8. #7
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple CMotion galleries with an onclick event?

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •