Daniele Crupi

Cos’è?

Il Plugin jQuery Cycle è uno plugin per lo slideshow che supporta differenti tipi di effetti.
Ad esempio permette pause-on-hover, auto-stop, auto-fit, before/after callbacks, triggers e molto altro.

Come Lavora

Il plugin chiama il metodo cycle che è invocato su un elemento contenitore. Ogni elemento figlio del contenitore diventa una “slide”. Le opzioni di controllo gestiscono le transizione delle slide.

Opzioni

Il plugin ha molte opzioni per personalizzare le tue slideshow. Ecco qui un esempi0:

1 – Definisci uno stile

<div id="s1" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" alt="" width="200" height="200" />
<img src="images/beach3.jpg" alt="" width="200" height="200" />
</div>

.pics { height: 232px; width: 232px; padding: 0; margin: 0; }
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}

2 – Scegli un Effetto

Tu puoi scegliere qualsiasi dei seguenti effetti:

<ul>
	<li><code>blindX</code></li>
	<li><code>blindY</code></li>
	<li><code>blindZ</code></li>
	<li><code>cover</code></li>
	<li><code>curtainX</code></li>
	<li><code>curtainY</code></li>
	<li><code>fade</code></li>
	<li><code>fadeZoom</code></li>
	<li><code>growX</code></li>
	<li><code>growY</code></li>
	<li><code>scrollUp</code></li>
	<li><code>scrollDown</code></li>
	<li><code>scrollLeft</code></li>
	<li><code>scrollRight</code></li>
	<li><code>scrollHorz</code></li>
	<li><code>scrollVert</code></li>
	<li><code>shuffle</code></li>
	<li><code>slideX</code></li>
	<li><code>slideY</code></li>
	<li><code>toss</code></li>
	<li><code>turnUp</code></li>
	<li><code>turnDown</code></li>
	<li><code>turnLeft</code></li>
	<li><code>turnRight</code></li>
	<li><code>uncover</code></li>
	<li><code>wipe</code></li>
	<li><code>zoom</code></li>
</ul>

Tu specifichi l’effetto passando al metodo cycle una stringa o usando un oggetto opzione e impostando la fx property con il nome dell’effetto desidertato.

 $('#s1').cycle('fade'); 
$('#s2').cycle({ fx: 'scrollDown' });