Advanced Search

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

/ Published in: jQuery
Save to your folder(s)
This slide show was created by Jon Raasch @ JonRaasch.com.

Just images. Look for Slide show #2 for a slide show using DIVs.

hamiltopia_jquerySlideshow2

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. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
  4.  
  5. <title>Simple jQuery Slideshow from JonRaasch.com</title>
  6.  
  7. <script type="text/javascript" 
  8.         src="http://www.google.com/jsapi"></script>
  9. <script type="text/javascript">
  10.   // You may specify partial version numbers, such as "1" or "1.3",
  11.   //  with the same result. Doing so will automatically load the 
  12.   //  latest version matching that partial revision pattern 
  13.   //  (i.e. both 1 and 1.3 would load 1.3.2 today).
  14.   google.load("jquery", "1.3.2");
  15.  
  16.   google.setOnLoadCallback(function() {
  17.     // Place init code here instead of $(document).ready()
  18.   });
  19. </script>
  20.  
  21. <script type="text/javascript">
  22.  
  23. /*** 
  24.     Simple jQuery Slideshow Script
  25.     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 :)
  26. ***/
  27.  
  28. function slideSwitch() {
  29.     var $active = $('#slideshow IMG.active');
  30.  
  31.     if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  32.  
  33.     // use this to pull the images in the order they appear in the markup
  34.     var $next =  $active.next().length ? $active.next()
  35.         : $('#slideshow IMG:first');
  36.  
  37.     // uncomment the 3 lines below to pull the images in random order
  38.  
  39.     // var $sibs  = $active.siblings();
  40.     // var rndNum = Math.floor(Math.random() * $sibs.length );
  41.     // var $next  = $( $sibs[ rndNum ] );
  42.  
  43.  
  44.     $active.addClass('last-active');
  45.  
  46.     $next.css({opacity: 0.0})
  47.         .addClass('active')
  48.         .animate({opacity: 1.0}, 1000, function() {
  49.             $active.removeClass('active last-active');
  50.         });
  51. }
  52.  
  53. $(function() {
  54.     setInterval( "slideSwitch()", 5000 );
  55. });
  56.  
  57. </script>
  58.  
  59. <style type="text/css">
  60.  
  61. /*** set the width and height to match your images **/
  62.  
  63. #slideshow {
  64.     position:relative;
  65.     height:350px;
  66. }
  67.  
  68. #slideshow IMG {
  69.     position:absolute;
  70.     top:0;
  71.     left:0;
  72.     z-index:8;
  73.     opacity:0.0;
  74. }
  75.  
  76. #slideshow IMG.active {
  77.     z-index:10;
  78.     opacity:1.0;
  79. }
  80.  
  81. #slideshow IMG.last-active {
  82.     z-index:9;
  83. }
  84.  
  85. </style>
  86.  
  87. </head>
  88.  
  89. <body style="font-family: Arial, Sans-serif, sans;">
  90.  
  91. <h1>Simple jQuery Slideshow</h1>
  92. <h2>By <a href="http://jonraasch.com/blog/">Jon Raasch</a></h2>
  93.  
  94. <!-- this will work with any number of images -->
  95. <!-- set the active class on whichever image you want to show up as the default 
  96. (otherwise this will be the last image) -->
  97.  
  98. <div id="slideshow">
  99.     <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
  100.     <img src="image2.jpg" alt="Slideshow Image 2" />
  101.     <img src="image3.jpg" alt="Slideshow Image 3" />
  102.     <img src="image4.jpg" alt="Slideshow Image 4" />
  103.     <img src="image5.jpg" alt="Slideshow Image 5" />
  104. </div>
  105.  
  106. <p>For more info visit <a href="http://jonraasch.com/blog/a-simple-jquery-slideshow">http://jonraasch.com/blog/a-simple-jquery-slideshow</a></p>
  107.  
  108. </body>
  109. </html>

URL: hamiltopia_jquerySlideshow1

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.