PDA

View Full Version : Image scroller not scrolling constantly shows End of Gallery



arjuna
09-12-2008, 12:14 PM
1) Script Title:
Cmotion Image Gallery

2) Script URL (on DD):
http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06

3) Describe problem:
The scroller keeps showing End of Gallery and does not scroll. I have enough images in there. Also the width is 100%. Any reason why it might keep showing End of Gallery and not scrolling?

Also does anyone know any ways to get this script to do a scroll without a mouseover and then return to its standard behaviour on mouse over...?

jscheuer1
09-12-2008, 02:33 PM
I think it should be easy to start out with Cmotion moving. But what happens if it gets to the end before someone moves the mouse over it?

Anyways, one thing at a time. To see why there is a problem in your implementation, we would need to see it:

Please post a link to the page on your site that contains the problematic code so we can check it out.

You might prefer Conveyor (it moves when the mouse isn't over it, and is continuous - no 'End of Gallery'):

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

arjuna
09-15-2008, 04:58 AM
Hi John:

I figured out why "End of Gallery" was showing. There was a bug in the way I had modified your code. I was using AJAX to populate the scroller and it seems that I called the Fillup function before the server sent a response with the string containing the images. I fixed this by calling Fillup after the servers response completed and lo and behold its all scrolling:

Regarding the 2nd issue, I could really use your help as I dont really understand your code enough to modify it. I looked at the Conveyer code that you posted. Actually what I need is a combination of Conveyer and the Image Scroller. Im sure other people would find it useful too.

So essentially what would happen is that the images would scroll as in the conveyer by default, but should the user mouse over to the left, the conveyer would move to the left and should he mouse over to the right of the list of thumnails it would scroll to the right, as in the image gallery. So its basically the image gallery,except that when the user does not mouse over the images keep scrolling. And when the end of the gallery is reached it could
start over from the first image. So essentially there would be no end of gallery, but the user could control the direction of the scroll by putting the mouse to the left or right of the scrolling.

It really is a combination of scroller and conveyer. I would appreciate it if you could help me with this.

Thanks for your help.

Arjuna

jscheuer1
09-15-2008, 03:35 PM
Here's a copy of Cmotion I had lying around that I think will (after just a little modification that I've added already - highlighted below in two places) do what you want:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>
<title>Cmotion Continuous</title>
<style type="text/css">
#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{
color: red; /* Dummy definition to overcome IE bug */
}

</style>
<script type="text/javascript">
/***********************************************
* CMotion Image Gallery- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
* Modified here for continuous motion by jscheuer1
***********************************************/

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.

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 actualwidth=''
var cross_scroll_0, cross_scroll_1, ns_scroll
var loadedyes=0

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


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 moveleft(){
if (iedom&&loadedyes){
movestate="left"
if (parseInt(cross_scroll_0.style.left)<(-actualwidth))
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)+actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)<(-actualwidth))
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)+actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)-scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)-scrollspeed+"px"
//showhidediv("visible")
}
lefttime=setTimeout("moveleft()",10)
}

function moveright(){
if (iedom&&loadedyes){
movestate="right"
if (parseInt(cross_scroll_0.style.left)>0)
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)-actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)>0)
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)-actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)+scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)+scrollspeed+"px"
}
righttime=setTimeout("moveright()",10)
}

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=Math.floor((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 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=""*/
scrollspeed = 1;
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menuwidth=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery_0") : document.all.motiongallery_0
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.style.whiteSpace='nowrap'
extra=document.createElement('nobr')
extra.innerHTML=document.all? document.all['trueContainer'].innerHTML : document.getElementById("trueContainer").innerHTML
cross_scroll_1.appendChild(extra)
crossmain.appendChild(cross_scroll_1)
actualwidth=document.all? cross_scroll_0.offsetWidth : document.getElementById("trueContainer").offsetWidth
cross_scroll_1.style.left=actualwidth+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
loadedyes=1
scrollspeed = 1;
moveleft();
}
window.onload=fillup
</script>
</head>
<body>
<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">
<div id="motiongallery_0" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><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>
</body>
</html>

Here's a live demo of it before the modifications:

http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm

It's continuous. The modifications I added to the version in this post start it out with a speed of 1 and return to that whenever the mouse moves off of it.

arjuna
09-19-2008, 06:26 AM
Hi John:

I noticed that the code that you made the changes in was slightly different than the code that I had for cmotion. I tried to replace my code with yours and also make the highlighted changes in my code, but neither worked. The scroller just froze in place so i guess we had js errors.

So i have copied my motiongallery.js file below. If you could make the changes to this it would really help. The if statement where you make the change is different here than in your code and also tthe code about the 1st change is diffferent.

Thanks so much...



/***********************************************
* 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=6;
//2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=7;
//3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=1300;
//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='<span style="font-size: 11px;">End of Gallery</span>';

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, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;

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(){
var mainobjoffset=getposOffset(crossmain, "left"),
menuheight=parseInt(crossmain.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!="") {
positiondiv();
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 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");
}
else
showhidediv("visible");
}
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");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}

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

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

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

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1

if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
}

onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

arjuna
09-23-2008, 08:41 AM
Hi John,

Didnt hear back from you regarding this...Would it be possible for you to insert your highlighted code into this version of the cmotion, which i think is the latest version which i got from your site....

Thanks in advance, sorry to bother you again...

jscheuer1
09-23-2008, 04:16 PM
The two scripts are NOT compatible, nor easily integrated. Use the script I wrote for you in my post with the markup from the link in that post.