Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy stumped on making previous/next buttons work...

    Hi all,
    I have an iFrame that will eventually have a set of images that you can scroll through using a previous and next button below them. Right now there are only two images. I had the next/previous javascript working when I had four placeholders, but now the client only wants two images up and when you are on the second image and hit next, it goes to a blank screen.

    I'm assuming it's something really simple that I am not doing so any help on this would be so much appreciated.

    here's the iFrame of the images: http://www.brodmannblades.com/product.html
    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">
    <head>
    <script type="text/javascript" src="nextPrevious.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #000000;
    
    }
    body,td,th {
    	color: #333;
    }
    a:link {
    	color: #333;
    	text-decoration: none;
    }
    a:visited {
    	color: #666;
    	text-decoration: none;
    }
    a:hover {
    	color: #09C;
    	text-decoration: none;
    }
    a:active {
    	color: #000;
    	text-decoration: none;
    }
    -->
    </style>
    
    </head>
    
    <body>
    <div style="width:780px; height:400px; margin: auto;">
    <img name="imgSrc" width="780" height="400" id="imgSrc">
    </div>
    
    <!-- Controller -->
    <table width="780" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:780px; margin: auto;">
      <tr>
        <td align="center"><a href="#" onClick="prev();"> «</a></td>
        <td align="center"><a href="#" onClick="next();"> » </a></td>
      </tr>
    </table>
    <p>	
    </body>
    
    </html>
    and here's the javascript code that it is calling up: http://www.brodmannblades.com/nextPrevious.js
    Code:
    // List image names without extension
    var myImg= new Array(2)
      myImg[0]= "bw01";
      myImg[1]= "bw02";
    
    
    // Tell browser where to find the image
    myImgSrc = "images/";
    
    // Tell browser the type of file
    myImgEnd = ".jpg"
    
    var i = 0;
    
    // Create function to load image
    function loadImg(){
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    
    // Create link function to switch image backward
    function prev(){
      if(i<1){
        var l = i
      } else {
        var l = i-=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    
    // Create link function to switch image forward
    function next(){
      if(i>2){
        var l = i
      } else {
        var l = i+=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    
    // Load function after page loads
    window.onload=loadImg;

    Again, thanks for any help!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Change your prev() and next() functions to automatically handle *any* number of images:
    Code:
    // Create link function to switch image backward
    function prev()
    {
        i = ( i + myImg.length - 1 ) % myImg.length;
        loadImg();
    }
    // Create link function to switch image forward
    function next()
    {
        i = ( i + 1 ) % myImg.length;
        loadImg();
    }

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Personally, I would have done the whole thing a lot simpler:

    Code:
    <head>
    <script>
    // use *meaningful* names..."i" is WAY overused! 
    // And "myImg" is a lie...there are more than one
    var currentImage = 0;
    var slideshowImages = [ "bw01", "bw02" ];
    
    function loadImg( moveBy )
    {
        if ( moveBy == null ) moveBy = 0;
        var ilen = slideshowImages.length;
        currentImage = ( currentImage + ilen + moveBy )  % ilen;
        document.getElementById("imgSrc").src = "images/" + slideshowImages[currentImage] + ".jpg";
    }
    </script>
    </head>
    <body onload="loadImg(0);">
    <div style="width:780px; height:400px; margin: auto;">
    <img width="780" height="400" id="imgSrc">
    </div>
    <table width="780" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:780px; margin: auto;">
      <tr>
        <td align="center"><a href="#" onClick="loadImg(-1);"> «</a></td>
        <td align="center"><a href="#" onClick="loadImg(1);"> » </a></td>
      </tr>
    </table>
    <p>	
    </body>
    
    </html>


  •  

    Posting Permissions

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