Return to Snippet

Revision: 16393
at August 2, 2009 21:06 by thehamilton

Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>

<title>Simple jQuery Slideshow from</title>

<script type="text/javascript" 
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (i.e. both 1 and 1.3 would load 1.3.2 today).
  google.load("jquery", "1.3.2");
  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()

<script type="text/javascript">


    Simple jQuery Slideshow Script

    Released by Jon Raasch ( 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');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // use this to pull the divs in the order they appear in the markup

    var $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 ] );


    $next.css({opacity: 0.0})


        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass('active last-active');



$(function() {

    setInterval( "slideSwitch()", 5000 );



<style type="text/css">

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

#slideshow {




#slideshow DIV {






    height: 400px;

    background-color: #FFF;


#slideshow {




#slideshow DIV.last-active {



#slideshow DIV IMG {

    height: 350px;

    display: block;

    border: 0;

    margin-bottom: 10px;




<body style="font-family: Arial, Sans-serif, sans;">

<!-- this will work with any number of images -->

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

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

<div id="slideshow">

    <div class="active">

        <a href=""><img src="image1.jpg" alt="Slideshow Image 1" /></a>

        Caption for image 1




        <a href=""><img src="image2.jpg" alt="Slideshow Image 2" /></a>

        This will work with any markup




        <a href=""><img src="image3.jpg" alt="Slideshow Image 3" /></a>

        Swap this out for anything, links, paragraphs, whatever




        <a href=""><img src="image4.jpg" alt="Slideshow Image 4" /></a>

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






Initial URL

Initial Description
Simple jQuery Slideshow from

Initial Title
jQuery Slide show - Simple jQuery Slide show from #2

Initial Tags

Initial Language