jQuery photo slide show bug
<p>I am using some excellent code for a photo slide show from <a href="http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited" rel="nofollow">http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited</a> .</p>

<p>The way this slide show gallery works is there are mulitple list items in an UL and within each list item is an image. sequentially one list item has the class .show and this changes the css of that list item so opaque is set to 1. Making it visible. A timer determines when the list items change so the next list item within the hierarchy has .show. Once is reaches the last list item, it goes back to the first item.</p>

<p>The problem I have with my code is that when the page first loads up, the first image displays briefly before changing to the second image. After this happens, the slide show behaves correctly.</p>

<p>In bold are the the important lines of code. First I use jquery to assign .class to first list item. The second line of code in bold is a conditional statement. If no image has .show, assign it to the first list item. This is when the code doesn't work as intended.</p>

<hr>

<pre><code>$(document).ready(function (e) {
// Execute the slideShow
slideShow(6000);
thumbInt(); // Assign int to thumbnail list items
gallery();

function clearShowClass() {
    setTimeout(timedInterval, 1000);
};

function timedInterval() {
    $('ul.slideshow li').not('.show').css("opacity", 0);
    clearShowClass();
}

function slideShow(speed) {
    //Set the opacity of all images to 0
    $('ul.slideshow li').css({
        opacity: 0.0
    });
    //Get the first image and display it (set it to full opacity)
    * * $('ul.slideshow li:first').css({
        opacity: 1.0
    }).addClass('show'); * *
    //Get the first thumbnail and change css
    $('#footer li:first').addClass('highlight');
    //Call the gallery function to run the slideshow
    var timer = setInterval('gallery()', speed);
    //Pause the slideshow on mouse over content
    $('#footer, ul.slideshow').hover(

    function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval('gallery()', speed);
    });
}

function gallery() {
    //if no IMGs have the show class, grab the first image
    * *
    var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); * *

    if (current.queue('fx').length == 0) {
        // grab next image and animate code in here
    }
    //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().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({
        opacity: 0.0
    }).addClass('show').animate({
        opacity: 4.0
    }, 1000);
    // Hide the current image
    current.animate({
        opacity: 0.0
    }, 1000).removeClass('show');
    //if no thumbnails have the highlight class, grab the first thumbnail
    var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first'));
    var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li'));

    nextThumb.addClass('highlight');
    currentThumb.removeClass('highlight');
}
</code></pre>

<p>Any suggestions on how to fix this would be most welcome.</p>

<p>Nick</p>
