Updated - CMotion Image Gallery

13 Jul, 2006  JavaScript

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>

3 Comments so far »

  1. dave said

    am June 5 2008 @ 7:05 am

    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. Dan said

    am June 8 2008 @ 10:47 am

    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. Dan said

    am June 8 2008 @ 11:17 am

    dave,

    Found this in the Dynamic Drive Cmotion forum.

    Original source code found here for vertical scroller:
    http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm

    Then the bit of code to change for the auto scroll:
    http://www.dynamicdrive.com/forums/showthread.php?t=2810&highlight=start+scrolling

    This worked for the horizontal scroller, i’m sure it will work with the vertical scroller.

    -Dan

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: