Hoy les mostraré una galería que destaca por su efecto de transición.
El plugin del que les hablo es un slide de http://jquery.malsup.com/cycle/
Como siempre la forma de usarlo no es nada raro. Se incluyen en las cabeceras de la página el core de JQuery y el plugin (en el orden mencionado). Por mi parte estoy haciendo uso de la libreria JQuiery: jquery-1.4.2.min.
Dentro del código html tenemos el siguiente código.
<section id="gallery">
<div class="pics">
<img src="images/repuestos_importadora_lopez.jpg" width="439" height="329" alt="importadora Lopez">
<img src="images/repuestos_importadora_lopez2.jpg" width="439" height="329" alt="importadora Lopez">
<img src="images/repuestos_importadora_lopez3.jpg" width="439" height="329" alt="importadora Lopez">
<img src="images/repuestos_importadora_lopez4.jpg" width="439" height="329" alt="importadora Lopez">
<img src="images/repuestos_importadora_lopez5.jpg" width="439" height="329" alt="importadora Lopez">
</div>
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
</section>
De hecho, como ven la galería en si esta dentro del div, si se muestra una etiqueta html5, es debido a cuestiones de organización.
La parte que ejecta el efecto es el siguiente:
<script type="text/javascript">
$(document).ready(function() {
$('.pics').cycle({
fx: 'toss',
next: '#next',
prev: '#prev'
});
</script>
Como vereis se define el contenedor de las imagenes como parámetro; en este caso es la clase pics, y hace la llamada a la funcion cycle. No es dificil darse cuenta que los parametros son refereidos al efecto en si y a los botones de navegación.
Este plugin tene nas opciones solo es que vean la pagina principal del plugin.
Una última cosa mas, ustedes tienen la libertad de elegir la presentación con las reglas que apliquen a la clase pics. En todo caso les muestro como esta ahora la presentación del CSS
#gallery {
float:left;
width:532px;
height:384px;
}
.pics {
width: 439px;
height: 329px;
padding: 0;
margin: 0;
position:relative;
margin:23px 0 0 36px;
}
.pics img {
display:block !important;
position:absolute;
width: 439px;
height: 329px;
top: 0;
left: 0;
border:5px solid #fff;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
box-shadow:0 0 3px rgba(0, 0, 0, .2);
-moz-box-shadow:0 0 3px rgba(0, 0, 0, .2);
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, .2);
}
.pics img:nth-child(2) {
-moz-transform: rotate(2.5deg); /* FF3.5+ */
-o-transform: rotate(2.5deg); /* Opera 10.5 */
-webkit-transform: rotate(2.5deg); /* Saf3.1+, Chrome */
}
.pics img:nth-child(3) {
-moz-transform: rotate(-2.5deg); /* FF3.5+ */
-o-transform: rotate(-2.5deg); /* Opera 10.5 */
-webkit-transform: rotate(-2.5deg); /* Saf3.1+, Chrome */
}
.pics img:nth-child(4) {
-moz-transform: rotate(3.5deg); /* FF3.5+ */
-o-transform: rotate(3.5deg); /* Opera 10.5 */
-webkit-transform: rotate(3.5deg); /* Saf3.1+, Chrome */
}
.pics img:nth-child(5) {
-moz-transform: rotate(-3.5deg); /* FF3.5+ */
-o-transform: rotate(-3.5deg); /* Opera 10.5 */
-webkit-transform: rotate(-3.5deg); /* Saf3.1+, Chrome */
}
#prev {
position:absolute;
left:0;
top:174px;
z-index:1;
background:url(../images/prev.png) no-repeat 0 0;
width:83px;
height:45px;
}
#next {
position:absolute;
left:435px;
top:174px;
z-index:1;
background:url(../images/next.png) no-repeat 0 0;
width:83px;
height:45px;
}
Bueno eso es todo, adios…
Mira el Ejemplo
