Issue with Image Slideshow, Any ideas?

[steveradz182]

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!

[rtrethewey]

Your JavaScript is written in a way that does not allow you to add elements like <a>nchor tags. It relies on there only being <img> tags. Try a different slideshow script.

[steveradz182]

Thanks, do you have one you would recommend I haven't been able to find any that are easy for me to work with.

[auntnini]

2 old but good and easy JavaScriptKit slidshows are (1) /* Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)*/
/*see forum http://www.codingforums.com/showthread.php?t=143543 for adding caption/title August08 and onMouseOver PAUSE Aug08*/ used at http://www.jacquimorgan.com and

(2) FPMC JavaScript Slideshow (increment preload image) http://www.javascriptkit.com/script/...entslide.shtml used at http://www.josephdenaro.com

[Colton3310]

Thanks very much. But the answer is right for you about Image Slideshow