...

View Full Version : Slideshow Code Won't Execute Properly!



baaaan
05-05-2006, 06:10 PM
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.


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:


<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>

Mr J
05-06-2006, 10:19 AM
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




<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=1 //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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum