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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Scroller Help

    Hey all,
    I'm trying to create a scrolling image slider and i found the following script, but if anyone knows of a completed script that will be better than this one i'm open to changing to it. I will have 3 images in a css with left and right buttons and I would like the images to scroll to the left or right when the buttons are clicked. Here's what I have now, but its only set up to scroll one image in the function.
    Code:
    <table border="0" cellpadding="0">
    
    <tr>
    
    <td width="100%">
    <img src="images/pic_3.jpg" width="117" height="74" name="photoslider1">
    <img src="images/pic_3.jpg" width="117" height="74" name="photoslider2">
    <img src="images/pic_3.jpg" width="117" height="74" name="photoslider3">
    </td>
      
    </tr>
    
    <tr>
    
    <td width="100%">
    <form method="POST" name="rotater">
    
    <div align="center">
    <center>
    <p>
    
    <script language="JavaScript1.1">
    var photos=new Array()
    var which=0
    
    /*Change the below variables to reference your 
    
    own images. You may have as many images in the slider as you wish*/
    photos[0]="images/pic_3.jpg"
    photos[1]
    
    ="images/pic_4.jpg"
    photos[2]="images/pic_5.jpg"
    
    
    
    
    function backward()
    {
    if (which>0){
    window.status=''
    which--
    document.images.photoslider1.src=photos[which]
    }
    }
    
    
    
    function forward(){
    if (which<photos.length-1){
    which++
    document.images.photoslider1.src=photos[which]
    }
    
    
    else window.status='End of gallery'
    }
    </script>
    
    <input type="button" value="&lt;&lt;Back" name="B2"
          onClick="backward()">
    <a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a><input type="button" 
    
    value="Next&gt;&gt;" name="B1"
          onClick="forward()">
    
    </p>
    
    </center>
    </div>
    
    </form>
    
    </td>
    </tr>
    
    </table>
    Any help would be appreciated. Heres a link to the site that will be using this script for an idea of how it will be set up. http://www.bitsofbalance.org

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <div align="center">
    <center>
    <p>
    
    <script language="JavaScript1.1">
    JavaScript 1.1 ?? and the align attribute and center tag have been deprecated for a long time.

    Your images won't scroll because you only have three images, and they all fit within their container.

    BTW Images don't have a name attribute (maybe they used to years ago..) and I'm not sure why you are embedding everything within a form.

    BTWW That code doesn't look like it will work as it's only attempting to change the first image. If you Google I'm sure you will find many examples - try the phrase "javascript image carousel".
    Last edited by AndrewGSW; 09-23-2012 at 03:24 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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