CMotion and FiF issue

Printable View

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

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() } }

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