Jquery detaljni content slajder – Autoscroll

Jquery detaljni content slajder – Autoscroll

Evo nastavka tutoriala Dejana Peića, ako niste svakako pogledajte njegov prijašnji tutorial. U ovom tutorialu će vam Dejan objasniti kako da na svoj slider dodate autoscroll opciju, odnosno kako da se slider sam počne pokretati bez vašeg inputa.

 

Lijep pozdrav svima.

Kao što sam Vam obećao u nastavku ovog tutorial-a ćete naučiti kako implementirati “autoscroll” funkciju u Vaš slajder.

JQuery je doista sjajna stvar ali pošto je samo JavaSript biblioteka u ovom smo slučaju ostali prikraćeni za funkciju koja bi se izvršavala u određenim vremenskim intervalima, tako da imamo tri opcije na raspolaganju.

  • možemo sami kreirati u JQery-u funkciju koja će nam imati tu funkcionalnost (riješenje bi radilo, ali bi po mome mišljenju bi bilo dosta “nespretno” riješeno.)
  • obratiti se za pomoć njegovom Velikom Bratu (JavaScriptu).
  • kombinirati ove dvije opcije

Ja ću radi jednostavnosti izabrati treću opciju zato jer je po meni najbolje riješenje.

Pa krenimo!

JavaScript i jQuery

JavaScript (setInterval i clearInterval funkcije)

JavaSript sam po sebi ima ugrađene funkcije za izvršavanje u određenim vremenskim razmacima. Jednostavnim riječnikom rečeno setInterval funkcija “pokreće” neku funkciju unutar sebe u određenim intervalima, pa pogledajmo kako bi to funkcioniralo u našem primjeru.

<script type="text/javascript">

var animiraj = 

$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});




//kad je dokument spreman pokreni funkciju
$(document).ready(function(){

$('.left').click(function(){

$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));

});

});

Dakle napravili smo varijablu (varijable su poput mini baze podataka u koje ubacujemo nekakve informacije koje će nam trebati kasnije) sa imenom animiraj i ubacili smo kod od animacije lijevog dugmeta bez $('.left').click(function(){}); funkcije. Varijablu smo postavili izvan $(document).ready funkcije ali poslije script type="text/javascript" taga Da bi nam ovaj kod radio potrebno ga je okružiti još jednom funkcijom kao u ovom primjeru:

<script type="text/javascript">

var animiraj = 
//OKRUŽILI SMO ANIMATE FUNKCIJU SA ANONIMNOM FUNKCIJOM...
function(){
$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});
}  //KRAJ ANONIMNE FUNKCIJE...

Vrijeme je za JavaScript setInterval funkciju koju pokrećemo na slijedeći način:

$(document).ready(function(){

setInterval(animiraj,5000);

$('.left').click(function(){
$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});
});

Stvar je vrlo jednostavna kad je dokument spreman pokreni interval sa animiraj varijablom koja sadrži u sebi animate funkciju koja je prethodno okružena sa anonimnom funkcijom (odnosno s funkcijom koja nema ime). 5000 je vrijeme izvršavanje intervala odnosno svakih 5 sekundi. Super! Radi “ko beba” ali potrebno je pauzirati slajdove kada korisnik prelazi mišem preko našeg slajdera. To ćemo napraviti pomoću clearInterval funkcije.

Muka po clearInterval funkciji

Logično bi bilo za pretpostaviti da clearInterval funkcija radi na istom principu pa pogledajmo pobliže slijedeći kod:

$('.controlWrapper').mouseenter(function(){
clearInterval(animiraj);
});

