CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com:80/tutorials/a-basic-jquery-slideshow/","20101123191725","https://web.archive.org/","web","/_static/", "1290539845"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out Themes by bavotasan.com and you will see my Sliderota jQue..."/> <meta name="keywords" content="content slider,Images,Javascript,jquery,slider,Slideshow,"/> <title>A Basic jQuery Slideshow | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20101123191725cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.8" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20101123191725/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20101123191725/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 A Basic jQuery Slideshow Comments Feed" href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20101123191725js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="Text Rotation with CSS3" href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/text-rotation-css3/"/> <link rel="next" title="A Sleek Navigation Menu with CSS3" href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/"/> <link rel="canonical" href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/"/> <link rel="shortlink" href="https://web.archive.org/web/20101123191725/http://bit.ly/c5Bv4J"/> <script type="text/javascript" src="https://web.archive.org/web/20101123191725js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="A Basic jQuery Slideshow"/> <meta property="og:description" content="Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out Themes by bavotasan.com and you will see my Sliderota jQuery plugin in action. I was visiting a site recently that had a very basic slideshow and I wanted to try to recreated it. It wasn鈥檛 anything fancy, just [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/wp-content/uploads/2010/09/img1.jpg"/> </head> <body class="single single-post postid-2875"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20101123191725/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20101123191725/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20101123191725/http://themes.bavotasan.com/support/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20101123191725/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/"> <img src="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/wp-content/themes/bavotasan-2010/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> </a> </div> <div id="follow"> <a href="https://web.archive.org/web/20101123191725/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/">Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/category/articles/">Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/category/tutorials/">Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/category/downloads/">Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Sep</div><div class="day">21</div><div class="year">2010</div></div> <h1>A Basic jQuery Slideshow</h1> Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out <a href="https://web.archive.org/web/20101123191725/http://themes.bavotasan.com/">Themes by bavotasan.com</a> and you will see my <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery plugin</a> in action. I was visiting a site recently that had a very basic slideshow and I wanted to try to recreated it. It wasn’t anything fancy, just two controls that would switch between image/text slides. It took some jQuery, CSS and HTML to get it all working. First, let’s put together some HTML. <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><div id="slideshow"> <div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div> <ul> <li> <img src="img1.jpg" width="387" height="258" alt="" /> <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p> </li> <li> <img src="img2.jpg" width="387" height="258" alt="" /> <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p> </li> <li> <img src="img3.jpg" width="387" height="258" alt="" /> <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p> </li> <li> <img src="img4.jpg" width="387" height="258" alt="" /> <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p> </li> </ul> </div></pre></div></td></tr></table></div> Each slide is a list item that contains an image and a paragraph. Let’s style it to get it looking the way we want. <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">#slideshow { border: 1px solid #ccc; padding: 10px; width: 600px; height: 280px; }   #slideshow ul { position: relative; list-style: none; padding: 0; margin: 0; }   #slideshow ul li { position: absolute; top: 0; left: 0; display: none; }   #slideshow ul li.current { display: block; }   #slideshow li img { float: left; margin-right: 20px; }     #slideshow #controls { width: 100%; text-align: right; }</pre></div></td></tr></table></div> Our CSS will add some simple styles. It will also make sure that our unordered list has a relative position so that all of our list items can be aligned directly on top of one another. That will give the illusion that we are switching between slides, when really all we are doing is making one slide display while all the other slides are hidden. That will be done with a little bit of jQuery. <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">(function($) { var len = $("#slideshow li").length; var x = 0; $("#slideshow #total").text(len); $("#slideshow li:eq(0)").addClass("current"); $("#slideshow li").each(function() { $(this).attr('rel', x); x++ }); $("#next").click(function() { var current = $("#slideshow .current"); var next = parseFloat(current.attr('rel'))+1; if(next==len) { return false; } $("#num").text(parseFloat(next)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==next) { $(this).addClass('current'); } }); }); $("#prev").click(function() { var current = $("#slideshow .current"); var prev = parseFloat(current.attr('rel'))-1; if(prev<0) { return false; } $("#num").text(parseFloat(prev)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==prev) { $(this).addClass('current'); } }); }); })(jQuery)</pre></div></td></tr></table></div> This code will count the number of list items and display that number in our counter. It will also cycle through each list item and give it a reference number, which is how we can control which slide will appear. Next, it sets up our controls to scroll forward and backward through the slides. Put it all together and you get this: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>A Basic Slideshow</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> #slideshow { border: 1px solid #ccc; padding: 10px; width: 600px; height: 280px; }   #slideshow ul { position: relative; list-style: none; padding: 0; margin: 0; }   #slideshow ul li { position: absolute; top: 0; left: 0; display: none; }   #slideshow ul li.current { display: block; }   #slideshow li img { float: left; margin-right: 20px; }     #slideshow #controls { width: 100%; text-align: right; }   </style> </head>   <div id="slideshow"> <div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div> <ul> <li> <img src="img1.jpg" width="387" height="258" alt="" /> <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p> </li> <li> <img src="img2.jpg" width="387" height="258" alt="" /> <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p> </li> <li> <img src="img3.jpg" width="387" height="258" alt="" /> <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p> </li> <li> <img src="img4.jpg" width="387" height="258" alt="" /> <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p> </li> </ul> </div> <script type="text/javascript"> (function($) { var len = $("#slideshow li").length; var x = 0; $("#slideshow #total").text(len); $("#slideshow li:eq(0)").addClass("current"); $("#slideshow li").each(function() { $(this).attr('rel', x); x++ }); $("#next").click(function() { var current = $("#slideshow .current"); var next = parseFloat(current.attr('rel'))+1; if(next==len) { return false; } $("#num").text(parseFloat(next)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==next) { $(this).addClass('current'); } }); }); $("#prev").click(function() { var current = $("#slideshow .current"); var prev = parseFloat(current.attr('rel'))-1; if(prev<0) { return false; } $("#num").text(parseFloat(prev)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==prev) { $(this).addClass('current'); } }); }); })(jQuery) </script> </body> </html></pre></div></td></tr></table></div> Here is a demo: <div id="slideshow"> <div id="controls"><a href="javascript:void(0)" id="prev">«</a> 1 of <a href="javascript:void(0)" id="next">»</a></div> <ul> <li> <img src="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/wp-content/uploads/2010/09/img1.jpg" width="387" height="258" alt=""/> Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </li> <li> <img src="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/wp-content/uploads/2010/09/img2.jpg" width="387" height="258" alt=""/> Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </li> <li> <img src="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/wp-content/uploads/2010/09/img3.jpg" width="387" height="258" alt=""/> Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie. </li> <li> <img src="https://web.archive.org/web/20101123191725im_/http://bavotasan.com/wp-content/uploads/2010/09/img4.jpg" width="387" height="258" alt=""/> In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </li> </ul> </div> <script type="text/javascript"> (function($) { var len = $("#slideshow li").length; var x = 0; $("#slideshow #total").text(len); $("#slideshow li:eq(0)").addClass("current"); $("#slideshow li").each(function() { $(this).attr('rel', x); x++ }); $("#next").click(function() { var current = $("#slideshow .current"); var next = parseFloat(current.attr('rel'))+1; if(next==len) { return false; } $("#num").text(parseFloat(next)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==next) { $(this).addClass('current'); } }); }); $("#prev").click(function() { var current = $("#slideshow .current"); var prev = parseFloat(current.attr('rel'))-1; if(prev<0) { return false; } $("#num").text(parseFloat(prev)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==prev) { $(this).addClass('current'); } }); }); })(jQuery) </script> <div class="imgprov"> Slideshow images provided by <a href="https://web.archive.org/web/20101123191725/http://www.pixmac.com/#cbavota">Pixmac</a>. </div> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20101123191725/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2Fc5Bv4J&counturl=http://bavotasan.com/tutorials/a-basic-jquery-slideshow/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20101123191725js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20101123191725/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/a-basic-jquery-slideshow/&t=A Basic jQuery Slideshow" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20101123191725/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/a-basic-jquery-slideshow/&title=A Basic jQuery Slideshow&bodytext=Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out Themes by bavotasan.com and you will see my Sliderota jQuery plugin in action. I was visiting a site recently that had a very basic slideshow and I wanted to try to recreated it. It wasn鈥檛 anything fancy, just [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20101123191725/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20101123191725/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/')+'&title='+encodeURIComponent('A Basic jQuery Slideshow'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20101123191725/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/a-basic-jquery-slideshow/&title=A Basic jQuery Slideshow" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20101123191725if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fa-basic-jquery-slideshow%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> Tags: <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tag/content-slider/" rel="tag">content slider</a>, <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tag/images/" rel="tag">Images</a>, <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tag/javascript/" rel="tag">Javascript</a>, <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tag/jquery/" rel="tag">jquery</a>, <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tag/slider/" rel="tag">slider</a>, <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tag/slideshow/" rel="tag">Slideshow</a> Short URL: <a href="https://web.archive.org/web/20101123191725/http://bit.ly/c5Bv4J" title="A Basic jQuery Slideshow">http://bit.ly/c5Bv4J</a> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/articles/magazine-flow-wordpress-theme/" rel="bookmark" title="Permanent Link to Magazine Flow WordPress Theme">Magazine Flow WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/my-first-vanilla-plugin/" rel="bookmark" title="Permanent Link to My First Vanilla Plugin">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/" rel="bookmark" title="Permanent Link to Add a Copyright Notice to Copied Text">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/" rel="bookmark" title="Permanent Link to Optimization Tips to Speed Up Your Site">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> </ul> </div> <a href="https://web.archive.org/web/20101123191725/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20101123191725im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20101123191725im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion 1 Comment </h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-16306"> <div id="comment-16306"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101123191725im_/http://1.gravatar.com/avatar/d1011fa24d42e36c92e4d4e4247b0555?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> Ivan on October 3, 2010 at 5:17 am </div> <div class="comment-text"> Hi, I`m little bit green in all the web design thingy so please excuse my lack of knowledge. So I`m looking for onmouseover onmouseout thumbslide jquery script. I`ve spent some time researching but with no success. An example for the result I want to achieve is <a href="https://web.archive.org/web/20101123191725/http://www.dailymotion.com/">http://www.dailymotion.com</a>. Thank you for your time. </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101123191725/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/?replytocom=16306#respond" onclick="return addComment.moveForm("comment-16306", "16306", "respond", "2875")">Reply</a> </div> </div> </li> </ol> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <a rel="nofollow" id="cancel-comment-reply-link" href="/web/20101123191725/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/#respond" style="display:none;">Cancel reply</a></h3> <form action="https://web.archive.org/web/20101123191725/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> Your email address will not be published. Required fields are marked * <label for="author">Name</label> * <input id="author" name="author" type="text" value="" size="30"/> <label for="email">Email</label> * <input id="email" name="email" type="text" value="" size="30"/> <label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30"/> To enter code in the comment box, please place it between <pre lang="php"> </pre> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor. <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="2875" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20101123191725/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>   <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/articles/magazine-flow-wordpress-theme/" title="Magazine Flow WordPress Theme">Magazine Flow WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/turn-text-into-an-image-using-the-php-gd-library/" title="Turn Text into an Image using the PHP GD Library">Turn Text into an Image using the PHP GD Library</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/articles/magazine-premium-is-out/" title="Magazine Premium v1.1.5 is Out!">Magazine Premium v1.1.5 is Out!</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20101123191725/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20101123191725/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <a href="https://web.archive.org/web/20101123191725/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20101123191725/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for FREE? All you need to do is <a href="https://web.archive.org/web/20101123191725/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/free-premium-theme/" class="fr">Click here for more information »</a> </div> <div class="side-widget"> <h4>Support c.bavota</h4> If you would like to support <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know). <a href="https://web.archive.org/web/20101123191725/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top</a> <div class="col col1"> <h4 class="one">Stay in Touch</h4> <a href="https://web.archive.org/web/20101123191725/http://twitter.com/bavotasan" class="footer-twitter">Follow me on Twitter</a> <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/feed/" class="footer-rss">Subscribe to my RSS Feed</a> <h4 class="two">Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three">Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> </ul> </div> <div class="col col3"> <h4 class="four">Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/meta-descriptions-wordpress/">Meta Descriptions for WordPress</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/turning-on-php-errors/">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/using-css-resets/">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20101123191725/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20101123191725/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20101123191725js_/http://stats.wordpress.com/e-201047.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'2875'}); var load_cmc = function(){linktracker_init(5317602,2875,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20101123191725js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20101123191725/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>