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


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.