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 Coder
    Join Date
    Feb 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow Code Won't Execute Properly!

    I have a feature in which users can navigate through a slide-show type thing where they hit BACK or NEXT and a graphic and a few strings of text are replaced using JavaScript. My problem I'm having here is that the text strings are being replaced, along with the link that I have set as being replaced, but the image that is supposed to be replaced as well does not get replaced. It stays the same no matter what you do.

    Code:
    var firstname=new Array()
    var lastname=new Array()
    var photos=new Array()
    var photoslink=new Array()
    var briefsummary=new Array()
    var posi=new Array()
    var which=0
    
    firstname[0] = "Tom"
    lastname[0] = "Jones"
    photos[0] = "userimages/175px-VanGogh_1887_Selbstbildnis.jpg"
    photoslink[2] = "ebinc.html?id=22"
    posi[0] = "Position1"
    briefsummary[0] = "This is the brief summary for TOM JONES."
    
    firstname[1] = "Jim"
    lastname[1] = "Doe"
    photos[1] = "userimages/222nis.jpg"
    photoslink[2] = "ebinc.html?id=23"
    posi[1] = "Position2"
    briefsummary[1] = "This is a brief summary for Jim Doe."
    
    firstname[2] = "Tina"
    lastname[2] = "Jones"
    photos[2] = "userimages/322nis.jpg"
    photoslink[2] = "ebinc.html?id=24"
    posi[2] = "Position3"
    briefsummary[2] = "This is the brief summary for Tina Jones."
    
    
    
    
    //Specify whether images should be linked or not (1=linked)
    var linkornot=1
    
    var preloadedimages=new Array()
    for (i=0;i<photos.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=photos[i]
    }
    
    function keeptrack(){
    window.status="Image "+(which+1)+" of "+photos.length
    }
    
    function backward(){
    if (which>0){
    which--
    document.getElementById("firstname").innerHTML = firstname[which]
    document.getElementById("lastname").innerHTML = lastname[which]
    document.getElementById("posi").innerHTML = posi[which]
    document.getElementById("briefsummary").innerHTML = briefsummary[which]
    document.getElementById("photoslink").innerHTML = photoslink[which]
    document.images.photoslider.src=photos[which]
    keeptrack()
    }
    }
    
    function forward(){
    if (which<photos.length-1){
    which++
    document.getElementById("firstname").innerHTML = firstname[which]
    document.getElementById("lastname").innerHTML = lastname[which]
    document.getElementById("posi").innerHTML = posi[which]
    document.getElementById("briefsummary").innerHTML = briefsummary[which]
    document.getElementById("photoslink").innerHTML = photoslink[which]
    document.images.photoslider.src=photos[which]
    keeptrack()
    }
    }
    
    function transport(){
    window.location=photoslink[which]
    }
    Here's the corresponding HTML:

    Code:
    <script>document.write('<a href="javascript:transport()"><img src="'+photos[0]+'" style="border: 1px solid #eae158; name="photoslider" border=0></a>')</script>
    <span id="firstname"><script>document.write(firstname[0])</script></span>
    <span id="lastname"><script>document.write(lastname[0])</script></span>
    <div id="posi"><span><script>document.write(posi[0])</script></span> </div>
    
    <a onclick="backward();return false" href="#"><img border="0" alt="" src="goback.gif" /></a>
    <a onclick="forward();return false" href="#"><img border="0" alt="" src="goforward.gif" /></a>
    
    <span id="briefsummary"><script>document.write(briefsummary[0])</script></span>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    In this line


    document.write('<a href="javascript:transport()"><img src="'+photos[0]+'" style="border: 1px solid #eae158 name="photoslider" border=0></a>')

    you have missed out the closing quote in your style declaration

    document.write('<a href="javascript:transport()"><img src="'+photos[0]+'" style="border: 1px solid #eae158" name="photoslider" border=0></a>')

    When this was corercted another error was thrown up because you do not have an element called photoslink, commenting these references out


    document.getElementById("photoslink").innerHTML = photoslink[which]


    does allow the script to work ok.

    On a side note you could make your code smaller and neater by using a multi-dimensional array instead of an array for each and go something like


    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">

     
    // firstname lastname photos photoslink posi briefsummary
     
    data=[
    [
    "Tom","Jones","userimages/175px-VanGogh_1887_Selbstbildnis.jpg","ebinc.html?id=22","Position1","This is the brief summary for TOM JONES."],
    [
    "Jim","Doe","userimages/222nis.jpg","ebinc.html?id=23","Position2","This is a brief summary for Jim Doe."],
    [
    "Tina","Jones","userimages/322nis.jpg","ebinc.html?id=24","Position3","This is the brief summary for Tina Jones."]
    ]

    var 
    count= -1
    var linkornot=//Specify whether images should be linked or not (1=linked)

    var preloadedimages=new Array()
    for (
    i=0;i<data.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=data[i][2]
    }

    function 
    nextImg(n){

    if(
    n==0){count--}
    else{
    count++}

    if(
    count==-1){count=0}
    if(
    count==data.length){count=data.length-1}

    document.getElementById("firstname").innerHTML data[count][0]
    document.getElementById("lastname").innerHTML data[count][1]
    document.images.photoslider.src=data[count][2]
    document.getElementById("briefsummary").innerHTML data[count][5]
    document.getElementById("posi").innerHTML data[count][4]

    window.status="Image "+(count+1)+" of "+data.length

    }

    function 
    transport(){
    window.location=photoslink[count][3]
    }

    </script>
    </HEAD>
    <BODY onload="nextImg(1)">

    <DIV style="text-align:center">

    <a href="javascript:transport()"><img src="userimages/175px-VanGogh_1887_Selbstbildnis.jpg" style="border: 1px solid #eae158" name="photoslider" border=0></a>


    <div style="margin-top:10px">
    <span id="firstname"></span> &nbsp; <span id="lastname"></span>
    </div>

    <div id="posi" style="margin-top:10px"></div>

    <div style="margin-top:10px">
    <a onclick="nextImg(0);return false" href="#"><img border="0" alt="" src="goback.gif" /></a>
    <a onclick="nextImg(1);return false" href="#"><img border="0" alt="" src="goforward.gif" /></a>
    </div>

    <div id="briefsummary" style="margin-top:10px"></div>

    </DIV>
    </BODY>
    </HTML> 
    Last edited by Mr J; 05-06-2006 at 09:59 AM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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