/ Published in: jQuery
Simple jQuery Slideshow from JonRaasch.com
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!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>
URL: hamiltopia_jquerySlideshow2