Question

The following code works until I add a link around the images. It works with the links removed and the ‘a’ between ‘slideshow img’ in the js and css removed.

In Head:

<script type="text/javascript">

function slideSwitch() {
var $active = $('#slideshow a img.active');

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

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow a 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() {
var $first = $('#slideshow a img:first');
    $first.addClass('active');    
setInterval( "slideSwitch()", 4500 );
});

</script>

In Body:

<div id="slideshow">
   <a href="/samplehome"><img src="/img/slide_three.jpg" width="948px" height="432px" border="0" alt="Three"/></a>
   <a href="/samplehome"><img src="/img/slide_two.jpg" width="948px" height="432px" border="0" alt="Two"/></a>
   <a href="/samplehome"><img src="/img/slide_one.jpg" width="948px" height="432px" border="0" alt="Ease In Motion"/></a>
</div>  

In CSS:

#slideshow, #sub_slideshow {
position:relative;
height:432px;
width: 948px;
display: block;
margin: 0;
padding: 0;
float: right;
}

#slideshow a img, #sub_slideshow a img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow a img.active, #sub_slideshow a img.active {
z-index:10;
opacity:1.0;
}

#slideshow a img.last-active , #sub_slideshow a img.last-active {
z-index:9;
}

Answer 1

I fixed your code and it worked. It got error because your jquery selector wasn’t right.

Change this line

var $next =  $active.next().length ? $active.next()
    : $('#slideshow a img:first');

to this

 var $next =  $active.parent().next().children("img").length ? $active.parent().next().children("img")
        : $('#slideshow a img:first');

Hope you find this useful!