Results 1 to 8 of 8

Thread: Image slider

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

    Default Image slider

    Hi,

    i have dowloaded and utilized this script http://www.dynamicdrive.com/dynamici...iongallery.htm

    I want to add two arrows on either side of the images and when I go on I start scroll. I have added pictures but can not seem to understand what function to call onMouseOver event.

    Can you help me please?

    Thanks in advance

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    /* Gallery Styles */
    
    #motioncontainer {
    /*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
    width: 50%; /* Set to gallery width, in px or percentage */
    height: 130px; /* Set to gallery height */
    }
    
    #motioncontainer a img {
    border: 1px solid #cccccc; /* Set image border color */
    }
    
    #motioncontainer a:hover img {
    border: 1px solid navy; /* Set image border hover color */
    }
    
    #statusdiv {
    background-color: lightyellow;
    border: 1px solid gray;
    padding: 2px;
    position: absolute; /* Stop Editing Gallery Styles */
    left: 300px;
    visibility: hidden;
    }
    
    #motioncontainer a:hover {
    color: red; /* Dummy definition to overcome IE bug */
    }
    /* End Gallery Styles */
    
    /*]]>*/
    </style>
    
    <!-- Do not edit IE conditional style below -->
    <!--[if gte IE 5.5]>
    <style type="text/css">
    #motioncontainer {
    width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
    }
    </style>
    <![endif]-->
    <!-- End Conditional Style -->
    
    <script type="text/javascript" >
    
    /***********************************************
    * CMotion Image Gallery-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for source code
    * This copyright notice must stay intact for legal use
    * Modified for autowidth and optional starting positions in
    * http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06
    ***********************************************/
    
     //1) Set width of the "neutral" area in the center of the gallery.
    var restarea=6;
     //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
    var maxspeed=7;
     //3) Set to maximum width for gallery - must be less than the actual length of the image train.
    var maxwidth=1000;
     //4) Set to 1 for left start, 0 for right, 2 for center.
    var startpos=0;
     //5) Set message to show at end of gallery. Enter "" to disable message.
    var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';
    
    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, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;
    
    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(){
    var mainobjoffset=getposOffset(crossmain, "left"),
    menuheight=parseInt(crossmain.offsetHeight),
    mainobjoffsetH=getposOffset(crossmain, "top");
    statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
    statusdiv.style.top=menuheight+mainobjoffsetH+"px";
    }
    
    function showhidediv(what){
    if (endofgallerymsg!="") {
    positiondiv();
    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 moveleft(){
    if (loadedyes){
    movestate="left";
    if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
    showhidediv("hidden");
    }
    else
    showhidediv("visible");
    }
    lefttime=setTimeout("moveleft()",10);
    }
    
    function moveright(){
    if (loadedyes){
    movestate="right";
    if (iedom&&parseInt(cross_scroll.style.left)<0){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
    showhidediv("hidden");
    }
    else
    showhidediv("visible");
    }
    righttime=setTimeout("moveright()",10);
    }
    
    function motionengine(e){
    var mainobjoffset=getposOffset(crossmain, "left"),
    dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
    dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
    curposy=window.event? event.clientX : e.clientX? e.clientX: "";
    curposy-=mainobjoffset-dsocx;
    var leftbound=(menuwidth-restarea)/2;
    var rightbound=(menuwidth+restarea)/2;
    if (curposy>rightbound){
    scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
    clearTimeout(righttime);
    if (movestate!="left") moveleft();
    }
    else if (curposy<leftbound){
    scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
    clearTimeout(lefttime);
    if (movestate!="right") moveright();
    }
    else
    scrollspeed=0;
    }
    
    function Scroll(ud){
     scrollspeed=ud||0;
     if (ud>0){
      clearTimeout(righttime);
      if (movestate!="left") moveleft();
     }
     if (ud<0){
      clearTimeout(lefttime);
      scrollspeed*=-1;
      if (movestate!="right")  moveright();
     }
    }
    
    function contains_ns6(a, b) {
    if (b!==null)
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function stopmotion(e){
    if (!window.opera||(window.opera&&e.relatedTarget!==null))
    if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
    clearTimeout(lefttime);
    clearTimeout(righttime);
    movestate="";
    }
    }
    
    function fillup(){
    if (iedom){
    crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
    if(typeof crossmain.style.maxWidth!=='undefined')
    crossmain.style.maxWidth=maxwidth+'px';
    menuwidth=crossmain.offsetWidth;
    cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
    actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
    if (startpos)
    cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
    crossmain.onmousemove=function(e){
    motionengine(e);
    }
    
    crossmain.onmouseout=function(e){
    stopmotion(e);
    showhidediv("hidden");
    }
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv();
    positiondiv();
    }
    if (document.body.filters)
    onresize()
    }
    window.onload=fillup;
    
    onresize=function(){
    if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
    motioncontainer.style.width="0";
    motioncontainer.style.width="";
    motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
    }
    menuwidth=crossmain.offsetWidth;
    cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
    }
    </script>
    </head>
    
    <body>
    <div id="motioncontainer" style="position:relative;overflow:hidden;">
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
    
    <nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif', 300, 300)"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="#"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="#"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="#"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="#"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="#"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> <a href="#"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a></nobr>
    
    </div>
    </div>
    <img title="left" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1 width="20" onmouseover="Scroll(5);"  onmouseout="Scroll(0);">
    <img title="right" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1 width="20" onmouseover="Scroll(-5);"  onmouseout="Scroll(0);">
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default thank

    Your script is perfect, but I want to understand what you've added in the script (Scroll functions and ...)???

    Thanks

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I added

    Code:
    function Scroll(ud){
     scrollspeed=ud||0;
     if (ud>0){
      clearTimeout(righttime);
      if (movestate!="left") moveleft();
     }
     if (ud<0){
      clearTimeout(lefttime);
      scrollspeed*=-1;
      if (movestate!="right")  moveright();
     }
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default thanks

    Thanks

  6. #6
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default image slider

    hi great information thanks, i have been trying to figure this out for some time by looking at how others do it.

    But when i do this however it tells me that ud is not defined. what is ud please so i can adapt the function to my site... or did i miss something ..

    what i did was i added the function same as you in the same please in the file. then i made left and right image gif files. then when i use them i say onClick or onMouseover. but it tells me that ud is not defined...

    any idea thanks ?

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    the value of ud is passed to the function by the inline event calls

    Code:
    <img title="left" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1 width="20" onmouseover="Scroll(5);"  onmouseout="Scroll(0);">
    <img title="right" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1 width="20" onmouseover="Scroll(-5);"  onmouseout="Scroll(0);">
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks so much, really appreciate that, right on!!! works perfect.. peace

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
  •