jQuery tricks 1: automatic-wslider

Posted by Ktoso on 11/12/2009 – 23:19

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.         });
Tags: , , , , , , , , ,
This post is under “coding” and has 3 respond so far.
If you enjoy this article, make sure you subscribe to my RSS Feed.

3 Responds so far- Add one»

  1. 1. damzal Said：
    January 20th, 2010 at 21:43

    Hej
    Ten skrypt nie działa ?

  2. 2. Ktoso Said：
    January 20th, 2010 at 22:18

    W takiej postaci (dodana została obsługa “zatrzymywania” na rollover) jest umieszczony na humac.pl i sprawuje się dobrze. Czy na pewno masz dobrze ponadawane id pól oraz masz plugin do jQuery “jQuery Timer plugin v0.1″?

    Dodałem fragment do “zatrzymywania on rollover” teraz, reszta kodu jest bez zmian.

    Pozdrawiam

  3. 3. damzal Said：
    January 21st, 2010 at 20:55

    Ok już działa, nie wiem czemu wslide dodaje # przed id i powoduje ten problem.

    btw fajny pomysl z tym automatycznym przesuwaniem, bardzo prosty a zarazem efektywny.

Post a reply




« »