...

View Full Version : jQuery Need help with simple slideshow crossfade



eyeheartart
12-27-2010, 09:56 PM
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>

SB65
12-28-2010, 10:46 AM
Have a look here (http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/) for one approach.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum