Edit slider so that it automatically slides

Edit slider so that it automatically slides

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Portfolio Image Rotator by Soh Tanaka</title>

  8. <style type="text/css">
  9. body {
  10. margin: 0; padding: 0;
  11. font: normal 10px Verdana, Arial, Helvetica, sans-serif;
  12. }
  13. *{outline: none;}
  14. img {border: 0;}
  15. .container {
  16. width: 960px;
  17. padding: 0;
  18. margin: 0 auto;
  19. }
  20. .folio_block {
  21. margin: 20px 0;
  22. float: left;
  23. clear: both;
  24. width: 100%;
  25. }
  26. .main_view {
  27. width: 580px;
  28. height: 294px;
  29. float: left;
  30. padding: 25px;
  31. margin-right: 20px;
  32. background: url(main_view_bg.gif) no-repeat;
  33. position: relative;
  34. }
  35. .window {
  36. height:294px;
  37. width: 580px;
  38. overflow: hidden;
  39. position: relative;
  40. }
  41. .image_reel {
  42. position: absolute;
  43. top: 0; left: 0;
  44. }
  45. .image_reel a {
  46. position: relative;
  47. float: left;
  48. cursor: pointer;
  49. }
  50. .image_reel img {float: left;}
  51. .image_reel a span {
  52. height: 294px;
  53. width: 580px;
  54. float: left;
  55. background: #111 url(icon_view.gif) no-repeat center;
  56. position: absolute;
  57. z-index: 10;
  58. top: 0; left: 0;
  59. }
  60. .paging {
  61. position: absolute;
  62. bottom: 40px; right: -3px;
  63. width: 178px; height:47px;
  64. z-index: 100;
  65. text-align: center;
  66. line-height: 40px;
  67. background: url(paging_bg.png) no-repeat;
  68. display: none;
  69. }
  70. .paging a {
  71. padding: 5px;
  72. text-decoration: none;
  73. color: #fff;
  74. }
  75. .paging a.active {
  76. font-weight: bold; 
  77. background: #0075b1; 
  78. border: 1px solid #005581;
  79. -moz-border-radius: 3px;
  80. -khtml-border-radius: 3px;
  81. -webkit-border-radius: 3px;
  82. }
  83. .paging a:hover {font-weight: bold;}
  84. .desc {
  85. width: 290px;
  86. float: left;
  87. color: #777;
  88. font-size: 1.1em;
  89. padding: 15px 0;
  90. }
  91. .desc h2 {
  92. text-transform: uppercase;
  93. font: normal 2em Georgia, "Times New Roman", Times, serif;
  94. color: #333;
  95. padding: 5px 0; margin: 5px 0;
  96. border-bottom: 1px solid #f0f0f0;
  97. }
  98. .desc h3 {
  99. font-size: 1.3em;
  100. padding: 5px 0; margin: 0;
  101. }
  102. .desc ul.services {
  103. padding: 0; margin: 0 0 0 15px; 
  104. list-style: none;
  105. }
  106. .desc ul.services li {
  107. background: url(icon_check.gif) no-repeat left center;
  108. padding: 3px 5px 3px 20px; margin: 0;
  109. }
  110. </style>

  112. </head>

  114. <body>
  115. <div class="container">

  117.     <div class="folio_block">
  118.         <div class="main_view">
  119.             <div class="window">
  120.                 <div class="image_reel">
  121.                     <a href="#"><img src="sample1.jpg" alt="" /></a>
  122.                     <a href="#"><img src="sample2.jpg" alt="" /></a>
  123.                     <a href="#"><img src="sample3.jpg" alt="" /></a>
  124.                     <a href="#"><img src="sample4.jpg" alt="" /></a>
  125.                 </div>
  126.             </div>
  127.             <div class="paging">
  128.                 <a href="#" rel="1">1</a>
  129.                 <a href="#" rel="2">2</a>
  130.                 <a href="#" rel="3">3</a>
  131.                 <a href="#" rel="4">4</a>
  132.             </div>
  133.         </div>
  134.         <div class="desc">
  135.             <h2>Design Bombs</h2>
  136.             <p><strong><a href="http://www.DesignBombs.com">Visit the Site</a></strong></p>
  137.             <h3>Description:</h3>
  138.             <p>Vero indoles refero ventosus paratus jus valde aliquip proprius, lobortis. Patria cogo facilisis huic letalis vel vel importunus. Melior, vel ex blandit lucidus ut antehabeo, neque, os fere ea neo. Ille in populus sit vel nonummy at.  Acsi patria nimis typicus os ibidem foras. 
  139.     </p>
  140.             <h3>Services:</h3>
  141.             <ul class="services">
  142.                 <li>Design</li>
  143.                 <li>Logo Creation</li>
  144.                 <li>Search Engine Optimization</li>
  145.                 <li>WordPress Development</li>
  146.             </ul>
  147.         </div>
  148.     </div>
  149.     

  152. </div>


  155. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  156. <script type="text/javascript">

  158. $(document).ready(function() {


  161. $(".folio_block").each(function() {
  163. //Set Default State of each portfolio piece
  164. $(this).find(".paging").show();
  165. $(this).find(".paging a:first").addClass("active");
  167. //Inject <span> for Tool tip
  168. $(this).find(".image_reel a").append("<span></span>");
  169. $(this).find(".image_reel span").css({"opacity" : "0"});
  171. //Get size of images, how many there are, then determin the size of the image reel.
  172. var windowWidth = $(this).find(".image_reel span").width();
  173. var imageSum = $(this).find(".image_reel img").size();
  174. var imageReelWidth = windowWidth * imageSum;
  176. //Adjust the image reel to its new size
  177. $(this).find(".image_reel").css({'width' : imageReelWidth});
  179. });

  181. //Hover Effect for Tooltip
  182. $(".image_reel a").hover(function() {
  183. $(this).find("span").stop().animate({ opacity: 0.7}, 200 ).show();
  184. }, function() {
  185. $(this).find("span").stop().animate({ opacity: 0}, 200 );
  186. });

  188. //Pagin events
  189. $(".paging a").click(function() {
  191. var triggerID = $(this).attr("rel") - 1;
  192. var imgWidth = $(this).parent().parent().find("img").width();
  193. var image_reelPosition = triggerID * imgWidth;
  195. //Ignore if Active
  196. if ( $(this).hasClass("active")) { 
  197. //Do Nothing
  198. }
  199. else {
  200. //Set active paging
  201. $(this).parent().parent().find(".paging a").removeClass("active");
  202. $(this).addClass("active");

  204. //image_reel Image
  205. $(this).parent().parent().find(".image_reel").animate({ 
  206. left: -image_reelPosition
  207. }, 300 );
  208. }
  209. return false;
  210. });

  212. });
  213. </script>


  216. </body>
  217. </html>

How can I edit the above code so that the slider automatically slides after a few seconds but still retains the function of the paging buttons?