Question

I have a jQuery slideshow code that works fine with the following HTML structure:

<div id="slideshow">
    <div id="slideshowImages">
        <img src="image1.jpg" alt="" />
        <img src="image2.jpg" alt="" />
    </div>

    <div id="slideshowNav">
        <span id="slideshowLeft"><a href="#"><img src="images/slideshowLeft.png" alt="&gt;" /></a></span>
        <span id="slideshowRight"><a href="#"><img src="images/slideshowRight.png" alt="&lt;" /></a></span>
    </div><!-- /#slideshowNav -->
</div><!-- /#slideshow -->

Though now I wanted to modify it so that it’ll work with the same structure, but instead of just plain images, the images are now links. That is, the “meat” of the slideshow markup is now:

<a href="#"><img src="image1.jpg" alt="" /></a>
<a href="#"><img src="image2.jpg" alt="" /></a>

The jQuery code that makes the slideshow work is a bit lengthy, so I figured I’ll just post the necessary stuff. It works on this principle:

jQuery('#slideshowImages img:first').addClass('active');
jQuery('#slideshowImages img:last').addClass('lastImg');

var $active = jQuery('#slideshowImages img.active');

var $previous = $active.prev().length ? $active.prev(): jQuery('#slideshowImages img.lastImg');

    $active.animate({opacity:0.0}, 300, function() {
        //when done animating out, animate next in
        $previous.css({opacity:0.0})
            .animate({opacity: 1.0}, 400, function() {
            $active.removeClass('active');
            $previous.addClass('active');
    });
});

If I console.log() $active and $previous, I keep getting the same thing. Is there any way I can make the $previous variable actually be the previous image as before? I think .prev() now is making it go to the anchor link instead of the previous image, though I may be wrong.

To see a live version of this code, it can be viewed at http://engineercreativity.com/samples/daf. The site is not in English, though I don’t think that should affect anything.

Thanks for your help!
Amit

Answer 1

try to use as a relative selector <a> tag: it may help

jQuery('#slideshowImages a:first').addClass('active');

jQuery(‘#slideshowImages
a:last’).addClass(‘lastImg’);

var $active = jQuery(‘#slideshowImages
a.active’);

var $previous = $active.prev().length
? $active.prev():
jQuery(‘#slideshowImages a.lastImg’);

$active.animate({opacity:0.0}, 300, function() {
    //when done animating out, animate next in
    $previous.css({opacity:0.0})
        .animate({opacity: 1.0}, 400, function() {
        $active.removeClass('active');
        $previous.addClass('active');
}); });