I've been sitting at my computer screen for hours now... I've generated a slideshow and I'm trying my darndest to change the image of the active links to show what slide the user is on. I've got that covered - my problem is that I can't seem to accurately compare the variable of the current slide to the counter I've got. Here's my code. Any suggestions would be absolutely BRILLIANT!
<script type="text/javascript">
var photos=new Array()
var photoslink=new Array()
var which=1
var currNum = 1
var imageNum=1
//define images. You can have as many as you want:
photosї1]="images/ir1.jpg";
photosї2]="images/ir3.jpg";
photosї3]="images/ir4.jpg";
photosї4]="images/ir5.jpg";
photosї5]="images/ir6.jpg";
photosї6]='images/ir7.jpg';
photosї7]='images/ir8.jpg';
photosї8]='images/ir9.jpg';
photosї9]='images/ir10.jpg';
photosї10]='images/ir11.jpg';
photosї11]='images/ir12.jpg';
photosї12]='images/ir13.jpg';
photosї13]='images/ir14.jpg';
photosї14]='images/ir15.jpg';
photosї15]='images/ir16.jpg';
photosї16]='images/ir17.jpg';
photosї17]='images/ir18.jpg';
photosї18]='images/ir19.jpg';
photosї19]='images/ir20.jpg';
photosї20]='images/ir21.jpg';
photosї21]='images/ir22.jpg';
photosї22]='images/ir23.jpg';
photosї23]='images/ir24.jpg';
photosї24]='images/ir25.jpg';
photosї25]='images/ir26.jpg';
photosї26]='images/ir27.jpg';
photosї27]='images/ir28.jpg';
photosї28]='images/ir29.jpg';
photosї29]='images/ir30.jpg';
photosї30]='images/ir31.jpg';
photosї31]='images/ir32.jpg';
photosї32]='images/ir33.jpg';
photosї33]='images/ir34.jpg';
photosї34]='images/ir35.jpg';
photosї35]='images/ir36.jpg';
photosї36]='images/ir37.jpg';
photosї37]='images/ir38.jpg';
photosї38]="images/ir39.jpg";
//Specify whether images should be linked or not (1=linked)
var linkornot=0
//do NOT edit pass this line
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimagesїi]=new Image()
preloadedimagesїi].src=photosїi]
}
function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition = 7
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}
function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}
function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}
function backward(){
if(which==0) which =photos.length-1
if (which>1){
which--
document.images.photoslider.src=photosїwhich]
counter()
keeptrack()
}
}
function forward(){
if(which>photos.length-1) which = 0
if (which<photos.length-1){
which++
document.images.photoslider.src=photosїwhich]
counter()
keeptrack()
}
}
function photoNum(num){
which = num
document.images.photoslider.src=photosїwhich]
counter()
keeptrack()
}
function transport(){
window.location=photoslinkїwhich]
}
function counter()
{
imageNum++
}
function showLinks()
{
for (var i=1; i <= 38; i++ ) {
if(i == imageNum){
document.write('<a href="javascript:photoNum('+i+');" style="background:#435607;color:#ffffff;">'+i+'</a> ');
}
if(i==12)
{
document.write('<br /><a href="javascript:photoNum('+i+');">'+i+'</a> ')
}
if(i==24)
{
document.write('<br /><a href="javascript:photoNum('+i+');">'+i+'</a> ')
}
else
{
document.write('<a href="javascript:photoNum('+i+');">'+i+'</a> ')
}
}
}
</script>
Then, within the body, I call the showLinks() function:
In fact imageNum starts at 1 and just goes up by 1 every time a user clicks the link. Nothing does anything with it except for the counter() function. Could you explain exactly why you need to compare the variables or correct me if I'm wrong and I'll try and help you out.
Sorry - I haven't been very good at explaining thus far. Before I do, I've posted my new and revised code below. The application is a slide show generator. The client would like to have links on the page so that, in addition to moving forward and backward a slide, the user can go to a particular slide in the presentation using the numbered links generated. Thus far, the code works. However, they would like to see an indication within the numbered links identifying what slide the user is presently viewing. I am trying to create code that generates a different background colour and text colour for the numeric value of the link that matches the numeric value of the slide. I hope that makes sense.
var photos=new Array()
var photoslink=new Array()
var which=0
var num=0
//define images. You can have as many as you want:
photosї0]="images/ir1.jpg";
photosї1]="images/ir2.jpg";
photosї2]="images/ir3.jpg";
photosї3]="images/ir4.jpg";
photosї4]="images/ir5.jpg";
photosї5]='images/ir6.jpg';
photosї6]='images/ir7.jpg';
photosї7]='images/ir8.jpg';
photosї8]='images/ir9.jpg';
photosї9]='images/ir10.jpg';
photosї10]='images/ir11.jpg';
photosї11]='images/ir12.jpg';
photosї12]='images/ir13.jpg';
photosї13]='images/ir14.jpg';
photosї14]='images/ir15.jpg';
photosї15]='images/ir16.jpg';
photosї16]='images/ir17.jpg';
photosї17]='images/ir18.jpg';
photosї18]='images/ir19.jpg';
photosї19]='images/ir20.jpg';
photosї20]='images/ir21.jpg';
photosї21]='images/ir22.jpg';
photosї22]='images/ir23.jpg';
photosї23]='images/ir24.jpg';
photosї24]='images/ir25.jpg';
photosї25]='images/ir26.jpg';
photosї26]='images/ir27.jpg';
photosї27]='images/ir28.jpg';
photosї28]='images/ir29.jpg';
photosї29]='images/ir30.jpg';
photosї30]='images/ir31.jpg';
photosї31]='images/ir32.jpg';
photosї32]='images/ir33.jpg';
photosї33]='images/ir34.jpg';
photosї34]='images/ir35.jpg';
photosї35]='images/ir36.jpg';
photosї36]='images/ir37.jpg';
photosї37]='images/ir38.jpg';
photosї38]='images/ir39.jpg';
//Specify whether images should be linked or not (1=linked)
var linkornot=0
//do NOT edit pass this line
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 =photos.length-1
if (which>1){
which--
document.images.photoslider.src=photosїwhich]
keeptrack()
}
}
function forward(){
if(which>photos.length-1) which = 0
if (which<photos.length-1){
which++
document.images.photoslider.src=photosїwhich]
keeptrack()
}
}
function photoNum(num){
which = num
document.images.photoslider.src=photosїwhich]
keeptrack()
}
function showLinks()
{
document.write(num)
for (linkNum=0;linkNum<=38;linkNum++)
{
if (linkNum == num)
{
document.write('<a href="javascript:photoNum('+linkNum+')" style="background:#435607;color:#ffffff;">'+linkNum+'</a> ')
}
else
{
document.write('<a href="javascript:photoNum('+linkNum+')">'+linkNum+'</a> ')
}
}
}
function transport(){
window.location=photoslinkїwhich]
}
within the body of the page I have the following code:
as well as links that call the page forward and backward script. These links also work fine. Its just trying to match the value of the current slide with the value of linkNum so that I can identify that link with different highlighting features.
Here you go. You need to call the function showLinks() everytime you need to update which one is highlighted. I've used innerHTML instead of document.write in here but I hope it seems clear why it wasn't working before
<html>
<head>
<script language="javascript">
<!-- Hide
var photos=new Array()
var photoslink=new Array()
var which=1
var num=0
//define images. You can have as many as you want:
photosї0]="ir1.jpg";
photosї1]="ir2.jpg";
photosї2]="ir3.jpg";
//Specify whether images should be linked or not (1=linked)
var linkornot=0
//do NOT edit pass this line
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+" of "+photos.length
}
function backward(){
if(which==0) which =photos.length-1
if (which>1){
which--
document.images.photoslider.src=photosїwhich]
keeptrack()
}
}
function forward(){
if(which>photos.length-1) which = 0
if (which<photos.length-1){
which++
document.images.photoslider.src=photosїwhich]
keeptrack()
}
}
function photoNum(num){
which = num
document.images.photoslider.src=photosїwhich-1]
keeptrack()
}
function showLinks()
{
nav = document.getElementById('linkSpan')
nav.innerHTML = ''
for (linkNum=1;linkNum<=photos.length;linkNum++)
{
if (linkNum == which)
{
nav.innerHTML += '<a href="javascript:photoNum('+linkNum+'); showLinks()" style="background:#435607;color:#ffffff;">'+linkNum+'</a> '
}
else
{
nav.innerHTML += '<a href="javascript:photoNum('+linkNum+'); showLinks()">'+linkNum+'</a> '
}
}
}
function transport(){
window.location=photoslinkїwhich]
}
// End -->
</script>
</head>
<body bgcolor="#333333">
<span id="linkSpan"><script>showLinks()</script></span>
<p>
<img src="ir1.jpg" name="photoslider">
</body>
</html>