Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple jQuery Slideshow with captions from Jon Raasch
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
Original blog post: http://jonraasch.com/blog/a-simple-jquery-slideshow
***/
var intervalId;
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
intervalId = setInterval( "slideSwitch()", 5000 );
$("body").on('click', "#stop-slideshow",function(e) {
e.preventDefault();
clearInterval(intervalId);
$('#start-slideshow').toggle();
$('#stop-slideshow').toggle();
});
$("body").on('click', "#start-slideshow",function(e) {
e.preventDefault();
intervalId = setInterval( "slideSwitch()", 5000 );
$('#start-slideshow').toggle();
$('#stop-slideshow').toggle();
});
});
</script>
<style type="text/css">
/*** height should be height of image + height of caption text **/
#slideshow {
position:relative;
height: 350px;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 350px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 300px;
display: block;
border: 0;
margin-bottom: 10px;
}
#start-slideshow {
display: none;
}
</style>
<p>Simple jQuery Slideshow by <a href="http://jonraasch.com">Jon Raasch</a></p>
<div id="slideshow">
<div class="active">
<a href="http://apprentice.craic.com"><img src="/assets/slideshow_1.png" alt="Slideshow Image 1" /></a>
Heidelberg Saturday Market
</div>
<div>
<a href="http://apprentice.craic.com"><img src="/assets/slideshow_2.png" alt="Slideshow Image 2" /></a>
Heidelberg Altstadt and River
</div>
<div>
<a href="http://apprentice.craic.com"><img src="/assets/slideshow_3.png" alt="Slideshow Image 3" /></a>
Bronze mice by the Old Bridge in Heidelberg
</div>
<div>
<a href="http://apprentice.craic.com"><img src="/assets/slideshow_4.png" alt="Slideshow Image 4" /></a>
Houses in Bad Wimpfen
</div>
</div>
<button id='start-slideshow'>Start Slideshow</button>
<button id='stop-slideshow'>Stop Slideshow</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.