jQuery Infinite Carousel Plugin 1.2
Versiunea 1.2 a acestui plugin creează o galerie cu miniaturi, cu mai multe opţiuni, care vă permite cu un singur clic pe o miniatură să săriţi la imaginea respectivă. Au fost introduse noi opţiuni pentru a permite un control asupra miniaturilor, care pot fi acum afişate în partea de jos.
7 motive pentru a folosi acest plugin
- Spre deosebire de cele mai multe plugin-uri tip “carusel” care opresc atunci când ajung la ultima imagine, acesta rulează la infinit, fără intervenţia utilizatorului. Dacă aveţi trei imagini pe care doriţi să le afişaţi, după ce a treia imagine a fost afişată, următoarea va fi prima imagine. Prin intermediul unui JavaScript inteligent, imaginile sunt amestecate astfel încât pare că nu se termină niciodată.
- Legendele sunt opţionale.
- Controalele opţionale ale miniaturilor permit vizitatorilor saltul la orice imagine, în secvenţa de tip “carusel”.
- Aspectul miniaturilor (thumbnails) poate fi controlat prin CSS.
- Este mai mic de 14K.
- Refolosibil pe mai multe containere în aceeaşi pagină.
- Puteţi utiliza CSS pentru a adăuga padding la zona de “carusel”, astfel încât să dea un indiciu despre imaginile anterioară şi următoare.
Utilizare
Toate imaginile pe care doriţi să le afişaţi ar trebui să fie de aceeaşi dimensiune şi grupate într-un container (de exemplu un <div>), care trebuie să aibă un ID. Cu ajutorul CSS este posibil ca recipientul, div, să aibă padding stânga-dreapta, astfel încât să puteţi afişa o mică parte din imaginea precedentă şi / sau următoare.
Caruselul trebuie să fie o listă în care fiecare element din listă este o imagine şi, opţional, un paragraf care conţine o legendă.
<div id="carousel"> <ul> <li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel.</p></li> <li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li> <li><img alt="" src="p3.jpg" width="500" height="213" /></li> <li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's easy being green.</p></li> <li><img alt="" src="p5.jpg" width="500" height="213" /></li> <li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li> </ul> </div> Toate imaginile *trebuie* să aibă lăţimea şi înălţimea declarată altfel plugin-ul nu va funcţiona în Safari, Chrome, sau alte
browsere bazate pe WebKit. De asemenea, toate imaginile ar trebui să fie de aceeaşi mărime. Dacă doriţi să aveţi o
imagine cu o legendă, ea * trebuie * să existe într-un paragraf, după imaginea respectivă. http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/









Lasă un răspuns!