CMotion and FiF issue

**nouvelle-cible** · 03-24-2006, 12:45 PM

Would it be possible to add a function making it possible to make scroll the images automatically in set speed ?

P.S.: Add this script on your site

**jscheuer1** · 03-24-2006, 03:30 PM

By 'my site' I hope you don't mean Dynamic Drive. See signature below. Anyways, I already made a continuous scrolling vertical gallery. To see it mimic the cmotion in size, paste this into the address bar while viewing it and hit enter:

Code:

javascript:alert(document.getElementById('iemarquee').parentNode.style.height='450px')

Or make your own by copying the code using your browser's 'view source' and modify the:

Code:

//Specify the marquee's height
var marqueeheight="225px"

setting.

**nouvelle-cible** · 03-24-2006, 03:37 PM

It would be necessary to adapt the "Marquee" on the previous code (Vertical Motion) because your example is great, but one cannot go up any more

**jscheuer1** · 03-24-2006, 04:02 PM

I was afraid you might want that. I made a version from the horizontal (original) cmotion that was continuous in motion at a set speed while the mouse was out. When I get a chance, I'll see about adapting the new vertical one to it or visa-versa.

**nouvelle-cible** · 03-24-2006, 04:07 PM

Ok, thank you, I'll wait

**jscheuer1** · 03-25-2006, 07:07 AM

Patience is a virtue:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Vertical Continuous CMotion Image Gallery - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#motioncontainer img {
border: 1px solid #ccc; /*image border color*/
margin-top:4px!important; /*added image spacing most browsers - can be negative*/
margin-top:0px; /*added image spacing IE - can be negative*/
}

#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 25th, 06'.  Vertical - Continuous (jscheuer1)
* This copyright notice must stay intact for legal use
* modified in http://www.dynamicDrive.com/forums
* for vertical orientation & 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.
var defaultspeed=1 //3) speed of scroll when gallery loads and on mouseout.
var startdir='down' //4 'up' or 'down' initial direction
var stayput=0 //5) 0 for gallery always in motion onmouseout, 1 for remains halted onmouseout if not moving when mouse moves out.

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=''
var cross_scroll_0, cross_scroll_1
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 moveup(){
if (iedom&&loadedyes){
movestate="up"
if (parseInt(cross_scroll_0.style.top)<(-actualheight))
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)+actualheight+"px"
if (parseInt(cross_scroll_1.style.top)<(-actualheight))
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)+actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)-scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)-scrollspeed+"px"

}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (iedom&&loadedyes){
movestate="down"
if (parseInt(cross_scroll_0.style.top)>0)
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)-actualheight+"px"
if (parseInt(cross_scroll_1.style.top)>0)
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)-actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)+scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)+scrollspeed+"px"
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor((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 (scrollspeed<defaultspeed&&stayput)
return;
scrollspeed=defaultspeed
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.innerHTML=cross_scroll_0.innerHTML
crossmain.appendChild(cross_scroll_1)
actualheight=cross_scroll_0.offsetHeight
cross_scroll_1.style.top=actualheight+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll_0.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll_0.style.top=0', 10)
}
loadedyes=1
scrollspeed=defaultspeed
if (startdir=='up')
moveup()
else
movedown()
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", fillup );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            fillup();
        };
    }
    else
        window.onload = fillup;
}
</script>
</head>
<body>
<div style="overflow:hidden;">
<div id="motioncontainer" style="position:relative;width:150px;height:400px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;">

<a href="javascript:enlargeimage('../thumb2/photo1.jpg')"><img src="../thumb2/photo1.jpg" border=1></a> <a href="javascript:enlargeimage('../thumb2/photo2.jpg', 300, 300)"><img src="../thumb2/photo2.jpg" border=1></a> <a href="http://www.dynamicdrive.com"><img src="../thumb2/photo3.jpg" border=1></a> <a href="#"><img src="../thumb2/photo4.jpg" border=1></a> <a href="#"><img src="../thumb2/photo5.jpg" border=1></a> <a href="#"><img src="../thumb2/photo6.jpg" border=1></a> <a href="#"><img src="../thumb2/photo7.jpg" border=1></a> <a href="#"><img src="../thumb2/photo8.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a>
</div>
</div>
</div>
</body>
</html>

**jara** · 04-10-2006, 08:04 PM

My motion gallery is working almost perfect. I want the images to run slower from left to right and from right to left.
Besides that I want my pictures to enlarge as in the following site www.kjosoutdoors.com/gallery_stock.html
Many thanks from a dutch girl

**jscheuer1** · 04-10-2006, 08:58 PM

The speed of the gallery is controlled in the configuration:

Code:

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="<span style='font-size: 11px'>End of Gallery</span>" //3) message to show at end of gallery. Enter "" to disable message.

A function could be written perhaps to zoom in/out (in IE) and/or change the dimensions of the images. It might be difficult or impossible to get it to look as smooth as the flash demo your post links to.

**jennwee83** · 04-30-2006, 02:34 PM

Hi jscheuer1,

I used your code and modified it to become horizontal - continues..
However, after i modified it...I have a problem....

When the pictures move from left to right....there are no problems...
But, when the pictures move from right to left, the pictures start overlaping...

The modified code has shown below:
// JavaScript Document
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 25th, 06'. Vertical - Continuous (jscheuer1)
* This copyright notice must stay intact for legal use
* modified in http://www.dynamicDrive.com/forums
* for vertical orientation & 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.
var defaultspeed=1 //3) speed of scroll when gallery loads and on mouseout.
var startdir='down' //4 'up' or 'down' initial direction
var stayput=0 //5) 0 for gallery always in motion onmouseout, 1 for remains halted onmouseout if not moving when mouse moves out.

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=''
var cross_scroll_0, cross_scroll_1
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 moveup(){
if (iedom&&loadedyes){
movestate="up"
if (parseInt(cross_scroll_0.style.top)<(-actualheight))
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)+actualheight+"px"
if (parseInt(cross_scroll_1.style.top)<(-actualheight))
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)+actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)-scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)-scrollspeed+"px"

}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (iedom&&loadedyes){
movestate="down"
if (parseInt(cross_scroll_0.style.top)>0)
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)-actualheight+"px"
if (parseInt(cross_scroll_1.style.top)>0)
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)-actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)+scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)+scrollspeed+"px"
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor((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 (scrollspeed<defaultspeed&&stayput)
return;
scrollspeed=defaultspeed
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.innerHTML=cross_scroll_0.innerHTML
crossmain.appendChild(cross_scroll_1)
actualheight=cross_scroll_0.offsetHeight
cross_scroll_1.style.top=actualheight+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll_0.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll_0.style.top=0', 10)
}
loadedyes=1
scrollspeed=defaultspeed
if (startdir=='up')
moveup()
else
movedown()
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", fillup );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
fillup();
};
}
else
window.onload = fillup;
}

Thank you very much!!
Jenn Wee

**jennwee83** · 04-30-2006, 02:35 PM

Sorry for the previous post...

The code has been shown below:

/***********************************************
* 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
***********************************************/

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 defaultspeed=1 //3) speed of scroll when gallery loads and on mouseout.
var startdir='right' //4 'left' or 'right' initial direction
var stayput=0 //5) 0 for gallery always in motion onmouseout, 1 for remains halted onmouseout if not moving when mouse moves out.

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
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"

}
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=(menu_width-restarea)/2
var rightbound=(menu_width+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor(curposy-rightbound)/((menu_width-restarea)/2) * maxspeed
if (window.righttime) clearTimeout(righttime)
if (movestate!="left") moveleft()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_width-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 (scrollspeed<defaultspeed&&stayput)
return;
scrollspeed=defaultspeed
}
}

function fillup(){

if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_width=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.innerHTML=cross_scroll_0.innerHTML
crossmain.appendChild(cross_scroll_1)
actualwidth=cross_scroll_0.offsetWidth
cross_scroll_1.style.left=actualwidth+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll_0.style.left=menu_width-actualwidth+'px'
setTimeout('cross_scroll_0.style.left=0', 10)
}
loadedyes=1
scrollspeed=defaultspeed
if (startdir=='left')
moveleft()
else
moveright()
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", fillup );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
fillup();
};
}
else
window.onload = fillup;
}

Thank you very much!!
Jenn Wee

Thread: CMotion and FiF issue

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions