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.
Da da.