Question

I am trying to approve the slide show I use below,

here is the html,

<!--slide-->
<div id="slide">

    <ul class="slide">
        <li><img src="contents/slide-1.jpg" alt="slide 1"/></li>
        <li><img src="contents/slide-2.jpg" alt="slide 2"/></li>
        <li><img src="contents/slide-3.jpg" alt="slide 3"/></li>
    </ul>

</div>
<!--slide-->

becos I might have a number of slide sets I want to loop them, or I might change the id name from time to time, so I am thinking to run the functions in this method rather than changing the code in the function everytime for different situation,

run_slide('#slide');

so I can do a multiple calls from the same functions,

run_slide('#slide-2');

run_slide('#slide-3');

below is the function, the first part of the function runs ok, but the second part of it isn’t ok when I want to pass the id through interval – setInterval('loop_slide('+target_slide+')',5000);

I have this error message on my Firefox browser which I don’t quite understand it,

illegal character [Break On This
Error] loop_slide(#slide)

function run_slide(target_slide) {

    //add a class the the first element
    $('li:first-child',target_slide).addClass('active');

    //Set the opacity of all images to 0
    $('.slide li').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('.slide li:first-child').css({opacity: 1.0});

    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('loop_slide('+target_slide+')',5000);
}

function loop_slide(target_slide) {

    //var target_slide = $('#slide');

    //if no IMGs have the show class, grab the first image
    var current = ($('.slide li.active')?  $('.slide li.active') : $('.slide li:first-child'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('.slide li:first-child') :current.next()) : $('.slide li:first-child')); 

    //Set the fade in effect for the next image, show class has higher z-index
    current.addClass('last-active');
    next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function(){
        current.animate({opacity: 0.0}, 1000).removeClass('active last-active');

        $('.caption p',target_slide).html(caption_description);
    });

}

how can I fix it? why can’t I pass the id into the second function but I can in the first function?

many thanks.

Answer 1

setInterval('loop_slide('+target_slide+')',5000);

seems to be the problem, as the variable you pass is parsed to loop_slide(#slide) instead of loop_slide(‘#slide’) hence eval fails.

simple solution:

setInterval('loop_slide(\''+target_slide+'\')',5000);

besides that: if you are creating this slider for learning purpose it could be a good idea to write it as a jquery plugin – see http://docs.jquery.com/Plugins/Authoring.