Updated – CMotion Image Gallery

Download Source ~ CMotion.zip

Screen shot

CMotion Image GalleryDescription: CMotion Image Gallery is a versatile gallery script that uses the most intuitive input devise available, the user’s mouse, to control it! The user can direct both the image scrolling direction and speed just by placing the mouse on either spectrums of the image gallery. Clicking on an image can then load a larger version of it, navigate to a page etc. Apart from the gallery’s dimensions, you can also specify its top scrolling speed, with the script then creating a range from 0-top speed and distributing it evenly across the gallery. Cool!This script works in all modern DHTML browsers- IE5+, NS6/ Firefox 1.0+, Opera 7+. FYI we named it “Cmotion” to stand for “Cursor Motion.” :)Yah.. It’s COOL! It’s working fine as long as there is only one image container (Image Rows) in apage. But if we put more than one container in a page then only the first will work and the rest will do nothing.. Anyway, Ihave the requirement that I need to show three image containers in one page. As the static variables (i.e: “motioncontainer” and etc)is used in the external javascript file, it’s not impossible to make it work unless I modify as my requirement.

Then I decided to take a look at js header file “motiongallery.js” ..
Here is the coding that I modified.. (I have tested with IE6,7 and Firefox 1.5.04 and its working fine.. )

Put the following code inside the <head>Tag.

<style>
#motioncontainer a img{  /*image border color*/
border:  1px solid #ccc;
}

#motioncontainer a:hover img{
/*image border hover color*/
border:  1px solid navy;
}

#motioncontainer a:hover{
 /* Dummy definition to overcome IE bug */ 
color: red;
}
</style>

Put the following code inside the <head>Tag.

 <scriptlanguage=javascript>


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


/* inner func(s)*/
 //1) width of the "neutral" area in the center of the gallery in px
var restarea=6; 
//2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=7;
/*
Michael Sync : Dont want to show "End of Gallery" Text
var endofgallerymsg="<span style='font-size: 11px'>End of Gallery</span>"
3) message to show at end of gallery. Enter "" to disable message.
*/

var iedom=document.all||document.getElementById;
var scrollspeed=0;
var movestate="";

var actualwidth='';
var  cross_scroll, ns_scroll;
var loadedyes=0;

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

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

function positiondiv(){
menuheight=parseIntcrossmain.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!="")
statusdiv.style.visibility=what;
}
*/

function motionengine(e){
var  dsocx=(window.pageXOffset)? pageXOffset:ietruebody().scrollLeft;
var  dsocy=(window.pageYOffset)? pageYOffset :ietruebody().scrollTop;
var 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;
if (window.righttime)clearTimeout(righttime);
if (movestate!="left")moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
if (window.lefttime)clearTimeout(lefttime);
if (movestate!="right")moveright();
}
else
  scrollspeed=0;
} 

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");
//M.Sync : Dont want to show "End of Gallery" Text
}
//else
//showhidediv("visible");
//M.Sync : Dont want to show "End of Gallery" Text
}
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");
//M.Sync : Dont want to show "End of Gallery" Text
}
//else //M.Sync : Dont want to show "End of Gallery" Text
//showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}

function  getposOffset(what, offsettype){
  var/font> 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 contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)return true;
return false;
}

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

//Main Funcs

function  init(obj,divGallery, noBrCtr){
//crossmain=document.getElementById? document.getElementById(obj.id) : document.all[obj.id];
//alert(obj.id);
crossmain = obj;
menuwidth=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll=document.getElementById? document.getElementById(divGallery) : document.all[divGallery];
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById(noBrCtr).offsetWidth;

crossmain.onmousemove=function(e){
motionengine(e);
//alert("move");
}

crossmain.onmouseout=function(e){
stopmotion(e);
//showhidediv("hidden");
//M.Sync : Dont want to show "End of Gallery" Text
}
loadedyes=1;

/* //Michael Sync : Dont want to show "End of Gallery" Text
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
*/
}

</script>

Put the following code inside the <body>Tag.

< divid="Div0" style="position:relative;width:450px;height:150px;overflow:hidden;"        onmouseover="init(this,'mgallery','tContainer');">
<div id="mgallery" style="position:absolute;left:0;top:0;white-space:nowrap;">
<nobr id= "tContainer"><a href= "javascript:enlargeimage('dynamicbook1.gif')">
<img  src="dynamicbook1.gif"border =1></a> < a href= "javascript:enlargeimage('dynamicbook1.gif', 300,300)"><img   src="dynamicbook1.gif"border=1></a>
<a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif"border=1></a>
<a href="#"><img src="dynamicbook1.gif"border=1></a> <a href="#"><img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a></nobr>
</div>
</div> 

