Advanced Search

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

/ Published in: jQuery
Save to your folder(s)
Simple jQuery Slideshow from JonRaasch.com

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
  6.  
  7.  
  8.  
  9. <title>Simple jQuery Slideshow from JonRaasch.com</title>
  10.  
  11.  
  12.  
  13. <script type="text/javascript" 
  14.         src="http://www.google.com/jsapi"></script>
  15. <script type="text/javascript">
  16.   // You may specify partial version numbers, such as "1" or "1.3",
  17.   //  with the same result. Doing so will automatically load the 
  18.   //  latest version matching that partial revision pattern 
  19.   //  (i.e. both 1 and 1.3 would load 1.3.2 today).
  20.   google.load("jquery", "1.3.2");
  21.  
  22.   google.setOnLoadCallback(function() {
  23.     // Place init code here instead of $(document).ready()
  24.   });
  25. </script>
  26.  
  27.  
  28.  
  29. <script type="text/javascript">
  30.  
  31.  
  32.  
  33. /*** 
  34.  
  35.     Simple jQuery Slideshow Script
  36.  
  37.     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 :)
  38.  
  39. ***/
  40.  
  41.  
  42.  
  43. function slideSwitch() {
  44.  
  45.     var $active = $('#slideshow DIV.active');
  46.  
  47.  
  48.  
  49.     if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
  50.  
  51.  
  52.  
  53.     // use this to pull the divs in the order they appear in the markup
  54.  
  55.     var $next =  $active.next().length ? $active.next()
  56.  
  57.         : $('#slideshow DIV:first');
  58.  
  59.  
  60.  
  61.     // uncomment below to pull the divs randomly
  62.  
  63.     // var $sibs  = $active.siblings();
  64.  
  65.     // var rndNum = Math.floor(Math.random() * $sibs.length );
  66.  
  67.     // var $next  = $( $sibs[ rndNum ] );
  68.  
  69.  
  70.  
  71.  
  72.  
  73.     $active.addClass('last-active');
  74.  
  75.  
  76.  
  77.     $next.css({opacity: 0.0})
  78.  
  79.         .addClass('active')
  80.  
  81.         .animate({opacity: 1.0}, 1000, function() {
  82.  
  83.             $active.removeClass('active last-active');
  84.  
  85.         });
  86.  
  87. }
  88.  
  89.  
  90.  
  91. $(function() {
  92.  
  93.     setInterval( "slideSwitch()", 5000 );
  94.  
  95. });
  96.  
  97.  
  98.  
  99. </script>
  100.  
  101.  
  102.  
  103. <style type="text/css">
  104.  
  105.  
  106.  
  107. /*** set the width and height to match your images **/
  108.  
  109.  
  110.  
  111. #slideshow {
  112.  
  113.     position:relative;
  114.  
  115.     height:400px;
  116.  
  117. }
  118.  
  119.  
  120.  
  121. #slideshow DIV {
  122.  
  123.     position:absolute;
  124.  
  125.     top:0;
  126.  
  127.     left:0;
  128.  
  129.     z-index:8;
  130.  
  131.     opacity:0.0;
  132.  
  133.     height: 400px;
  134.  
  135.     background-color: #FFF;
  136.  
  137. }
  138.  
  139.  
  140.  
  141. #slideshow DIV.active {
  142.  
  143.     z-index:10;
  144.  
  145.     opacity:1.0;
  146.  
  147. }
  148.  
  149.  
  150.  
  151. #slideshow DIV.last-active {
  152.  
  153.     z-index:9;
  154.  
  155. }
  156.  
  157.  
  158.  
  159. #slideshow DIV IMG {
  160.  
  161.     height: 350px;
  162.  
  163.     display: block;
  164.  
  165.     border: 0;
  166.  
  167.     margin-bottom: 10px;
  168.  
  169. }
  170.  
  171.  
  172.  
  173. </style>
  174.  
  175.  
  176.  
  177. </head>
  178.  
  179.  
  180.  
  181. <body style="font-family: Arial, Sans-serif, sans;">
  182.  
  183.  
  184.  
  185. <!-- this will work with any number of images -->
  186.  
  187. <!-- set the active class on whichever image you want to show up as the default 
  188.  
  189. (otherwise this will be the last image) -->
  190.  
  191.  
  192.  
  193. <div id="slideshow">
  194.  
  195.  
  196.  
  197.     <div class="active">
  198.  
  199.         <a href="http://jonraasch.com/blog/"><img src="image1.jpg" alt="Slideshow Image 1" /></a>
  200.  
  201.         Caption for image 1
  202.  
  203.     </div>
  204.  
  205.  
  206.  
  207.     <div>
  208.  
  209.         <a href="http://jonraasch.com/blog/"><img src="image2.jpg" alt="Slideshow Image 2" /></a>
  210.  
  211.         This will work with any markup
  212.  
  213.     </div>
  214.  
  215.  
  216.  
  217.     <div>
  218.  
  219.         <a href="http://jonraasch.com/blog/"><img src="image3.jpg" alt="Slideshow Image 3" /></a>
  220.  
  221.         Swap this out for anything, links, paragraphs, whatever
  222.  
  223.     </div>
  224.  
  225.  
  226.  
  227.     <div>
  228.  
  229.         <a href="http://jonraasch.com/blog/"><img src="image4.jpg" alt="Slideshow Image 4" /></a>
  230.  
  231.         Just make sure to set a background color if you use text
  232.  
  233.     </div>
  234.  
  235.  
  236.  
  237. </div>
  238.  
  239.  
  240.  
  241. </body>
  242.  
  243. </html>

URL: hamiltopia_jquerySlideshow2

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.