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.