<divid="Div1" style="position:relative;width:450px;height:150px;overflow:hidden;" onmouseover="init(this,'Div2','tContainer2');">
<div id="Div2"style="position:absolute;left:0;top:0;white-space:nowrap;">
<nobr id="tContainer2"><a href="javascript:enlargeimage('dynamicbook1.gif')">
<img src="dynamicbook1.gif"border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300,300)"><img  src="dynamicbook1.gif"border=1></a>
<a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif"border=1></a>
<a href="#"><img src="dynamicbook1.gif"border=1></a> <a href="#"><img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a> <a href="#">
<img src="dynamicbook1.gif"border=1></a></nobr>
</div>
</div>

8 thoughts on “Updated – CMotion Image Gallery

  1. I am trying to figure out how to force the gallery to scroll at a slow speed once loaded without any mouse interaction… but still be able to control with the mouse if desired. Can you help? (i’m actually using Cmotion gallery II in the vertical format)

  2. Crazy, I’ve been trying to do the same thing, but with the horizontal scroller… but with no success.

    Any tips on how this is achevable.

    Added bonus would be if the scroller could wrap around.

  3. Hello! Can you please help me with the vertical scroller?
    What’s wrong with these codes?

    var restarea=6; //1) width of the “neutral” area in the center of the gallery in px
    var maxspeed=7; //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
    //var endofgallerymsg=”End of Gallery” //3) message to show at end of gallery. Enter “” to disable message.

    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 : “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;
    var scrollspeed=0;
    var movestate=””;

    var actualheight=”; //width
    var cross_scroll;
    var loadedyes=0;

    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(){
    menuwidth=parseInt(crossmain.offsetWidth);
    mainobjoffsetW=getposOffset(crossmain, “left”);
    statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+”px”;
    statusdiv.style.top=menu_height+mainobjoffset+10+”px”;
    }

    //function showhidediv(what){
    //if (endofgallerymsg!=””)
    //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 moveup(){
    if (loadedyes){
    movestate=”up”;
    if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){
    cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+”px”;
    //showhidediv(“hidden”)
    }
    //else
    //showhidediv(“visible”)
    }
    uptime=setTimeout(“moveup()”,10);
    }

    function movedown(){
    if (loadedyes){
    movestate=”down”;
    if (iedom&&parseInt(cross_scroll.style.top)rightbound){
    scrollspeed=(curposy-rightbound)/((menu_height-restarea)/2) * maxspeed;
    if (window.downtime) clearTimeout(downtime);
    if (movestate!=”up”) moveup();
    }
    else if (curposy<leftbound){
    scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed;
    if (window.uptime) clearTimeout(uptime);
    if (movestate!=”down”) movedown();
    }
    else
    scrollspeed=0;
    }

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

    function stopmotion(e){
    if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
    if (window.downtime) clearTimeout(downtime)
    if (window.uptime) clearTimeout(uptime)
    movestate=””
    }
    }

    function fillup(obj,divGallery){
    //if (iedom){
    crossmain=obj;
    menu_height=parseInt(crossmain.style.height)
    mainobjoffset=getposOffset(crossmain, “top”)
    cross_scroll=document.getElementById? document.getElementById(“divGallery”) : document.all.[divGallery];
    actualheight=cross_scroll.offsetHeight

    crossmain.onmousemove=function(e){
    motionengine(e)
    }

    crossmain.onmouseout=function(e){
    stopmotion(e)
    //showhidediv(“hidden”)
    }
    //}
    /*if (window.opera){
    cross_scroll.style.top=menu_height-actualheight+’px’
    setTimeout(‘cross_scroll.style.top=0’, 10)
    }*/
    loadedyes=1
    /*if (endofgallerymsg!=””){
    creatediv()
    positiondiv()
    }
    }
    window.onload=fillup

















  4. hi i want to show title of each image at the bottom which also scroll with image. it works on firefox but not in others. please help me out……..!!
    thanks in advance!!
    i have used span tag to set properties of text.
    #motioncontainer a span {
    display:block;
    float:left;
    width:160px;
    border:none;
    margin-right:3px;
    text-align:center;
    text-decoration:none;
    font-family:Arial, “Helvetica”, sans-serif;
    font-weight:9px;
    color:#999999;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *