Image rotation using jQuery but anchor remains the same

Question

I have set up an image slideshow with captions using jQuery. The entire image and caption div is surrounded by a linked anchor. For some reason even though the slideshow function works fine the anchor remains the same as the last one set. i.e. using the example below, the slideshow content will only ever link to "shows/".

<div id="mainfeature"> 
        <a href="http://www.google.com" class="show feature">
     <img src="http://union.ic.ac.uk/arts/mtsoc/wp-content/uploads/2009/07/sweetcharity_front.png" />
     <div class="caption">
      <span class="tag">2009 Tour Show</span>
      <span class="title">Sweet Charity</span>
      <span class="detail">29th July until 8th August</span>
     </div></a>
     <a href="shows/" class="feature">
     <img src="http://union.ic.ac.uk/arts/mtsoc/wp-content/gallery/2009-forum/Picture%20044.jpg" width="650px" />
     <div class="caption">
      <span class="tag">2009 Spring Show</span>
      <span class="title">A Funny Thing Happened on the Way to the Forum</span>
      <span class="detail"></span>
     </div></a>
</div>

See the working example at http://union.ic.ac.uk/arts/mtsoc/

Just so you don't have to go and dig it out here is the javascript for the slideshow:

function slideShow() {

    //Set the opacity of all images to 0
    $('#mainfeature a').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('#mainfeature a:first').css({opacity: 1.0});

    //Set the caption background to semi-transparent
    $('#mainfeature .caption').css({opacity: 0.7});

    //Call the gallery function to run the slideshow
    setInterval('main_gallery()',8000);
}

function main_gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#mainfeature a.show')?  $('#mainfeature a.show') : $('#mainfeature a:first'));

    //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().hasClass('caption'))? $('#mainfeature a:first') :current.next()) : $('#mainfeature a: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: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

    //Set the opacity to 0
    $('#mainfeature .caption').animate({opacity: 0.0}, 500); 

    //Animate the caption, opacity to 0.7
    $('#mainfeature .caption').animate({opacity: 0.7}, 1000 );
}

Any ideas?

Answer 1

Turns out that the z-index of the anchor needed to change as it was rotated to. I did this using using the show class so the js didn't have to change.