Results 1 to 2 of 2

Thread: Cmotion Vertical scroll

  1. #1
    Join Date
    May 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cmotion Vertical scroll

    Hello,

    I noticed that many people looked for a way to make Cmotion script
    http://www.dynamicdrive.com/dynamici...iongallery.htm
    vertical..

    did any one find a way? if not, does anyone have an idea where i might find a way to verticlly scroll an image gallery..

    I need help ASAP!!

    thank you
    ido.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 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")
    }
    }
    if (window.opera){
    cross_scroll.style.top=menu_height-actualheight+'px'
    setTimeout('cross_scroll.style.top=0', 10)
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv()
    positiondiv()
    }
    }
    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/photo9.jpg')"><img src="../thumb2/photo9.jpg" border=1></a> <a href="javascript:enlargeimage('../thumb2/photo9.jpg', 300, 300)"><img src="../thumb2/photo9.jpg" border=1></a> <a href="http://www.dynamicdrive.com"><img src="../thumb2/photo9.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a>
    </div>
    </div>
    </div>
    </body>
    </html>
    - 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
  •