FlexSlider, plugin jQuery


Am citit undeva pe net despre FlexSlider acum mai bine de o lună. S-a scris mai intens despre el după ce SmashingMagazine l-a promovat aparte. În cele din urmă am ajuns să îl testez puţin şi… îmi place. Este un plugin jQuery, dintr-o listă foarte-foarte-foarte lungă de pluginuri ce permit inserarea unui slideshow de imagini în paginile web. Sună o nimica toată, dar – ca atâtea alte soluţii similare şi aceasta – oferă posibilitatea de a avea descrieri la imagini şi, pentru cine vrea, acestea să fie şi clickabile. Cu alte cuvinte are generalitatea dorită, adaptabilă la diverse utilizări.

imagine

Când scriu, ultima versiune a apărut la 10 septembrie 2011, fiind cu numărul 1.7. De pornit se porneşte de la aceste trei linii de cod care trebuie modificate doar pentru căi (adică unde aţi pus “kitul”, pachetul de fişiere al pluginului), plus eventual preferinţa pentru jQuery (găzduit de Dvs sau nu).

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>

Cât priveşte slider-ul propriu-zis, el se “pictează” uşor. Totul într-un div cu clasa flexslider, apoi o listă ul cu clasa slides. Neapărat folosiţi aceste nume de clasă. Apoi fiecare element al listei poate fi doar imaginea dorită, sau cu un tag p cu clasa flex-caption putem indica şi o descriere. Exemplu mai jos. Evident, şi căile spre imagini trebuie modificate după locaţia lor la Dvs.

<div class="flexslider">
	<ul class="slides">
		<li>
			<a href="http://www.cnet.ro/"><img src="imagini/imaginea1.jpg" /></a>
			<p class="flex-caption">O ceaşcă de cafea de dimineaţă...</p>
	    </li>
	    <li>
	    	<a href="http://www.google.ro/"><img src="imagini/imaginea2.jpg" /></a>
	    	<p class="flex-caption">Abracadabra.</p>
	    </li>
	    <li>
	    	<img src="imagini/imaginea3.jpg" />
			<p class="flex-caption">Descrierea imagini...</p>
	    </li>
	    <li>
	    	<img src="imagini/imaginea4.jpg" />
	    </li>
		<li>
	    	<img src="imagini/imaginea5.jpg" />
	    </li>
	</ul>
</div>

Probabil intuiţi că nu e gata. Mai trebuie să “activăm” slider-ul, să facem legătura între pluginul jQuery şi elementele HTML definite. Pentru aceasta vom apela la următorul cod.

<script type="text/javascript">
	$(window).load(function() {
		$('.flexslider').flexslider();
	});
</script>

Atenţie: slideshow-ul se lăţeşte cât poate. Dacă nu apare într-o zonă deja limitată ca lăţime, cu lăţimea dorită, mai încadraţi totul într-un div şi indicaţi o lăţime (width sau max-width). Imaginile vor fi scalate, nu trebuie să le daţi la vreo dimensiune ideală. Evident, aranjaţi-le să fie de aceeaşi dimensiune. Pentru mai multe informaţii – şi demonstraţie – vedeţi pagina pluginului.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *