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.

Anuncio publicitario