jQuery Cycle Plugin

Jquery Cycle es una galería muy fácil de implementar en un desarrollo web y con la que lograrás unos efectos simples pero muy interesantes.

Basta con implementar los estilos que queramos personalizar:

<style type=”text/css”>
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>

Enlazar los scripst:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>

<!– include Cycle plugin –>
<script type=”text/javascript” src=”http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js“></script>

Crear los efectos que deseemos (aqui una lista de los disponibles)

<script type=”text/javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘fade’ // aqui puedes poner el que quieras por ej: fade, scrollUp, shuffle, etc…

});
});
</script>

y finalmente en su DIV correspondiente colocar la lista de imagenes que irán pasando.

<div class=”slideshow”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg” width=”200″ height=”200″ />

<img src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg” width=”200″ height=”200″ />
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg” width=”200″ height=”200″ />

<img src=”http://cloud.github.com/downloads/malsup/cycle/beach4.jpg” width=”200″ height=”200″ />
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach5.jpg” width=”200″ height=”200″ />

</div>

En la web podéis descargarlos y ver un montón de ejemplos.

Anuncios

Un pensamiento en “jQuery Cycle Plugin

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s