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>
