jQuery image slider caption issues, displaying wrong

Question

I've almost got it working, it's just the first and second caption that messes up and I'm not sure why! I've played with the if statement and the :visible selector etc to see what makes it change, but can't understand it.
You can see this fiddle to what I mean: jsfiddle.net/MrLuke/QSj4k/33

If there's a first caption it shows, but the second will not show, or it will show the 3rd caption in place of 2nd, as well as display it third. It's confusing me. It just seems that the 1st and 2nd caption mess up, and then any others after that will display correctly.

//DISPLAY OR HIDE FIRST CAPTION
var title = $('.slide:not("first")').children('img').attr('title');
if (title == "") {
    $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
} else {
    $('#slide_caption').fadeIn();
    $('#slide_caption').html('<span>' + title + '</span>'); //SHOW ALT TEXT CAPTION
}

(function imageTransition() {
setTimeout(function() {
    $('.slide:visible').fadeOut("slow"); // FADE OUT VISIBLE IMAGE
    if ($('.slide:visible').next('.slide').size("slow") < 1) {
        $('.slide:first').fadeIn(); // FADE IN FIRST IMAGE    

        var title = $('.slide:visible').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO TITLE TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }
    } else {
        $('.slide:visible').next('.slide').fadeIn("slow"); // FADE IN NEXT IMAGE 

        var title = $('.slide:visible').next('.slide').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO TITLE TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }               

    }

    imageTransition(); //TRIGGER FUNCTION AGAIN
}, Speed); //Xms INTERVAL BEFORE FUNCTION RUNS AGAIN
})();

This is the part that looks to see if the image has a title attribute, and then inserts it between a span tag to show the caption:

var title = $('.slide:visible').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }

And the HTML:

<div id="slide_wrapper">

    <p id="slide_controls">
        <span id="prev-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_prev.png" alt="Previous" /></span>
        <span id="next-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_next.png" alt="Next" /></span>
    </p>


<div id="image-container">  

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    </div>

    <div class="slide">
        <a href="#">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_podcasts.jpg" alt="Slide 2" title="2" />
        </a>
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_page_ed.jpg" alt="Slide 3" title="3" />
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_members.jpg" alt="Slide 4" title="4" />
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_more.jpg" alt="Slide 5" title="5" />
    </div>

    <p id="slide_caption"><span></span></p>
</div>

</div>

I've mentioned it already, but just in case, here's the fiddle to see a live example (and the issue)
Can anyone see why the first and second caption don't work like the rest?

well your first caption don't show is because you have no caption for the first slide — Huangism
@Huangism - I know that here, I was changing and experimenting with and without it — MrLewk

Huangism Huangism · Accepted Answer · 2012-10-01T17:23:25

Here

http://jsfiddle.net/QSj4k/35/

I added caption to first slide, and in the 2nd slide, you had an anchor tag which I removed and it works. I have not tested first caption empty yet

Just tested first empty it works, you just had that extra anchor. Because of that anchor img was no longer .children()(this is immediate children) of .slide so it did not work

If you really want the anchor then replace .children with .find like here http://jsfiddle.net/QSj4k/37/

jQuery image slider caption issues, displaying wrong

1 Answers