I na našu veliku žalost ovo NE RADI :(

Moram priznati da sam pisajući ovu aplikaciju došao do ovog problema i ma što god napravio stvar jednostavno nije radila. Pokušavao sam pronaći riješenje na internetu ali nisam našao na objašnjenje koje bi mi pomoglo. Našao sam se pred zidom… Pošto je ovo situacija u kojoj ćete se naći prije ili kasnije (što god pokušali jednostavno nemate riješenje) mislim da ju je vrijedno spomenuti.

Dobro a šta sad…?

Pošto sam izgubio svaku nadu da ću naći riješenje za ovo odlučio sam se na potez očajnika… Prijavio sam se na http://stackoverflow.com/ (Stack Overflow forum) objasnio problem i dobio riješenje za manje od deset sekundi tako da se ovim putem zahvaljujem zajednici. POANTA: Kada iscrpite sva riješenja PITAJTE DRUGE!! Jer pola milijuna ljudi je pametnije od jednog.

Rješenje

Razlog zašto navedni kod ne radi clearInterval(animiraj); je taj da zapravo ciljamo animiraj varijablu a ne setInterval funkciju. Interval funkciju ćemo selektirati na slijedeći način:

<script type="text/javascript">

var animiraj = 
//OKRUŽILI SMO ANIMATE FUNKCIJU SA ANONIMNOM FUNKCIJOM...
function(){
$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});
}  //KRAJ ANONIMNE FUNKCIJE...

//ovdje smo samo kreirali praznu varijablu
var intervalID;


$(document).ready(function(){
//varijabla intervalID sada u sebi sadrľi setInterval funkciju...
intervalID=setInterval(animiraj,5000);
//pauziraj animaciju kad mią bude na glavnom divu...
$('.controlWrapper').mouseenter(function(){
clearInterval(intervalID);
});

Ovdje smo samo napravili praznu varijablu koja se zove intervalID. Zatim smo joj dodali setInterval funkciju. Naposlijetku kad miš uđe u glavni controllWrapper “očistili” smo interval funkciju pomoću clearInterval funkcije (selektirali smo setInterval tako da smo je “ubacili” u intervalID varijablu).

Još nam jedino preostaje da ponovo pokrenemo animaciju kad miš nije na controllWrapper divu:

$(document).ready(function(){
//varijabla intervalID sada u sebi sadrži setInterval funkciju...
intervalID=setInterval(animiraj,5000);
//pauziraj animaciju kad mią bude na glavnom divu...
$('.controlWrapper').mouseenter(function(){
clearInterval(intervalID);
});
//pokreni animaciju kad miš NEbude na glavnom divu...
$('.controlWrapper').mouseleave(function(){
intervalID=setInterval(animiraj,5000);
});

Tako smo upravo dovršili naš mrak slajder sa “autoscroll” funkcijom.

Ovo je cijeli kod ne kojemu smo danas radili:

<script type="text/javascript">

var animiraj = 
//OKRU®ILI SMO ANIMATE FUNKCIJU SA ANONIMNOM FUNKCIJOM...
function(){
$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});
}  //KRAJ ANONIMNE FUNKCIJE...

//ovdje smo samo kreirali praznu varijablu
var intervalID;


$(document).ready(function(){
//varijabla intervalID sada u sebi sadrži setInterval funkciju...
intervalID=setInterval(animiraj,5000);
//pauziraj animaciju kad mią bude na glavnom divu...
$('.controlWrapper').mouseenter(function(){
clearInterval(intervalID);
});
//pokreni animaciju kad miš NEbude na glavnom divu...
$('.controlWrapper').mouseleave(function(){
intervalID=setInterval(animiraj,5000);
});

$('.left').click(function(){
$('ul').animate({marginLeft:'+=300'},700,function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});
});




//dohvati desno dugme i na klik pokreni funkciju
$('.right').click(function(){
//dohvati ul tag i animiraj lijevo -300px
$('ul').animate({marginLeft:'-=300'},700,function(){
//centriraj ul tag (vrati na sredinu)
$('ul').css({'margin-left':'+=300'});
//dohvati prvu sliku i stavi prije zadnje
$('ul li:first').before($('ul li:last'));
});
});
});
</script>

Pozdrav i čitamo se u slijedećem tutorialu.

Povezani članci