Errors writing image gallery

Question

I'm trying to write a simply image gallery element for a website and I'm having trouble with the code for silly reasons. I've never gotton on with JavaScript and have always found it a headache. I've tried various other image galleries but can't for the life of me get them to actually work correctly either

My current HTML code is like this:

<!DOCTYPE html>
<html>
    <head>
        <title> Test of slider </title>     
        <script type="text/javascript" src="slider.js"></script>
    </head>
    <body>
        <div class="slider" id="main">
            <img src="#" class="mainImage" />
            <div class="sliderImages" style="display: none;">
                <img src="companion.jpg"/>              
                <img src="cookie.jpg" />
                <img src="orange.jpg" />
                <img src="orangeWhole.jpg" />
            </div>
            <div class="sliderButtons">
                <a href="#" onclick="Slider.Slide('main', -1)"> Previous </a>
                <a href="#" onclick="Slider.Slide('main', 1)"> Next </a>
            </div>
        </div>      
    </body>
</html>

with the javascript like this:

this.Slider = new function(){
// Stores the indices for each slider on the page, referenced by their ID's
var indices = {};
var limits = {};
var images = {};

// Call this function after a major DOM change/change of page
this.SetUp = function(){        
    // obtain the sliders on the page
    // TODO restrict to those within body
    var sliders = document.getElementsByClassName('slider');
    // assign the indices for each slider to 0
    for(var i = 0; i < sliders.length; i++){
        indices[sliders[i].id] = 0;
        var sliderImages = document.getElementsByClassName('sliderImages');
        var imagesTemp = sliderImages[0].getElementsByTagName('img');
        images[sliders[i].id] = imagesTemp;
        limits[sliders[i].id] = imagesTemp.length;
    }
}

// advances a certain slider by the given amount (usually 1 or -1)
this.Slide = function(id, additive){
    if(indices && id){
        indices[id] = indices[id] + additive;

        // Check limits
        if(indices[id] < 0){
            indices[id] = limits[id] - 1;
        }
        if(indices[id] >= limits[id]){
            indices[id] = 0;
        }

        // alter img to be the new index
        document.getElementById(id).getElementsByClassName('mainImage')[0].src = images[id][indices[id]].src;
    }
}
}

Answer 1

for(var slider in sliders)
{
 // here slider is the index of the array. to get the object use sliders[slider]
}

then you can use 'getElementsByClassName' function

edit

U have included the slider.js on the top of the html. So first it loads the the js and tries to access the elements which are not yet created..Move the tag to the bottom of the page.

sliderImages is an array of divs with classname sliderImages. there is only one that satisfies.

 var sliderImages // is a array with 1 item. // to get the images use sliderImages[0].getElementsByTagName('img');

change

 this.Slide = new function(id, additive){

to

 this.Slide = function(id, additive){ // otherwise it will be called when the page is loaded with undefined values.

onclick of the link call with quotes
```
 Slider.Slide('main', 1) 
```

Answer 2

You are using a methode I do not know (or you forgot the "s")

 var sliderImages = slider.getElementByClassName('sliderImages');

I would use something like the code below. It is important sliderImages will be an array of anything that is of the class "silderImages"

 var sliderImages  =slider.getElementsByClassName("sliderImages")

Errors writing image gallery

Question

2 answers

solution1
1 ACCPTED 2013-06-03 13:07:43

solution2
0 2013-06-03 12:52:36

Errors writing image gallery

Question

2 answers

solution1 1 ACCPTED 2013-06-03 13:07:43

solution2 0 2013-06-03 12:52:36

solution1
1 ACCPTED 2013-06-03 13:07:43

solution2
0 2013-06-03 12:52:36