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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Questions on slideshow

    Hi,
    I'm a newbie in javascript. I'm currently working on a slideshow javascript where I combined 2 slideshow javascripts together. The problem I'm facing now is that the slide show scripts don't work together perfectly. My slideshow is navigated in 2 ways, one of which is by clicking on the smaller preview images and here is the code:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) -->
    <!-- Web Site:  http://www.webdesignsdirect.com -->
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Begin
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    
    ns3up = (browserName == "Netscape" && browserVer >= 3);
    ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
    
    function doPic(imgName) {
    if (ns3up || ie4up) {
    imgOn = ("" + imgName);
    document.mainpic.src = imgOn;
       }
    }
    //  End -->
    </script>
    Another was the normal slideshow with start, stop, next and previous buttons, the code:
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original:  Mike Canonigo (mike@canonigo.com) -->
    <!-- Web Site:  http://www.munkeehead.com -->
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Begin
    NewImg = new Array (
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg"
    
    );
    var ImgNum = 0;
    var ImgLength = NewImg.length - 1;
    
    //Time delay between Slides in milliseconds
    var delay = 3000;
    
    var lock = false;
    var run;
    function chgImg(direction) {
    if (document.images) {
    ImgNum = ImgNum + direction;
    if (ImgNum > ImgLength) {
    ImgNum = 0;
    }
    if (ImgNum < 0) {
    ImgNum = ImgLength;
    }
    document.mainpic.src = NewImg[ImgNum];
       }
    }
    function auto() {
    if (lock == true) {
    lock = false;
    window.clearInterval(run);
    }
    else if (lock == false) {
    lock = true;
    run = setInterval("chgImg(1)", delay);
       }
    }
    //  End -->
    </script>
    And here's the html :
    Code:
    <table border="0" cellpadding="1" cellspacing="0" width="440">
    <tr>
    <td colspan=4 width="440">
    <img name="mainpic" src="1.jpg" border="0" width="440px"></td>
    </tr>
    <tr>
    <td align="left" width="105">
    <a href="javascript:auto()">Start/stop slide show</a>
    </td>
    </tr>
    <tr>
    <td class="button" align="left"><a href="javascript:chgImg(-1)"> Previous</a></td>
    <td></td>
    <td></td>
    <td class="button" align="right"><a href="javascript:chgImg(1)">Next </a></td>
    </tr>
    <tr>
    <td width="103"><a href="javascript:doPic('1.jpg');">
                <img src="1.jpg" width=100 height=75 border=0></a></td>
    <td width="103"><a href="javascript:doPic('2.jpg');">
                <img src="2.jpg" width=100 height=75 border=0></a></td>
    <td width="103"><a href="javascript:doPic('3.jpg');">
                <img src="3.jpg" width=100 height=75 border=0></a></td>
    <td width="103"><a href="javascript:doPic('4.jpg');">
                <img src="4.jpg" width=100 height=75 border=0></a></td>
    </tr>
    </table>
    The problem I'm facing is that when I click on the small thumbnails, the chgimg(1)/(-1) function is not updated by the current image. For example, the starting image is 1.jpg. After i clicked on the small thumbnail of 3.jpg, the main picture was functioned to view 3.jpg. However, when I click <Next>, the picture goes to 2.jpg instead of 4.jpg. Whenelse if I click <Previous>, the main picture goes to 4.jpg instead of 2.jpg. Can someone help me with the code?

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to update the global variable ImgNum whenever a thumbnail is clicked...

    Code:
    <script>
    var ImgNum = 0;
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    
    ns3up = (browserName == "Netscape" && browserVer >= 3);
    ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
    
    
    function doPic(imgName) {
    if (ns3up || ie4up) {
    imgOn = ("" + imgName);
    document.mainpic.src = imgOn;
    alert('ImgNum = '+ImgNum);
    ImgNum = parseInt(imgName);
    alert('ImgNum = '+ImgNum);
       }
    }
    
    </script>
    <img name="mainpic" src="0.jpg" border="0" width="440px">
    <a href="javascript:doPic('2.jpg');">
                <img src="1.jpg" width=100 height=75 border=0></a>
    .....Willy

  • #3
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Thanks for the tip Willy! Unfortunately, the chgimg() function and the slideshow function - auto() don't work anymore once i changed the script. It appears that it doesn't know which image to display.

  • #4
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Sorry to double post.. I'm still a newbie and I am stuck with these codes for a vary long time. Is there anyone who could help me with my codes?? Anyone's help will be much appreciated!


  •  

    Posting Permissions

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