Home/ Questions/Q 8608891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T03:44:03+00:00

I’ve almost got it working, it’s just the first and second caption that messes

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0