Last active
December 28, 2015 05:49
-
-
Save webapprentice/7452229 to your computer and use it in GitHub Desktop.
Simple jQuery Slideshow with captions from Jon Raasch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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