Advanced Search

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

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



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



<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<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>



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

***/



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>



<style type="text/css">



/*** 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>



<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="http://jonraasch.com/blog/"><img src="image1.jpg" alt="Slideshow Image 1" /></a>

        Caption for image 1

    </div>

    

    <div>

        <a href="http://jonraasch.com/blog/"><img src="image2.jpg" alt="Slideshow Image 2" /></a>

        This will work with any markup

    </div>

    

    <div>

        <a href="http://jonraasch.com/blog/"><img src="image3.jpg" alt="Slideshow Image 3" /></a>

        Swap this out for anything, links, paragraphs, whatever

    </div>

    

    <div>

        <a href="http://jonraasch.com/blog/"><img src="image4.jpg" alt="Slideshow Image 4" /></a>

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

    </div>

    

</div>



</body>

</html>
Initial URL 
hamiltopia_jquerySlideshow2
Initial Description 
Simple jQuery Slideshow from JonRaasch.com
Initial Title 
jQuery Slide show - Simple jQuery Slide show from JonRaasch.com #2
Initial Tags 
jquery
Initial Language 
jQuery