liteAccordion: Un acordeón para jQuery

liteAccordion es un pequeño plugin para JQuery que nos permite agregar acordeones donde se mostrarán imágenes, animándolas con distintos efecto que funcionarán en cualquier navegador, incluyendo Internet Explorer 8.

El demo completo podemos descargarlo desde github pero para agregarlo a un sitio, sólo necesitamos dos archivos: liteaccordion.jquery.js y liteaccordion.css. Entonces, primero agregamos jQuery antes de </head> si es que no la tenemos:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Luego, el script con el plugin:

<script src="URL_liteaccordion.jquery.js"></script>

o lo agregamos directamente en al plantilla, copiando y pegando el contenido de ese archivo:

<script type='text/javascript'>
//<![CDATA[
  ....... aquí pegamos el contenido del archivo liteaccordion.jquery.js .......

//]]>
</script>

Por último, el estilo, del mismo modo:

<style>
  ....... aquí pegamos el contenido del archivo liteaccordion.css .......
</style>

Eso es todo; ahora, hay que crear el HTML allí donde quisiéramos utilizarlo:

<div id="miejemplo" class="accordion">
  <ol>

    <!-- cada una de las pestaña -->
    <li>
      <h2><span>Pestaña UNO</span></h2>
        <div>
          <!-- el demo original usa etiquetas de HTML5 pero, el contenido puede ser cualquier otra -->
          <span class="figure">
            <img src="URL_imagen1" />
            <span class="figcaption">un texto optativo</span>
         </span>
      </div>
    </li>

  </ol>
</div>

Podemos activarlo colocando el llamado a la función debajo de eso o bien, con el resto de los scripts siempre y cuando nos aseguremos que se ejecute cuando la pagina se haya cargado, estableciendo en ese llamdo, las opciones :

<script>
$(document).ready(function(){ 
  $('#miejemplo').liteAccordion({
    onActivate : function() { this.find('span').fadeOut(); },
    slideCallback : function() { this.find('span').fadeIn(); },
    autoPlay : true, pauseOnHover : true, theme : 'dark', rounded : true, enumerateSlides : true     
  }).find('span:first').show();
});
</script>

Algunas de las opciones se agregan ahí y otras en el plugin mismo donde, por ejemplo, se define el ancho y alto:

containerWidth : 600 // ancho total
containerHeight : 350 // alto total
headerWidth : 48 // ancho delas pestañas cerradas
firstSlide : 1 // el número de la primer pestaña activa
slideSpeed : 800 y cycleSpeed : 6000 // velocidad de la animación
rounded : false // si no se quieren bordes redondeados
enumerateSlides : false // muestra u oculta un número en cada pestaña
theme : 'basic' // el tema CSS que puede ser 'basic', 'light', 'dark', o 'stitch'

Esto ultimo, también puede ser modificado ... con paciencia y si se usan textos, habría que agregarle propiedades extras como:

span.figure {
  display: block;
  height: 100%;
  margin: 0;
  width: 100%;
}
span.figcaption {
  background: #000;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  bottom: 20px; 
  color: #FFF;
  padding: 10px 15px;
  position: absolute;
  right: 30px; 
  z-index: 3;
}