SummArg | Cursos y recursos para webmasters

01/02/2011

Simple plugin accordion horizontal para jQuery

zAccordion es un plugin para el framework jQuery que nos simplifica mucho la creación de un slider de este tipo, tiene varias opciones y su configuración es muy simple.

Demo y Descarga

Implementación

Su modo de uso es muy sencillo. Primero debemos descargar los archivos en cuestión y linkearlos a nuestro documento colocando las siguientes llamadas entre etiquetas <head>.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.zaccordion.js"></script>

Luego colocamos las imagenes en una lista desordenada:

<ul id="example1">
	<li><img src="images/slide1.gif" width="600" height="270" alt="" /></li>
	<li><img src="images/slide2.gif" width="600" height="270" alt="" /></li>
	<li><img src="images/slide3.gif" width="600" height="270" alt="" /></li>
        <li><img src="images/slide4.gif" width="600" height="270" alt="" /></li>
	<li><img src="images/slide5.gif" width="600" height="270" alt="" /></li>
</ul>

Finalmente activamos el script:

<script type="text/javascript">
$(document).ready(function() {
	$("#example1").zAccordion({
		timeout: 4000,
		slideWidth: 600,
		width: 960,
		height: 270
	});
});
</script>

Pueden ver todas las opciones en la web del autor.

Dejar un comentario

  1. Johnny

    Y los archivos “js/jquery.easing.1.3.js” y “js/jquery.zaccordion.js”?????

Dejar un comentario