Hi,

I'm creating a simple slideshow. I have it working, but now I also want the photos to crossfade. I can't find any jquery plugin that I can get to work (and I have tried many). Any suggestions?

I'm really new to this, so as simple as possible would be great!
Thanks.

Here's my current code:

<style>

#slideshow {
position:relative;
height:525px;
width: 950px;
}
#slideshow img {
position:absolute;
top:0px;
left:0px;
}
.style32 {color: #333333
}
</style>


<script src="jquery.js"></script>
<script>
function init() {
$('#slideshow img').hide();

$('#slideshow img:first').show();
}
function slide() {
var $top = $('#slideshow img:visible');

var $next;
if($top.next().length > 0)
$next = $top.next();

else
$next = $('#slideshow img:first');

$top.hide();

$next.show();
}

$(document).ready(function() {
init();
setInterval( "slide()", 3000 );
});
</script>

<div class="style32" id="slideshow">
<img src="images/slides/1.jpg" width="950" height="525" />
<img src="images/slides/2.jpg" width="950" height="525" />
<img src="images/slides/3.jpg" width="950" height="525" />
<img src="images/slides/4.jpg" width="950" height="525" />
<img src="images/slides/5.jpg" width="950" height="525" />
<img src="images/slides/6.jpg" width="950" height="525" />
<img src="images/slides/7.jpg" width="950" height="525" />
</div>

Have a look here (http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/) for one approach.