O da, došao je i taj dan… naime našao sam žrtvu koja se ponudila da malo piše tutoriale na ovom sajtu. Kao što ste mogli primjetiti već dosta vremena nisam napravio tutorial za Xtorials. Većinom zbog nedostatka vremena i drugih obaveza. Ali evo, desilo se da smo Dejan i ja malo razgovarali i kroz razgovor došli na ideju da on napiše sljedeći tutorial za ovaj sajt. Uskoro ćete čitati njegov tutorial o još jednom jQuery content slideru.
Pošto je sam uspio riješiti jedan problem iz prijašnjeg tutoriala, shvatio sam da je on prava osoba za pisanje ovog tutoriala.
Moram napomenuti da je Dejan početnik kao i većina ljudi koja posjećuje ove stranice, i ovaj tutorial je dokaz da uz malo truda i traženja po internetu možete sami naučiti kako riješiti neki problem na vašoj stranici ili čak kao u ovom slučaju dodati dodatnu funkcionalnost na vašu stranicu.
Ukoliko vi želite pisati za Xtorials.com javite mi se sa vašim idejama i prijedlozima.
Demo
Prije nego vas prepustim u Dejanove sigurne ruke pogledajte što ćete u ovom tutorialu napraviti.
Ukoliko želite skinuti gotovi primjer, to možete napraviti ovdje.
Bez daljnjeg odugovlačenja pretstavljam vam Dejana Peića.
Surfajući po netu pronaći ćete mnoštvo tutoriala za content slajdere koji se bave Jquery programiranjem , ali ono što je velikoj većini njih zajedničko po mome skromnom mišljenju jest da su dosta komplicirani za shvatiti početnicima (kakav sam i sam) te sam odlučio napraviti ovaj tutorial koji će biti lak za shvatiti početnicima poput vas i mene. Pripremite se da napravite vlastiti content slajder od NULE!!
HTML
Počinjemo sa praznim HTML dokumentom u koji ćemo ubaciti poziv na Jquery odmah iznad završetka </head> taga.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Sada ćemo otvoriti <script> tagove i u njih ćemo pisati naš Jquery kod.
<script type="text/javascript"> </script>
Nakon što smo si postavili osnovnu konstrukciju za unošenje našeg koda. Ubacit ćemo HTML konstrukciju koja će držati naše slike, isto tako postavit ćemo i kontrole za lijevo i desno pomicanje slika, i na kraju ćemo unutar ul tagova pozvati same slike.
<!--/ div koji drži kontrole -->
<div class="controlWrapper">
<div class="right"></div> <!-- gumb za lijevo -->
<div class="left"></div> <!-- gumb za desno -->
<div class="slideWrapper">
<!-- slike -->
<ul>
<li><img src="lamborghini1.jpg"/></li>
<li><img src="lamborghini2.jpg"/></li>
<li><img src="lamborghini3.jpg"/></li>
</ul>
</div><!--kraj slideWrapper diva-->
</div><!--kraj controlWrapper diva-->
Ovdje je bitno napomenuti da je svaka slika visoka 225px i dugačka 300px ovo će nam biti kasnije potrebno za naš Jquery i CSS kod.
Evo kako to izgleda zasad u browseru. Nothing too fancy…
CSS
CSS ćemo unjeti direktno u naš HTML dokument, vi ga naravno možete staviti u poseban CSS dokument. Ovdje jedino obratite pažnju na dužinu ul taga koji je 900px zbog toga što nam je svaka slika dugačka 300px (tri slike puta 300px jednako 900px). Svakako pročitajte komentare u donjem kodu kako bi bolje razumjeli što koja linija koda radi.
<style type="text/css">
/* Resetiraj CSS da bi se stranica ispravno prikazivala u browserima */
*{margin:0px;padding:0px}
/* Ukloni bullets točkice i dodaj dužinu od 900px */
ul{list-style:none;width:900px;}
/* Postavi slike jednu pokraj druge (plutaj desno) */
ul li{float:right;}
/* Naveli smo dužinu od 900px, visinu od 225px (tolike su nam visine slike),
overflow hidden će nam kasnije koristiti da sakrijemo slike koje ne želimo
da se vide */
.slideWrapper{width:900px;height:225px;overflow:hidden;position:relative;}
/* Ovdje smo definirali generalna pravila naših kontrola, visina i dužina su
jednak veličini slika (kontrole)
*/
.left,.right{display:block;width:30px;height:225px;}
/* Slika za lijevi gumb */
.left{background:url("left_control.png");float:left;}
/* Slika za desni gumb */
.right{background:url("right_control.png");float:right;}
/* Centrirali smo glavni div, dodali relativnu poziciju, pomaknuli od vrha stranice za 50px i dodali crni obrub,
od širine jednog piksela
*/
.controlWrapper{width:1000px;height:225px;margin:0 auto;position:relative;margin-top:50px;border:1px solid #000000;}
</style>
Evo kako to sada izgleda u browseru:
Jquery
Sav kod koji ćemo unjeti, unosit ćemo u naš html dokument i to unutar document.ready funkcije, koja će se nalaziti unutar <script> tagova. Počinjemo ovako:
$(document).ready(function(){
});
Nakon toga dodatćemo još malo koda unutar naše jquery funkcije, ovaj kod bi trebao animirati naš gumb za desno.
$(document).ready(function(){
//dohvati desno dugme i na klik pokreni funkciju
$('.right').click(function(){
//dohvati ul tag i animiraj lijevo -300px
$('ul').animate({marginLeft:'-=300'});
});
});
Ako iskušate ovaj kod primjetiti ćete da mnogo toga “ne štima” na svaki klik animirati ćemo ul tag dok nam se naposlijetku ne izgubi 
“But have no fear callback function will soon be here”
Callback funkcija
Definicija callback funkcije jest ta da se ta funkcija izvršava kada nam je roditeljska funkcija obavila nešto. Callback funkciju pozivamo na sljedeći način:
$('ul').animate({marginLeft:'-=300'},function(){
});
Znači callback funkciju pozivamo tako da nekon {marginLeft:'-=300'} dodamo zarez i zatim otvorimo novu funkciju. Funkcija koju ćemo upisati će se izvršiti nakon što se ul tag animira 300px u lijevo.
Mi ćemo pomoću naše callback funkcije resetirati ul tag na njegovu prijašnju poziciju i to pomoću sljedećeg koda.
$('ul').animate({marginLeft:'-=300'},function(){
//centriraj ul tag (vrati na sredinu)
$('ul').css({'margin-left':'+=300'});
});
Zatim ćemo dohvatiti prvu sliku i ubaciti je prije zadnje slike:
$('ul').animate({marginLeft:'-=300'},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'));
});
Funkcija koja upravlja desnim gumbom je napisana, sad nam ostaje da napišemo funkciju koja će upravljati lijevim gumbom. Ova funkcija je poprilično slična funkciji za desni gumb, samo što ćemo ovdje obrnuti proces. Tako ćemo umjesto + sada ubaciti - a tamo gdje je pisalo $('ul li:first').before($('ul li:last')) ćemo upisati $('ul li:last').after($('ul li:first')) . To bi trebalo izgledati ovako:
//dohvati lijevo dugme i na klik pokreni funkciju
$('.left').click(function(){
//dohvati ul tag i animiraj lijevo +300px
$('ul').animate({marginLeft:'+=300'},function(){
//centriraj ul tag (vrati na sredinu)
$('ul').css({'margin-left':'-=300'});
//dohvati zadnju sliku i stavi ispred prve
$('ul li:last').after($('ul li:first'));
});
});
Još malo CSS-a
Sada ćemo još malo srediti naš CSS. Prvo ćemo dodati negativnu marginu na ul tag kako bi sakrili, samim time ćemo pozicionirati srednju sliku kao početnu.
ul{list-style:none;width:900px;margin-left:-300px;}
.slideWrapper divu ćemo smanjiti dužinu na 300px.
.slideWrapper{width:300px;height:225px;overflow:hidden;position:relative;}
Dužinu .controlWrapper diva ćemo smanjiti na 360px, zato što je dužina naših kontrola 30px, a imamo ih dvije tako da je to ukupno 60px i na to dodamo dužinu .slideWrapper diva i dobivamo 360px
.controlWrapper{width:360px;height:225px;margin:0 auto;position:relative;margin-top:50px;border:1px solid #000000;}
Ovako to sada izgleda u browseru
Manje više je sve ok, ali brzina pomicanja slideova je malo prevelika. To ćemo ispraviti tako da se opet malo vratimo u jQuery.
jQuery
Da bi smanjili brzinu animacije, jednostavno ćemo dodati broj milisekundi u kojima želimo da se slide animira. U našem slučaju postavit ćemo brzinu na 700 ms. Mjenjanjem ove vrijednosti možete ubrzati ili usporiti animacije. Broj milisekundi koji želite dodajete prije poziva callback funkcije na lijevom i desnom gumbu.
//dohvati ul tag i animiraj lijevo -300px
$('ul').animate({marginLeft:'-=300'}, 700, function(){
.....
//dohvati ul tag i animiraj lijevo +300px
$('ul').animate({marginLeft:'+=300'}, 700, function(){
Zaključak
Za sve one nevjerne Tome koji misle: “ajme majko kolko tu puno koda ima…”, vrijeme je da pogledaju naš program bez ovih komentara.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content="Dejan Peic"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>CONTENT SLAJDER TUTORIAL</title>
<style type="text/css">
*{margin:0px;padding:0px}
ul{list-style:none;width:900px;margin-left:-300px;}
ul li{float:right;}
.slideWrapper{width:300px;height:225px;overflow:hidden;position:relative;}
.left,.right{display:block;width:30px;height:225px;}
.left{background:url("left_control.png");float:left;}
.right{background:url("right_control.png");float:right;}
.controlWrapper{width:360px;height:225px;margin:0 auto;position:relative;margin-top:50px;border:1px solid #000000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.right').click(function(){
$('ul').animate({marginLeft:'-=300'}, 700, function(){
$('ul').css({'margin-left':'+=300'});
$('ul li:first').before($('ul li:last'));
});
});
$('.left').click(function(){
$('ul').animate({marginLeft:'+=300'}, 700, function(){
$('ul').css({'margin-left':'-=300'});
$('ul li:last').after($('ul li:first'));
});
});
});
</script>
</head>
<body>
<div class="controlWrapper">
<div class="right"></div>
<div class="left"></div>
<div class="slideWrapper">
<ul>
<li><img src="lamborghini1.jpg"/></li>
<li><img src="lamborghini2.jpg"/></li>
<li><img src="lamborghini3.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>
9 (čitaj: DEVET!!!) linija koda uključujući document.ready funkciju nam je trebalo da bi smo “sklepali” ovaj sjajan slajder. Prilično nevjerovatno zar ne? Slogan JQuery bibiloteke glasi: ”Write less do more” (piši manje radi više) ima li bolji dokaz od ovoga da je slogan istinit?
Već Vas čujem kako kličete: SUPER,DIVNO,SJAJNO,VELIČANSTVENO… ali kako da napravimo slajder koji će nam automatski slajdati slike? To ćete naučiti u slijedećem tutorialu samo na xtorials.com.
Moje ime je Dejan Peić i bilo mi je zadovoljstvo raditi ovaj tutorial za vas.
Lijep pozdrav i “happy coding”…
