I am working on a rotating image slideshow for the homepage of my site. The slide show functions properly but when I try to make each image linked to another page the slide show only repeats the first image over and over again. I will paste my code below please help if you can.


<style type="text/css">
#wrap {
height: 400px;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow:hidden;
background-image:url(scroll/home-blank.png);

}

#wrap img {
display: none;
}

#wrap .is-showing {
display: inline;
}
</style>


<div id="wrap">
<img src="scroll/home2.png" width="950" height="400" alt="image 1" class="is-showing" />
<img src="scroll/home1.png" width="950" height="400" alt="image 2" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
slideShow();
});

function slideShow() {

var showing = $('#wrap .is-showing');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
/*
* We could have written the above statement the long way to achieve the same results
*
* if(showing.next().length) {
* showing.next();
* } else {
* showing.parent().children(':first');
* }
*/
showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');

setTimeout(slideShow, 5000);
}



</script>





Please let me know if you have any suggestions on how I can get each image to be linked to another page on my site.

Thanks!