JavaScript help required

[michaelmaud]

I am currently working on a photo gallery which loads in images on the fly. upon the page loading, it scans the directory in PHP and builds an array of the image names in a JavaScript Array format i.e. Array("01.jpg', "02.jpg", ...)

I am new to using Javascript so don't really know the terms for things.

I have two navigation cursors which then cycle through the array.

What I want is to be able to display the image number and the total number of images for each image, and obviously change it as the image changes. i.e. this is image 1 of 10, which changes with the image

I have done this as a seperate function, though i don't know if it works like this, or if there is a more simple way of printing the index order of the array.

the script appears below

<SCRIPT LANGUAGE="JavaScript">
<!--
// test the browser to make sure it's ok
var browserName = navigator.appName;
var browserVer = parseInt(navigator.appVersion);
var browserOK = (((browserName == "Netscape") && (browserVer >= 3)) || 
    ((browserName == "Microsoft Internet Explorer") && (browserVer >= 4)));
 
// URLs of images in slide show
var slideURL = <?php echo ($img_list); ?>
// delay between slides (in milliseconds)
var slideDelay = 100000;
// Index of the current slide
var curSlide = -1;
// timeout id for the current setTimeout command
var curTimeout;
var picTotal = <?php echo ($i-2); ?>;
var curPic = 1;
 
function showSlide() {
    if (browserOK) {
        // alert(slideURL.length);
        curSlide = ((curSlide + 1) % slideURL.length);
        // alert(curSlide);
        document.images["slideImg"].src = slideURL[curSlide];
        curTimeout = setTimeout("showSlide()", slideDelay);
    } else {
        // show an error message for older browsers
        alert("This page requires Netscape 3.0+ or IE 4.0+");
    }
}
function increment_picNum()
{
    if (curPic < picTotal)
        {
            curPic= (curPic+1);
        }
    else
        {
            curPic=1;
        }
    var curPic=document.getElementById("pic_number");
}
 
function decrement_picNum()
{
    if (curPic>1)
        {
            curPic=(curPic-1);
        }
    else
        {
            curPic=picTotal;
        }
    var curPic=document.getElementById("pic_number");
}
 
 
//function of one cursor
function goNext() {
    if (browserOK){
        clearTimeout(curTimeout);
        showSlide();
        increment_picNum();
    }
}
//function of the other
function goPrev() {
    if (browserOK) {
        clearTimeout(curTimeout);
        curSlide = (((curSlide - 2) + slideURL.length) % slideURL.length);
        showSlide();
        decrement_picNum();
    }
}
// -->
</SCRIPT>

The filenames are indexed as above.

I've been scratching my head for hours on this one, please help!

[Banfa]

You hold the picture number variable curPic and alter it using increment_picNum and decrement_picNum.

this is however completely unneccessary, the picture number is already available in the variable curSlide (picture number = curSlide+1).

Remove all references to

increment_picNum
decrement_picNum
curPic
picTotal

in showSlide add a line similar to

document.getElementById("Subtitle").innerHtml = "Picture " + (curSlide+1) + " of " + slideURL.length;
 

and in the html add

[html]
<div id="Subtitle"><div>
[/html]

close to the slideImg element unless of course your pic_number element is holding that position :D.

[michaelmaud]

You hold the picture number variable curPic and alter it using increment_picNum and decrement_picNum.

this is however completely unneccessary, the picture number is already available in the variable curSlide (picture number = curSlide+1).

Remove all references to

increment_picNum
decrement_picNum
curPic
picTotal

in showSlide add a line similar to

document.getElementById("Subtitle").innerHtml = "Picture " + (curSlide+1) + " of " + slideURL.length;
 

and in the html add

[html]
<div id="Subtitle"><div>
[/html]

close to the slideImg element unless of course your pic_number element is holding that position :D.

Thanks that works like a dream now, the only slight modification was the innerHtml should be innerHTML

Thanks again for that