Adding image link breaks jquery slider, please help!
I am working on a site for a friend and am trying to add a link to every image in a slideshow. The slideshow uses jquery and a script called easySlider1.7.js. Everything works fine if the images are left alone, but when I try to wrap the images with a link, the slides no longer advance as they should. Here is a live site that displays the problem ...
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 ideas why adding a link tag to images breaks the slider? Any help or direction that is provided would be appreciated.
Thanks,
Devin
a source to share
The markupSlider example code is very specific in the instructions on how it should 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 to follow the instructions. I think the structure of the code is important to make it work.
a source to share