Question

I’ve made an image rotator/slide with jQuery which works fine when it’s just images, but if I wrap the img tag in an href then the slides won’t move past the first image.
I am still fairly new to jQuery, but I’m guessing it has something to do with the img:first/img:visible parts of the code since that looks for the images in the container, rather than the a tag. I’ve tried wrapping the img tags with a span and assigned the class to be what the code looks for, so whether there is just a image or an image with a link it won’t matter, but I can’t seem to get that to work (though I’m probably just doing it wrong).

Another thing to note is that the image list is dynamically made with PHP, and if I can get this to work, then the href around the images would be added by PHP if set – so it’s not always guaranteed that the images will always be a link or not, or it could be a mixture.

Anyway, here is the code snippet below; also here is a fiddle of it working as it is now without linked images.

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">  

    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_podcasts.jpg" alt="Slide 2" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_page_ed.jpg" alt="Slide 3" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_members.jpg" alt="Slide 4" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_more.jpg" alt="Slide 5" title="" />

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

</div>​

jQuery:

var Speed = 5000; //Time in Ms

(function imageTransition() {
setTimeout(function() {
    $('#image-container img:visible').fadeOut("slow"); // FADE OUT VISIBLE IMAGE
    if ($('#image-container img:visible').next('img').size("slow") < 1) {
        $('#image-container img:first').fadeIn(); // FADE IN FIRST IMAGE    
        $('#slide_caption').html('<span>' + $('#image-container img:first').attr('title') + '</span>');

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

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

—–EDIT—–

Since a new issue came up from the solution to this one, I’ve made a new question to deal with that, rather than it all be in the comments below: jQuery image slider caption issues, displaying wrong

Answer 1

Wrap each slide in a div, like this:

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

Then fade out and fade in the divs rather than the images themselves.