CMotion Image Gallery & Image Thumbnail Viewer combined

**lio** · 02-14-2009, 12:44 PM

1) Script Title:
CMotion Image Gallery & Image Thumbnail Viewer

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

3) Describe problem:

Everything works fine, but one question after some comments :
Would it be possible to modify something to have the CMotion gallery stoped when someone has clicked on one of the images to have it in big (with Image Thumbnail Viewer) ?

Here is the link :
http://varianscuirs.com/collections/cuirs-homme.htm

Thanks

**jscheuer1** · 02-14-2009, 04:51 PM

First off, and this has nothing to do with your question, the style for (in your gallerystyle.css file):

Code:

#statusdiv {
background-color: gray;
border: 1px solid gray;
padding: 2px;
position: relative; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

Must be position absolute:

Code:

#statusdiv {
background-color: gray;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

Otherwise it adds a lot of layout height to your page in many browsers. However, it appears that you don't really want it showing up. If so, simply disable it here in the motiongallery.js file:

Code:

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06
***********************************************/

 //1) Set width of the "neutral" area in the center of the gallery.
var restarea=10;
 //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=3;
 //3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=720;
 //4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=0;
 //5) Set message to show at end of gallery. Enter "" to disable message.
var endofgallerymsg="";

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!=" . . .

Now, on to your question. In the motiongallery.js file replace the functions of the same names as these with the below (additions highlighted):

Code:

function moveleft(){
if(document.getElementById('thumbBox') && document.getElementById('thumbBox').style.visibility == 'visible' ||
document.getElementById('thumbLoading') && document.getElementById('thumbLoading').style.visibility == 'visible')
return;
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");
}
else
showhidediv("visible");
}
lefttime=setTimeout("moveleft()",10);
}

function moveright(){
if(document.getElementById('thumbBox') && document.getElementById('thumbBox').style.visibility == 'visible' ||
document.getElementById('thumbLoading') && document.getElementById('thumbLoading').style.visibility == 'visible')
return;
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");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}

**lio** · 02-14-2009, 06:47 PM

Thanks you John, the modifications are online, however the small issue (my question) remains : the CMotion gallery continues to move when someone clicks on an image, and moves the mouse out of the enlarged image.
For me it is not really an issue, but a question of my customer