Adding a link to image breaks jquery slider, help please!

Question

Hi All,

I am working on a site for a friend and trying to add a link to each image in a slide show. The slide show uses jquery and a script called easySlider1.7.js. Everything works just fine if the images are left alone, but when I try and wrap the images with a link, the slides no longer progress as they should. Here is the live website that is displaying the problem...

http://www.splits59.com/

Here is the html code for each of the slide images...

<div class="covercontent2box">
<div class="covercontent2">
<div id="slideshow">
 <a href="/ashton-jacket-p-107.html"><img src="img/homepagesummer2010_2.2-cut.jpg" class="active" /></a>
 <a href="/carly-coverup-p-106.html"><img src="img/homepagesummer2010_3.2-cut.jpg" /></a>
 <a href="/shop-online-bottoms-c-15_14.html"><img src="img/homepagesummer2010_1.2-cut.jpg" /></a>
</div>
</div>
</div>

And here is the jquery code on the page that controls the slider...

<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4500 );
});
  </script>

Does anyone have any idea why adding a link tag to the images breaks the slider? Any help or direction provided would be appreciated.

Thanks,

Devin

Answer 1

can you post the whole html page ? i think this is done because the jquery function slideSwitch() is only working on img tag not on anchor . so ifd you you will poas the whole html page then i can try.

Answer 2

The markupSlider example code is very specific in the instructions about how it's supposed to look: http://cssglobe.com/lab/easyslider1.7/js/easySlider1.7.js :

/*
 *  markup example for $("#slider").easySlider();
 *  
 *  <div id="slider">
 *      <ul>
 *          <li><img src="images/01.jpg" alt="" /></li>
 *          <li><img src="images/02.jpg" alt="" /></li>
 *          <li><img src="images/03.jpg" alt="" /></li>
 *          <li><img src="images/04.jpg" alt="" /></li>
 *          <li><img src="images/05.jpg" alt="" /></li>
 *      </ul>
 *  </div>
 *
 */

Try following the instructions. The structure of the code is important to making it work, I expect.