Acordeón de imágenes con jQuery

Ya perdí la cuenta sobre cuantos slider nuevos de imágenes con jQuery aparecen a diario, por lo general todos son similares salvando mínimas diferencias, lo bueno de tantas alternativas es que prácticamente hay un slider para cada gusto.

En esta oportunidad les quería recomendar zAccordion un plugin jQuery que muestra las imágenes en forma de acordeón horizontal con un curioso efecto de rebote.

No se pierdan la demostración online de este fantástico plugin.



El plugin cuenta con unas cuantas opciones de configuración, entre ellas podemos destacar la posibilidad de mostrar el texto alternativo de las imágenes a medida que se vayan destacando, una opción simple pero que puede llegar a resultar muy útil para aquellos que buscan mostrar una imagen y su descripción.

Las imágenes deben ser colocadas dentro de listas, una vez que tenemos todos los archivos dentro de cada <li></li> simplemente tendremos que inicializar el plugin, un ejemplo de esto sería:



HTML:

<ul id="featured">
<li>
<image src="diner.jpg" alt="Old School Diner" />
</li>
<li>
<image src="pool.jpg" alt="Vintage Pool" />
</li>
<li>
<image src="gas.jpg" alt="Retro Gas Pump" />
</li>
<li>
<image src="car.jpg" alt="Old Car Steering Wheel" />
</li>
</ul>[/php]

JavaScript:

$(document).ready(function() {
$("#featured".zAccordion({
easing: "easeOutBounce",
timeout: 5500,
slideWidth: 600,
width: 960,
height: 310
});
});[/php]

Opciones:

timeout: 6000, /* Time between each slide (in ms). */
width: null, /* Width of the container. This option is required. */
slideWidth: null, /* Width of each slide in pixels or width of each slide compared to a 100% container. */
tabWidth: null, /* Width of each slide's "tab" (when clicked it opens the slide) or width of each tab compared to a 100% container. */
height: null, /* Height of the container. This option is required. */
startingSlide: 0, /* Zero-based index of which slide should be displayed. */
slideClass: null, /* Class prefix of each slide. If left null, no classes will be set. */
easing: null, /* Easing method. */
speed: 1200, /* Speed of the slide transition (in ms). */
auto: true, /* Whether or not the slideshow should play automatically. */
trigger: "click", /* Event type that will bind to the "tab" (click, mouseover, etc.). */
pause: true, /* Pause on hover. */
invert: false, /* Whether or not to invert the slideshow, so the last slide stays in the same position, rather than the first slide. */
animationStart: function () {}, /* Function called when animation starts. */
animationComplete: function () {}, /* Function called when animation completes. */
buildComplete: function () {}, /* Function called after the accordion is finished building. */
errors: false /* Display zAccordion specific errors. */[/php]

Métodos:

start /* Start the accordion. */
stop /* Stop the accordion. */
trigger /* Trigger a specific slide. */
destroy /* Destroys accordion, unbinds events, and removes styles. */[/php]

Ejemplo:



<ul id="splash">
<li>
<img src="diner.jpg" alt="" />
<div>
<strong>Old School Diner</strong>
<p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.</p>
</div>
</li>
<li>
<img src="pool.jpg" alt="" />
<div>
<strong>A Day at the Pool</strong>
<p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.</p>
</div>
</li>
<li>
<img src="gas.jpg" alt="" />
<div>
<strong>Fill it Up!</strong>
<p class="splash-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p>
</div>
</li>
<li>
<img src="car.jpg" alt="" />
<div>
<strong>Going for a Drive</strong>
<p class="splash-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
</div>
</li>
</ul>[/php]

No olviden revisar la documentación de zAccordion en donde encontraran infinidad de opciones para personalizar el desplazamiento como el efecto de esta forma de mostrar imágenes que resulta novedosa y atractiva.


Si en lugar de necesitar lograr este efecto con imágenes quieren usar divs les recomiendo otro plugin para crear un acordeón con jQuery.[/note]