Blog.Project13.pl » jquery http://www.blog.project13.pl The Blog of a Coder Sun, 05 Feb 2012 02:28:52 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 jQuery tricks 1: automatic-wslider http://www.blog.project13.pl/index.php/coding/345/jquery-tricks-1-automatic-wslider/ http://www.blog.project13.pl/index.php/coding/345/jquery-tricks-1-automatic-wslider/#comments Fri, 11 Dec 2009 22:19:12 +0000 Ktoso http://www.blog.project13.pl/?p=345 This time I’ll post some actual code. A client wanted me to write an “image slider”. You’ve probably seen lot’s of them online – and a whole lot of them is in flash – why? There is no need to involve flash in such a trivial task, and jQuery is more than up to the job :-) I used jQuery with the wslide plugin, it’s simple and quite neat. But it does not slide on it’s own. But thanks to it’s simplicity I was able add the functionality I needed in just a few lines of clean code. I used the timer plugin to “click” on the slider at some interval and voila – the birth of an automatic jquery image slider. Anyways, here’s thecode:

  1.         var canDo = true;
  2.         /** plugin @author: http://www.webinventif.fr/wslide-plugin/ */
  3.         $(document).ready(function(){
  4.  
  5.            $('#slidermenu, #slider, .cube').mouseover(function(){
  6.                 canDo = false;
  7.             }).mouseout(function(){
  8.                 canDo = true;
  9.             });
  10.            
  11.             $('#slider').wslide({
  12.                 width: 900,
  13.                 height: 200,
  14.                 pos: 1,
  15.                 fade: true,
  16.                 horiz: true,
  17.                 autolink: 'slidermenu',
  18.                 speed:300
  19.             });
  20.  
  21.             $.timer(5000, function (timer) {
  22.                 if(canDo){
  23.                     if($('#slidermenu a:last').hasClass('wactive')){
  24.                         $('#slidermenu a:first').click();
  25.                     }else{
  26.                         $('#slidermenu .wactive').next().click();
  27.                     }
  28.                 }
  29.             });
  30.         });
]]> http://www.blog.project13.pl/index.php/coding/345/jquery-tricks-1-automatic-wslider/feed/ 7