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:

var canDo = true;
/** plugin @author: http://www.webinventif.fr/wslide-plugin/ */
$(document).ready(function(){
$('#slidermenu, #slider, .cube').mouseover(function(){
canDo = false;
}).mouseout(function(){
canDo = true;
});
$('#slider').wslide({
width: 900,
height: 200,
pos: 1,
fade: true,
horiz: true,
autolink: 'slidermenu',
speed:300
});
$.timer(5000, function (timer) {
if(canDo){
if($('#slidermenu a:last').hasClass('wactive')){
$('#slidermenu a:first').click();
}else{
$('#slidermenu .wactive').next().click();
}
}
});
});

Tags: coding, free, guide, javascript, jquery, open source, web, web dev, webdeveloper, webmaster

This post is under “coding” and has 7 respond so far.

7 Responds so far- Add one»

1. damzal Said：
January 20th, 2010 at 21:43
Hej
Ten skrypt nie działa ?
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. 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.
4. gab Said：
July 16th, 2010 at 13:55
you are a super* thanks a million!
5. Whoop Said：
February 28th, 2011 at 13:49
COMMENT FROM http://www.webinventif.fr/wslide-plugin/#comment-65660

I found this small but handy piece of code that Ktoso has written to incorperate a timer to allow auto scrolling of wslide. Looks like a few others are after this too ;)

http://www.blog.project13.pl/index.php/coding/345/jquery-tricks-1-automatic-wslider/
6. Tomasz Szenborn Said：
June 20th, 2011 at 14:41
Witam, no niestety nie chce mi to działać. Zamieniłem wszystko z
$(“#parent3″).wslide({
width: 650,
height: 200,
pos: 1,
fade: true,
horiz: true,
autolink: ‘menu3′,
speed:300
});
na twój kod
var canDo = true;
/** plugin @author: http://www.webinventif.fr/wslide-plugin/ */
$(document).ready(function(){
$(‘#parent3, #menu3, .cube’).mouseover(function(){
canDo = false;
}).mouseout(function(){
canDo = true;
});
$(‘#parent3′).wslide({
width: 900,
height: 200,
pos: 1,
fade: true,
horiz: true,
autolink: ‘menu3′,
speed:300
});
$.timer(5000, function (timer) {
if(canDo){
if($(‘#menu3 a:last’).hasClass(‘wactive’)){
$(‘#menu3 a:first’).click();
}else{
$(‘#menu3 .wactive’).next().click();
}
}
});
});
zmieniając przy tym oczywiście nazwy diwów parent3 i autolink ‘menu3′ no i niestety niechce mi to działać za dobrze :( Nic się nie dzieje, slider działa jak działał wcześniej bez funkcji auto playa.
7. eki Said：
July 12th, 2011 at 19:02
Hi. I can’t get it work. Could somebody give us simple example with html code. Thanks.