Posted By

thehamilton on 08/02/09

Tagged

jquery

Versions (?)

Last Edited at 08/02/09 09:06pm

Statistics

Viewed 744 times

Favorited by 1 user(s)

Related snippets

jQuery Slide show - Simple jQuery Slide show from JonRaasch.com #2

/ Published in: jQuery

Simple jQuery Slideshow from JonRaasch.com

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Simple jQuery Slideshow from JonRaasch.com</title>

/***

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 :)

***/

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() {

setInterval( "slideSwitch()", 5000 );

});

</script>

/*** set the width and height to match your images **/

#slideshow {

position:relative;

height:400px;

}

#slideshow DIV {

position:absolute;

top:0;

left:0;

z-index:8;

opacity:0.0;

height: 400px;

background-color: #FFF;

}

#slideshow DIV.active {

z-index:10;

opacity:1.0;

}

#slideshow DIV.last-active {

z-index:9;

}

#slideshow DIV IMG {

height: 350px;

display: block;

border: 0;

margin-bottom: 10px;

}

</style>

</head>

<!-- set the active class on whichever image you want to show up as the default

(otherwise this will be the last image) -->

Caption for image 1

</div>

<div>

This will work with any markup

</div>

<div>

Swap this out for anything, links, paragraphs, whatever

</div>

<div>

Just make sure to set a background color if you use text

</div>

</body>

</html>

URL: hamiltopia_jquerySlideshow2

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Statistics

Related snippets

jQuery Slide show - Simple jQuery Slide show from JonRaasch.com #2

Comments

Choose a language for easy browsing: