Zaccordion – Slideshow con efecto acordeón desarrollado con jQuery

Al igual que el efecto Ligthbox, los slides de imágenes con efecto acordeón, son unos de los desarrollos con jQuery más difundidos y usados. Como Zaccordion, otra solución para implementar un slideshow con efecto acordeón desarrollado con jQuery que se destaca por ser muy sencillo de usar en cualquier desarrollo web, a la vez que el resultado final es muy elegante.

En el caso de Zaccordion, además de las imágenes que se desplazan, ofrece la posibilidad de mostrar automáticamente un texto. Todas estas opciones son configurables usando algunos de los 18 parámetros disponibles para predeterminar prácticamente cada aspecto de la presentación como del comportamiento.

EntradasRelacionados

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

4 Tips de Oracle para iniciarte en el mundo de la programación

Implementando Zaccordion

Una de las opciones más avanzadas de este slideshow, es el que al desplazar una imagen, muestra un texto. Realizar esta implementación, requiere de un código Javascript como el siguiente:

$(document).ready(function() {
myAccordion = $("#splash").zAccordion({
timeout: 4500,
width: 960,
speed: 700,
open: function() {
$("#splash").find("li.slide-open div").fadeIn();
},
close: function() {
$("#splash").find("li.slide-closed div").fadeOut();
},
click: function() {
$("#splash").children().find("div").fadeOut();
},
slideWidth: 600,
height: 310,
startingSlide: 1
});
$("#splash").find("li.slide-closed div").css("display", "none");
});

Además se requieren estilos CSS adicionales:

#splash img {-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 20px #000;
box-shadow:0 0 20px #000;position:absolute;z-index:5;}
#splash li {overflow:visible !important;}
#splash div.splash-bg {-moz-border-radius:5px;
-webkit-border-radius:5px;background:#fff;
border-radius:5px;bottom:20px;height:50px;
left:25px;opacity:.75;padding:15px;
position:absolute;width:520px;z-index:10;}
#splash div.splash-info {bottom:20px;
height:50px;left:25px;padding:15px;
position:absolute;width:520px;z-index:15;}
#splash h2 {font-size:14px;margin-bottom:5px;}
#splash strong {font-size:11px;color:#000;text-shadow:none;}
#splash p {font-size:11px;line-height:14px;
text-shadow:none;color:#000;}

La estructura HTML es una lista desordenada:

<ul id="splash">
<li>
<image src="/images/diner.jpg" width="600" height="310"
alt="Old School Diner" />
</li>
<li>
<image src="/images/pool.jpg" width="600" height="310"
alt="Vintage Pool" />
</li>
<li>
<image src="/images/gas.jpg" width="600" height="310"
alt="Retro Gas Pump" />
</li>
<li>
<image src="/images/car.jpg" width="600" height="310"
alt="Old Car Steering Wheel" />
</li>
</ul>

Corolario

Zaccordion es muy similar a muchos de los efectos de acordeón ya disponibles, pero sin dudas se destaca por la facilidad con la que el desarrollador web puede usarlo en cualquier proyecto, como también por la acaba apariencia final que éste ofrece.