Jednoduchý obrazkový slider pomocou JQuery
2016-12-10 00:00:00
Rôzne obrázkové slider-e sú bežnou súčasťou mnohých webstránok. Slider, ktorý opíšem v tomto článku bude slúžiť na zväčšené zobrazenie vybraného obrázku a na preklikávanie medzi jednotlivými obrázkami. Na začiatok vytvorím jednoduchý HTML kód ktorým vložíme obrázky na stránku. Kód bude obsahovať div box v ktorom bude niekoľko obrázkov a druhý div box, ktorom sa bude obrázok zobrazovať zväčšený a pod obrázkom budú tlačidla "Predošlý" a "Nasledujúci" na preklikávanie medzi obrázkami:
<!doctype html> <html> <head> <title>Simple Image slider</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div id="slider"> <img src="" alt="" id="bigImage"> <br /> <p id="caption"></p> <br /> <button id="prev">Predošlý</button><button id="next">Nasledujúci</button> </div> <br /> <div id="images"> <img src="images/img1.jpg" alt="Malá Studená dolina"> <img src="images/img2.jpg" alt="Zasnežené Tatry z chodníka k Popradského plesu"> <img src="images/img3.jpg" alt="Slavkovský štít"> <img src="images/img4.jpg" alt="Kostolík pri obci Mojstrana, Slovinsko"> <img src="images/img5.jpg" alt="Velká Studená dolina"> <img src="images/img6.jpg" alt="Chmarošský viadukt pri Telgárte"> </div> </body> </html>
K tomuto html kódu pridávam tiež nasledujúci CSS kód pre lepši dizajn slidera. Nastavíme písmo, div boxy sa posunú do stredu, pridáme im rozmery, ohraničenie a padding, obrázkom si tiež pridane rozmery:
body { font-family: helvetica; } #slider { float: left; width: 650px; border: 1px solid black; padding: 15px; margin: 10px; text-align: center; box-shadow: 0px 0px 20px grey; } #slider img { height: 350px; max-width: 100%; } #images { float: left; border: 1px solid black; padding: 15px; margin: 10px; width: 420px; text-align: center; box-shadow: 0px 0px 20px grey; } #images img { height: 100px; margin: 10px; }
Teraz samotný JQuery skript . Vytvorime najprv spôsob ako dostať obrazky z druheho div boxu do poľa (array). Pouzijeme na to Jquery funkciu map(), pomocou ktorej dostaneme src atributy obrazkov do pola a cele to zapiseme do premennej photos. Ako selektor som pouzil ID div boxu kde sa obrazky nachadzaju a img tag, aby bolo jasne, ze do pola sa maju dostat len obrazky nachadzajúce sa v div boxe s ID "images":
$(document).ready(function() { var photos = $('#images img').map(function() { return this.src; }); });
Následné som vytvoril ďalšiu premennú s názvom description, ktorá do poľa zapíše alt atribúty obrázkov, tieto atribúty sa použijú na zobrazenie popisu obrázka v hlavnom div boxe:
var description = $('#images img').map(function() { return this.alt; });
Ďalšou premennou je source, ktorej iniciálnu hodnotu stanovíme na 0 a bude slúžiť ako index pre polia zapísaných v premenných photos a description.
var source = 0;
Následne stanovíme aby pri načítaní stránky sa automaticky zobrazil prvý obrázok (atribút src – jeho hodnota zámerné nie je v úvodzovkách) a bola mu priradená hodnota atribútu alt prevzatá od prvého obrázka. Tiež sa nastaví textový obsah p tagu s ID "caption", ktorý je taktiež odvodený od alt atribútu prvého obrázka poslúži ako popis obrázka. Vo všetkých prípadoch hodnoty atribútov získame cez premenne photos a description, ku konkrétnym hodnotám v poliach zapísaných v týchto premenných sa dostaneme cez index v hranatých zátvorkách, ktorý ma vyššie stanovenú hodnotu 0 (premenná source), automaticky teda získame hodnoty, ktoré sa v poliach ako prvé v poradí:
$("#bigImage").attr({ 'src': photos[source], 'alt': 'description[source]' }); $("#caption").text(description[source]);
Po tomto nasledujú 2 funkcie, ktoré budú kontrolovať, ktorý obrázok je zobrazený. Prvá funkcia sa bude vykonávať po kliknutí na tlačidlo s nápisom "Nasledujúci" s ID "prev". Hodnota premennej source sa bude s každým klikom zvyšovať o 1 (source++). Následné je však pridaná podmienka (if blok), ktorá hodnotu premennej source vráti spať na hodnotu 0 aby po kliknutí na tlačidlo "Nasledujúci" pri poslednom obrázku sa opätovné zobrazil prvý obrázok. V if podmienke je zadefinovane aby v prípade, keď hodnota premennej source bude väčšia alebo rovná poctu obrázkov, došlo k nastaveniu hodnoty premennej source na 0. Počet obrázkov je stanovený metódou length na premennej photos:
$("#next").click(function() { source++ if (source >= photos.length) { source = 0; } $("#bigImage").attr({ 'src': photos[source], 'alt': 'description[source]' }); $("#caption").text(description[source]); });
Druha funkcia sa bude vykonávať po kliknutí na tlačidlo s nápisom "Predošlý" s ID "prev". Hodnota premennej source sa bude s každým klikom zmenšovať o 1 (souce--). Aj tu je pridaná podmienka (if blok), ktorá spôsobí, že v prípade kliknutia tlačidla "Predošlý" pri prvom obrazu dôjde k zobrazeniu posledného obrázka. Premennej source je v tomto prípade priradený index posledného obrázka. V tomto konkrétnom prípade je hodnota indexu posledného obrázku 5 (v poli v premennej photos je 6 obrázkov, index prvého je 0), preto aby sme automatický získali index posledného obrázka je potrebne odrátať 1 od photos.length (v tomto konkrétnom prípade to presne znamená 6 mínus 1):
$("#prev").click(function() { source-- if (source < 0) { source = photos.length -1; } $("#bigImage").attr({ 'src': photos[source], 'alt': 'description[source]' }); $("#caption").text(description[source]); });
Kompletny JQuery skript:
$(document).ready(function() { var photos = $('#images img').map(function() { return this.src; }); var description = $('#images img').map(function() { return this.alt; }); var source = 0; $("#bigImage").attr({ 'src': photos[source], 'alt': 'description[source]' }); $("#caption").text(description[source]); $("#next").click(function() { source++; if (source >= photos.length) { source = 0; } $("#bigImage").attr({ 'src': photos[source], 'alt': 'description[source]' }); $("#caption").text(description[source]); }); $("#prev").click(function() { source--; if (source < 0) { source = photos.length -1; } $("#bigImage").attr({ 'src': photos[source], 'alt': 'description[source]' }); $("#caption").text(description[source]); }); });
Kompletne demo je k nahliadnutiu tu.