Question

I’m a jQuery newb and I’ve been trying to create a custom slideshow widget for a page that I’m developing. I’ve been able to get all the basic bits working (autoplay, pause, captions) but I’ve hit a roadblock with the pagination (allows you to pick the slide). For whatever reason once I try to select a slide the image and the captions disappear. No errors are thrown it just refuses to switch the image or the caption. Heres’ the code:

This bit of code starts the slideshow and controls it

$(document).ready(function () {
    var speed = 2000;                            
    var state = 1;                                          

       $('#gallery li, #caption li').css('position','absolute');         

       $('#gallery li:first, #caption li:first').addClass('visible');             

       var timer = setInterval('autoSlideshow(-1)', speed);             

    $('#controls a.playpause').toggle(
        function () {
            $(this).css('background-image','url(images/play.png)');  
            clearInterval(timer);
            state = 0;
            return false;  
        },
        function() {        
            $(this).css('background-image','url(images/pause.png)');
            timer = setInterval('autoSlideshow(-1)', speed);
            state = 1;
            return false; 
        }
    );           

    $('#controls a.pagination').click( function(){
        var slide = $(this).index();

        slide-=1;
        clearInterval(timer);   
        timer = setInterval(function(){autoSlideshow(slide);}, speed);


    });


    $('#gallery, #caption').hover(                               
        function() {
            if(state == 1)  
                clearInterval(timer); 
        },   
        function() {
            if (state == 1)  
                timer = setInterval('autoSlideshow(-1)', speed); 
        }  
    );


});

This bit does the fading in and out of the slides

    function autoSlideshow(mode) {
    var currentImage = $('#gallery li.visible');                                   
    var currentCaption = $('#caption li.visible');

    if(mode == -1){
        var nextImage = currentImage.next().length ? currentImage.next() :        
                    currentImage.siblings(':first');        
        var nextCaption = currentCaption.next().length ? currentCaption.next() :          //Determine the next slide
                    currentCaption.siblings(':first');
    }
    else{
        var nextImage = $('#gallery li:eq(mode)');   //I'm pretty sure these two lines are the problem
        var nextCaption = $('#caption li:eq(mode)'); //
    }  

    currentImage.fadeOut(250).removeClass('visible');
    nextImage.fadeIn(250).addClass('visible');  
    currentCaption.fadeOut(250).removeClass('visible');
    nextCaption.fadeIn(250).addClass('visible');


}

Any help you guys could give would be appreciated.

Mo

Answer 1

string constant vs variable…. try this:

    var nextImage = $('#gallery li:eq('+mode+')'); 
    var nextCaption = $('#caption li:eq('+mode+')');

This should convert mode to a string thus eq will get a number instead of the word “mode”.

(NB: I just looked at the line you highlighted, I did not check or test the rest of the program, there may be other problems.)

edit to answer question below

You are just looking at it sideways. Remember ‘blah blah blah’ is a string constant. It is not evaluated. It stays static and does not change.

Another way to look at it is to remember the difference between the compiler and the jQuery function. This is what the compiler sees in my statement

Take the string constant '#caption li:eq(' append to it the value of the variable mode (implicit conversion) then append to that the string constant ')' pass the result to the jQuery function.

Thus the jQuery function will get called with the following string parameter (if mode had the value 9):

'#caption li:eq(9)'

In your code jQuery was called with the following string parameter

'#caption li:eq(mode)'

Does this make it clear?