CMotion and FiF issue

Printable View

Show 40 post(s) from this thread on one page

06-25-2005, 06:59 PM
Armafair

CMotion and FiF issue

CMotion Image Gallery
http://www.dynamicdrive.com/dynamici...iongallery.htm

I have put the script into my page to display ten images. When viewed through IE, the script works fine, but FireFox only wants to show seven and a bit of the images before declaring End Of Gallery.

I have looked through the code but can't find any limiter of the 'length' of the slideshow (presumably IF there were one it would be in pixels, as the 'last' image diplayed in FF is only partly visible).

Any idea what the issue might be in FireFox? I haven't checked the page on other browsers yet...

Many Thanks.

A.
06-25-2005, 10:08 PM
jscheuer1

I've run across this a few times before and was searching the archives to see if I could find the solution. I only found one relevant thread but, there, no solution was found. I distinctly remember finding one though, for another fellow. It was a tough case, one where we found a few partial solutions that had drawbacks and I needed to go over the source numerous times. Finally we came up with a workable solution. If you could supply a link to the page in question, I'll give it a crack.
06-25-2005, 11:11 PM
jscheuer1

Turn's out the old adage - you learn more from your failures than you do from your successes - is true in this case. I decided to go after this problem using the case I found in the archives that I hadn't been able to solve, as it turns out, a much simpler example. By simply removing the doctype declaration, I was able to fix it. The trouble is that with a doctype of:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and I am sure, many others, the width calculated by the script for Mozilla based browsers is wrong. So, you can either remove your doctype from the page or, find this line in the script:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth

and change it to:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : number

substitute for number the actual width of the gallery's train of images, use the number only - no px after it, no quotes around it. Ex:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : 1850

You can find this number by adding together the display width of all the images plus the width of any padding and/or spacing. OR, just temporarily, insert this line just below that line in the unaltered script:

Code:

alert(actualwidth)

view the page in IE and use the value shown in the alert box.
06-26-2005, 07:51 AM
jscheuer1

I looked into this further and the real fix is to give the <nobr> tag on the display page an id like so:

HTML Code:

<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;"> <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;"> <nobr id="trueContainer"><a href . . . snip!

Then in the original motiongallery.js script, change this line:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth

to this:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth

There now, that's alot easier, huh?
06-27-2005, 02:06 PM
Armafair

A simple and elegant solution.

Many thanks for the time you invested in the problem, John. It's much appreciated.

*runs off to download some more browsers ;)

A.
09-01-2005, 12:06 PM
Soldierflup

Problem in Firefox

I downloaded this fantastic script and implemented it on a testpage.
In IE there are no problems, in Firefox (1.0.5) and Netscape (7.2) i'm receiving the following error :

Quote:

on line 112 : b has no properties.

The used code has been checked with the solutions given on this forumtopic.
Allthough most of the users are using IE, I would like it to work in all browsers.

I must admit i'm not an expert in javascript, so if anyone can help ???
09-01-2005, 04:02 PM
jscheuer1

Two things at work here and I have some suggestions for refinement. First of all, you broke the 'fix' for this script when you introduced another 'containing element', a table, into the html markup. If you remove id="trueContainer" from the <nobr> tag and apply it to the <table> tag, this will correct that:

HTML Code:

<nobr> <table id="trueContainer">

Second, the error you got is just an artifact caused by having another window (perhaps the javascript console itself) over the page. This is not a script breaking error and resolves itself once focus is fully returned to the window this script is in. As for suggestions, in Mozilla and with such a long image train, 7 is too low for maxspeed, so I would suggest using a test at the assignment of that variable like, where it says:

Code:

var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.

Change it to:

Code:

var maxspeed=(document.all&&!window.opera)? 7 : 27 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.

NOTE: This is only needed for a gallery containing so many images and the exact values (7 and 27) can be adjusted as you see fit. The 7 in this case is for IE and the 27 is for Mozilla and Opera (opera untested, may need to be removed from the conditional, take out '&&!window.opera' or change to '||window.opera' if it causes problems in opera.)

The other suggestion that I have is that if you want the galley centered, enclose the entire html part in a centered element.
09-02-2005, 09:58 AM
Soldierflup

Thx

Thank you very much. It's working now in the other browsers too. :) :) :)
09-11-2005, 11:10 AM
TheRec

Hello,

I use the CMotion Gallery and I also came accross the "b has no properties" Javascript error, but I don't get this error in the same situation than "Soldierflup". It happens on FireFox (1.0.6), Netscape (7.2 & 8.0), when I use the mouse scroll button (to scroll up or down the page), while being over the gallery with the mouse cursor.

That a really particular case I admit, but maybe someone will be more successful to debug this, I tired but I couldn't find any solution to this :S My guess is that Firefox/Netscape (well Gecko) considers that the mouse moves out of the gallery (although it doesn't in my case, the scrollbar is very small) ... which call the "stopmotion" function. This error doesn't happen in Opera...

Thanks a lot for your script, and thanks in advance for your answers.
09-11-2005, 11:34 AM
TheRec

I guess I'll answer my stupid question myself... mabye I'll help other people like me ;)

Replace :

Code:

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

by :

Code:

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

It solves the problem and the script still works in MSIE5.5/MSIE6, FireFox 1.0.6, Netscape 7.2/Netscape 8.0, Opera 7.5 / Opera 8.0 , Safari 1.2.2 and MSIE 5.2 Mac.

Hope it will help, sorry again :)
10-27-2005, 03:25 PM
samarita

Quote:

Originally Posted by jscheuer1

I looked into this further and the real fix is to give the <nobr> tag on the display page an id like so:

HTML Code:

<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;"> <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;"> <nobr id="trueContainer"><a href . . . snip!

Then in the original motiongallery.js script, change this line:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth

to this:

Code:

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth

There now, that's alot easier, huh?

=================================The Cmotion Gallery script is not working in Netscape and Firefox (Mozilla)

Can someone advise me on this?

Thanks,
10-27-2005, 03:26 PM
samarita

The Cmotion gallery script is not working in Netscape and Firefox (Mozilla).

Can someone advise me on this?

Thanks
10-27-2005, 03:38 PM
jscheuer1

samarita,

The current Cmotion script on DD here has already been updated to reflect the changes I laid out in this thread. So, to begin with, make sure you are using the most recent version. As far as any problem you may be having beyond that (not covered by TheRec's tweak outlined in this thread), I would need to see your implementation:

PLEASE: Include the URL to your problematic webpage that you want help with.
11-28-2005, 10:32 PM
morris_the_cat

Help needed

Hi!

I'm using this really cool script and it works great in IE but I can't get it to work in Firefox and Netscape. I've tried with the newer version but then it doesn't work at all. Can somebody help me please.

Here's the URL Link

Martin
11-29-2005, 05:43 AM
jscheuer1

Your HTML markup doesn't follow the intended design. You have for some reason used:

HTML Code:

<nobr id="trueContainer">

as a preface for each individual image in the gallery and neglected to close any of those tags with an </nobr> tag. The intended design is for only one:

HTML Code:

<nobr id="trueContainer">

at the beginning of the entire content and then a single </nobr> at the end of it, like so:

HTML Code:

<nobr id="trueContainer"><a href="visa2.asp?ItemID=photos/Separe01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Separe01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Separe02.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Separe02.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Separe03.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Separe03.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/bord01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_bord01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Restu01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Restu01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Bordnära01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Bordnära01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Lampa1.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Lampa1.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/fönstbord01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_fönstbord01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Rundabord01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundabord01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Rundabord02.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundabord02.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Fåtölj01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Fåtölj01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Lounge01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Lounge01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Rundfönst01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundfönst01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Rundsofa01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundsofa01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Väg01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Väg01.jpg" alt="" border="0"></a> <a href="visa2.asp?ItemID=photos/Väg02.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Väg02.jpg" alt="" border="0"></a></nobr>

Taking care of that will go a long way toward fixing things in those two browsers you mentioned, it may even be the only problem.
11-29-2005, 11:18 AM
morris_the_cat

Thank you so much for the fast reply! I'll try it right away!

Martin
12-08-2005, 09:50 PM
mahk

Is there any way to add labels to the pictures in the gallery. For instance, it would be great if you could put the name of each image below or above the picture, and it scrolls along the picture. Unfortunately, tables does not seem to work in the script.

Thanks in Advance.
Mahk
12-08-2005, 11:20 PM
jscheuer1

This type of syntax worked here:

HTML Code:

<table id="trueContainer"><tr><td><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td></tr></table>

Substitute it for:

HTML Code:

<nobr id="trueContainer"> . . . </nobr>

Notes: to center the captions under the images, put this in the head of the page:

Code:

<style type="text/css"> #trueContainer td { text-align:center; } </style>
12-09-2005, 04:41 PM
mahk

Great! I was close, I was just putting the table in the nobr... Thank a ton! It looks great. www.thepostshow.com

All the best,
Mahk
12-17-2005, 02:15 AM
Raymond_b

Hi, guys,
I have a little problem with this script, I tested it and all gone well but when I added to my real web page it wasn't working (thumbnail pictures weren't moving), so I carefully searched the problem and come to conclusion that the thing why this script doesn't want to work is my onload images in body tag... when I remove them, all works fine, when I add them back the gallery just isn't moving anymore.
Does anyone have a good idea how to solve this thing?
12-17-2005, 05:32 AM
jscheuer1

What images are onload in the body tag? If they are the images from the gallery, just get rid of the onload event. By the time onload fires, the images for the gallery are already loaded or are being loaded. If they are other images - say for a menu or other rollover effects on the page, it still doesn't make much sense to load them onload:

Gets on his soapbox:

Preloading images is best done on a page prior to the one they will be used on. Failing that, the code to preload them should be one of the first things the browser encounters on the page. If you wait until the page is loaded to preload your images, they aren't really being preloaded, are they?

Gets off his soapbox.

If these are other images and need to be preloaded to make other effects on your page work, I could help you to devise a more efficient way to make that happen without an onload event. Finally, if you won't have it any other way or if you have other legitimate onload events that need to be combined with this script, remove this line from motiongallery.js:

Code:

window.onload=fillup

Then in your body tag with the other onload event, let's say it looks something like this:

Code:

<body onload="someFunc('param_1', 'param_2');">

Make it look like this:

Code:

<body onload="fillup();someFunc('param_1', 'param_2');">
12-17-2005, 01:28 PM
Raymond_b

Wow, that was pretty simple! Thank you very, very much! I highly appreciate that!
12-27-2005, 04:46 AM
KittyR

Ok, I give up. How do you make two or more motion galleries run on the same page? I'm sooooooo close, but no cigar.

I went to the "function fillup" section and copied everything in the "if (iedom)" section, pasted it at the end and changed everything to "motiongallery2" etc. Then named the second gallery in my html page "motiongallery2" etc.

Hey, it was a good try for someone who knows nothing about javascript, but of course whichever one is last in the script is the only one that works.

I would be plum tickled if you had a way for this to work. :o

thanks,
Kitty
12-27-2005, 05:38 AM
jscheuer1

The easiest way to have two of the same scripts of this type on one page would be to actually have them be on two pages. One on the page itself, the other showing through onto that page via an iframe.

The method that it appears you are attempting can work but, one needs to be very thorough in creating two separate scripts, each with its own unique variable, function and id names.

I will have a look at the possibility of modifying the script (as has recently been done with the Fade-In Slideshow) to allow for multiple instances but, cannot promise anything on that front, due to the level of difficulty (for me) and the time involved (for anyone) that this entails.
12-29-2005, 12:48 AM
KittyR

The iFrame works fine.

thanks!
Kitty
03-21-2006, 04:21 PM
FoC

Is it possible to customize the gallery so that it runs vertically ?
03-22-2006, 03:57 PM
nouvelle-cible

Yeah, I search a same version in vertically :) It be nice :)
03-22-2006, 05:02 PM
jscheuer1

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 CMotion Image Gallery - Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <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 */ } #statusdiv{ position: absolute; padding: 2px; left: -300px; background-color: lightyellow; border: 1px solid gray; visibility: hidden; } </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 in http://www.dynamicDrive.com/forums * for vertical orientation 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 endofgallerymsg="<span style='font-size: 11px'>End of Gallery</span>" //3) message to show at end of gallery. Enter "" to disable message. 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, 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") document.body.appendChild(statusdiv) statusdiv=document.getElementById("statusdiv") statusdiv.innerHTML=endofgallerymsg } function positiondiv(){ menuwidth=parseInt(crossmain.offsetWidth) mainobjoffsetW=getposOffset(crossmain, "left") statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px" statusdiv.style.top=menu_height+mainobjoffset+10+"px" } function showhidediv(what){ if (endofgallerymsg!="") 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 moveup(){ if (loadedyes){ movestate="up" if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){ cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+"px" showhidediv("hidden") } else showhidediv("visible") } uptime=setTimeout("moveup()",10) } function movedown(){ if (loadedyes){ movestate="down" if (iedom&&parseInt(cross_scroll.style.top)<0){ cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+"px" showhidediv("hidden") } else showhidediv("visible") } 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=(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 (window.downtime) clearTimeout(downtime) if (window.uptime) clearTimeout(uptime) movestate="" } } 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=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery actualheight=cross_scroll.offsetHeight crossmain.onmousemove=function(e){ motionengine(e) } crossmain.onmouseout=function(e){ stopmotion(e) showhidediv("hidden") } } loadedyes=1 if (endofgallerymsg!=""){ creatediv() positiondiv() } } window.onload=fillup </script> </head> <body> <div style="overflow:hidden;"> <div id="motioncontainer" style="position:relative;width:110px;height:400px;overflow:hidden;"> <div id="motiongallery" style="position:absolute;left:0;top:0;"> <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> </div> </div> </div> </body> </html>
03-22-2006, 11:27 PM
nouvelle-cible

Great !!! Good job John !!!

Thank you :D
03-23-2006, 01:15 AM
jscheuer1

Quote:

Originally Posted by nouvelle-cible

Great !!! Good job John !!!

Thank you :D

Thanks, I played around with it a little more and discovered a minor Opera bug that can become major under certain circumstances. To avoid it, use this updated fillup() function (additions red):

Code:

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=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery actualheight=cross_scroll.offsetHeight crossmain.onmousemove=function(e){ motionengine(e) } crossmain.onmouseout=function(e){ stopmotion(e) showhidediv("hidden") } } if (window.opera){ cross_scroll.style.top=menu_height-actualheight+'px' setTimeout('cross_scroll.style.top=0', 10) } loadedyes=1 if (endofgallerymsg!=""){ creatediv() positiondiv() } }
03-24-2006, 12:45 PM
nouvelle-cible

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 :)
03-24-2006, 03:30 PM
jscheuer1

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.
03-24-2006, 03:37 PM
nouvelle-cible

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 :(
03-24-2006, 04:02 PM
jscheuer1

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.
03-24-2006, 04:07 PM
nouvelle-cible

Ok, thank you, I'll wait :):):)
03-25-2006, 07:07 AM
jscheuer1

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>
04-10-2006, 08:04 PM
jara

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
04-10-2006, 08:58 PM
jscheuer1

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.
04-30-2006, 02:34 PM
jennwee83

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
04-30-2006, 02:35 PM
jennwee83

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

Show 40 post(s) from this thread on one page