Adding a link to image breaks jquery slider, help please!
- by lewisqic
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
