Jquery Cycle using only one caption
Hi, I don't know if someone else had the same question, but I'd like to have only 1 caption that slides in and
stays on top while the images are fading in the background.
Thanks everyone in advance
here is the code (I added an "if" statement):
<script type="text/javascript">
// edit here
var slider_elegant_easing = null,
slider_elegant_fx = 'fade',
slider_elegant_speed = 500,
slider_elegant_timeout = 5000,
slider_elegant_caption_speed = 500;
numImages = $("#slider img").length;
// end editing
if (numImages > 1) {
$("#slider ul").cycle({
easing : slider_elegant_easing,
fx : slider_elegant_fx,
speed : slider_elegant_speed,
timeout : slider_elegant_timeout,
before : function(currSlideElement, nextSlideElement, options, forwardFlag) {
var width = parseInt( $('.slider-caption', currSlideElement).outerWidth() );
var height = parseInt( $('.slider-caption', currSlideElement).outerHeight() );
$('.caption-top', currSlideElement).animate({top:height*-1}, slider_elegant_caption_speed);
$('.caption-bottom', currSlideElement).animate({bottom:height*-1}, slider_elegant_caption_speed);
$('.caption-left', currSlideElement).animate({left:width*-1}, slider_elegant_caption_speed);
$('.caption-right', currSlideElement).animate({right:width*-1}, slider_elegant_caption_speed);
},
after : function(currSlideElement, nextSlideElement, options, forwardFlag) {
$('.caption-top', nextSlideElement).animate({top:0}, slider_elegant_caption_speed);
$('.caption-bottom', nextSlideElement).animate({bottom:0}, slider_elegant_caption_speed);
$('.caption-left', nextSlideElement).animate({left:0}, slider_elegant_caption_speed);
$('.caption-right', nextSlideElement).animate({right:0}, slider_elegant_caption_speed);
}
})
} else {
$("#slider ul").cycle({
easing : slider_elegant_easing,
fx : slider_elegant_fx,
speed : slider_elegant_speed,
timeout : slider_elegant_timeout,
before : function(currSlideElement, nextSlideElement, options, forwardFlag) {
var width = parseInt( $('.slider-caption', currSlideElement).outerWidth() );
var height = parseInt( $('.slider-caption', currSlideElement).outerHeight() );
$('.caption-top', currSlideElement).animate({top:height*-1}, slider_elegant_caption_speed);
$('.caption-bottom', currSlideElement).animate({bottom:height*-1}, slider_elegant_caption_speed);
$('.caption-left', currSlideElement).animate({left:width*-1}, slider_elegant_caption_speed);
$('.caption-right', currSlideElement).animate({right:width*-1}, slider_elegant_caption_speed);
},
after : function(currSlideElement, nextSlideElement, options, forwardFlag) {
$('.caption-top', nextSlideElement).animate({top:0}, slider_elegant_caption_speed);
$('.caption-bottom', nextSlideElement).animate({bottom:0}, slider_elegant_caption_speed);
$('.caption-left', nextSlideElement).animate({left:0}, slider_elegant_caption_speed);
$('.caption-right', nextSlideElement).animate({right:0}, slider_elegant_caption_speed);
}
})
};
</script>