www.webdeveloper.com
Results 1 to 3 of 3

Thread: Next and previous buttons on Gallery! Please Help!

  1. #1
    Join Date
    Jul 2012
    Posts
    3

    Exclamation Next and previous buttons on Gallery! Please Help!

    Hi, I am new and was just wondering if somebody could help me with my code, I know the JavaScript basics, I need the simplest way to make my next and previous buttons navigate between images, and it has to be using JavaScript not JQuery. The slide functions shown below are small buttons on the bottom of my gallery they work and navigate through the images............. This is my JavaScript and HTML code:

    <script type="text/javascript">
    <!--
    function slide1()
    {
    document.images.slide.src="Images/slide/slide1.jpg";
    }
    function slide2()
    {
    document.images.slide.src="Images/slide/slide2.jpg";
    }
    function slide3()
    {
    document.images.slide.src="Images/slide/slide3.jpg";
    }

    function slide4()
    {
    document.images.slide.src="Images/slide/slide4.png";
    }
    function slide5()
    {
    document.images.slide.src="Images/slide/slide5.jpg";
    }
    function slide6()
    {
    document.images.slide.src="Images/slide/slide6.jpg";
    }
    //-->
    </script>



    <img src="Images/slide/previous.png" name="previous" height:"460" width:"44" a href="JavaScriptreviousImage()" id="previous"/>

    <img src="Images/slide/next.png" name="next" height:"460" width:"44" a href="JavaScript:nextImage()" id="next"/>

    <img src="Images/slide/slide1.jpg" name="slide" width="700" height="460" id="slideshow"/>
    <a class="slide1" onclick="javascript:slide1()"> </a>
    <a class="slide2" onclick="javascript:slide2()"> </a>
    <a class="slide3" onclick="javascript:slide3()"> </a>
    <a class="slide4" onclick="javascript:slide4()"> </a>
    <a class="slide5" onclick="javascript:slide5()"> </a>
    <a class="slide6" onclick="javascript:slide6()"> </a>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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>
    </head>
    
    <body>
    <script type="text/javascript">
    <!--
    var ary=[
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg'
    ];
    
    function Slide(id,ary,nu){
     document.getElementById(id).src=ary[nu];
     Slide[id]={nu:nu};  // create a function Slide[id] object with a property of nu recording the current image number
    }
    
    function nextImage(id,ary,ud){
      var nu=(Slide[id]&&Slide[id].nu?Slide[id].nu:0)+ud;  // if the function Slide[id] object exists use that or use 0 and add ud
      Slide(id,ary,Math.min(Math.max(nu,0),ary.length-1));
    }
    
    //-->
    </script>
    
    
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="previous" height="46" width="46"  onmouseup="nextImage('slideshow',ary,-1);" id="previous"/>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" name="next" height="46" width="46"  onmouseup="nextImage('slideshow',ary,1)" id="next"/>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" name="slide" width="700" height="460" id="slideshow"/>
    <a class="slide1" onclick="javascript:Slide('slideshow',ary,0);">1 </a>
    <a class="slide2" onclick="javascript:Slide('slideshow',ary,1);">2 </a>
    <a class="slide3" onclick="javascript:Slide('slideshow',ary,2);">3 </a>
    <a class="slide4" onclick="javascript:Slide('slideshow',ary,3);">4 </a>
    <a class="slide5" onclick="javascript:Slide('slideshow',ary,4);">5 </a>
    <a class="slide6" onclick="javascript:Slide('slideshow',ary,5);">6 </a>
    </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
    Jul 2012
    Posts
    3
    Thanks worked well

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles