Simple Image Gallery using Javascript

[kasse]

I´m working on (and now using) the following image gallery on my website. There's no bell's and whistles just the basic utilities: Forward, backward, start/stop auto, set speed, loading animation.

The slideshow as described below is optimized for pictures that are all 400px in height, but you can easily change the code to fit your needs.
The html is as follows:

<div id="mainSlideshow">
    <div id="navSection">
        <img id="prevSlide" src="/pics/slideShow/prevSlide.jpg" />
        <form id="runSlide">
            Auto <input type="checkbox" name="check" /> 
            Speed <select name="speed">
                <option value="1">1 sek</option>
                <option value="2">2 sek</option>
                <option value="3">3 sek</option>
                <option value="4">4 sek</option>
                <option value="5">5 sek</option>
                <option value="6">6 sek</option>
                <option value="7">7 sek</option>
                <option value="8">8 sek</option>
            </select>
        </form>
        <span id="slideNum"></span>
        <img id="nextSlide" src="/pics/slideShow/nextSlide.jpg" />
    </div>
    <ul> 
        <li>
            <img src="/yourimagefolder/image1.jpg" alt="mainslide" />
            <h3>Imagecaption</h3>
        </li>
        etc
        etc
        ...
    </ul>
</div>

The two images nextSlide.jpg and prevSlide.jpg are 50px x 50px images for forward/backward navigation.
On my site I use php to create the list and to scan my image folder. But for a basic non-php site you will have to make the <li></li> items yourself or in some other way :)

I use CSS in a separate file to style the gallery:

#mainSlideshow {
 margin: 5px auto;
 height: 485px;
 width: 600px;
 position: relative;
 background: url(/pics/slideShow/loading.gif) no-repeat 50% 50%;
 color: white;
 font-size: 12px;
}
#mainSlideshow * {
 margin: 0;
 padding: 0;
}
#mainSlideshow ul {
 list-style-type: none;
}
#mainSlideshow ul li {
 display:none;
 text-align:center;
}
#mainSlideshow ul li h3 {
 padding: 5px 60px 0px 60px;
 font-style: italic;
 font-size: 11px;
}
#prevSlide {
 position: absolute;
 top: 405px;
 left: 5px;
 display: inline;
 cursor: pointer;
}
#nextSlide {
 position: absolute;
 top: 405px;
 right: 5px;
 display: inline;
 cursor: pointer;
}
#slideNum {
 position: absolute;
 top: 460px;
 right: 5px;
}
#runSlide {
 position: absolute;
 top: 460px;
 left: 5px;
}

I position everything here and hide all the <li> items and let javascript do its magic next. The ul background I set (loading.gif) if a small animation that will be visible while the images are loading. As soon as the first image shows the gif will be hidden.

Now for the javascript which is also in a separate file:

window.onload = initialize;
function initialize() {
    var slideNum = 0;
    var target = document.getElementById("mainSlideshow");
    var slideArray = target.getElementsByTagName("li");
    var totalSlides = slideArray.length;
    var nSlide = document.getElementById("nextSlide");
    var pSlide = document.getElementById("prevSlide");
    var rSlide = document.getElementById("runSlide").check;
    var sSlide = document.getElementById("runSlide").speed;
    nSlide.onclick = function() {nextSlide();};
    pSlide.onclick = function() {prevSlide();};
    rSlide.onclick = function() {checkStatus();};
    sSlide.onchange = function() {setSpeed();};
    slideNumber();
    showFirst();
    resetForm();
    setSpeed();
    function resetForm() {
        rSlide.checked = false;
        sSlide.value = 3;
    }
    function setSpeed() {
        var newSpeed = sSlide.value;
        if (rSlide.checked) {
            clearInterval(timerID1);
            interval = newSpeed * 1000;
            runSlide();
        } else {
            interval = newSpeed * 1000;
        }
    }       
    function nextSlide() {
        slideArray[slideNum].style.display = "none";
        if (slideNum == totalSlides - 1) {
            slideNum = 0;
        } else {
            slideNum++;
        }
        slideArray[slideNum].style.display = "block";
        slideNumber();
    }
    function prevSlide() {
        slideArray[slideNum].style.display = "none";
        if (slideNum == 0) {
            slideNum = totalSlides - 1;
        } else {
            slideNum--;
        }
        slideArray[slideNum].style.display = "block";
        slideNumber();
    }
    function runSlide() {
        timerID1 = setInterval(function() {nextSlide()}, interval);
    }
    function checkStatus() {
        if (rSlide.checked == true) {
            runSlide();
        } else {
            clearInterval(timerID1);
        }
    }
    function showFirst() {
        slideArray[slideNum].style.display = "block";
    }
    function slideNumber() {
        var oTarget = document.getElementById("slideNum");
        while (oTarget.firstChild) {
            oTarget.removeChild(oTarget.firstChild);
        }
        var oNew = document.createTextNode((slideNum+1)+"/"+totalSlides);
        oTarget.appendChild(oNew);
    }
}

In the javascript I set up hooks for the ID's and setup all the needed functions.
The resetForm() function sets the default to auto-off and speed = 5. You can change this ofc. to your liking.

What I´m looking for are ideas to streamline the code or CSS. The slideshow works fine, but as my first javascript project it would be nice with feedback :-)
/kasse

The slideshow as described below is optimized for pictures that are all 400px in height, but you can easily change the code to fit your needs.

I'm not sure if this is a code snippet or a issue you are having.

If this is a code snippet ... Thanks for sharing.