Page 3 of 6 FirstFirst 12345 ... LastLast
Results 21 to 30 of 51

Thread: CMotion and FiF issue

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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');">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #22
    Join Date
    Dec 2005
    Location
    Latvia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow, that was pretty simple! Thank you very, very much! I highly appreciate that!

  3. #23
    Join Date
    Dec 2005
    Location
    Colorado
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    thanks,
    Kitty

  4. #24
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #25
    Join Date
    Dec 2005
    Location
    Colorado
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The iFrame works fine.

    thanks!
    Kitty

  6. #26
    Join Date
    Mar 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is it possible to customize the gallery so that it runs vertically ?

  7. #27
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yeah, I search a same version in vertically It be nice

  8. #28
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 03-22-2006 at 04:52 PM. Reason: Refine Positioning
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #29
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Great !!! Good job John !!!

    Thank you

  10. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by nouvelle-cible
    Great !!! Good job John !!!

    Thank you
    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()
    }
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •