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


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.