Crear sliders en joomla

Un efecto bastante recurrente en la mayoria de los sitios web, es la creación de sliders. Los sliders son porciones de texto que aparecen y desaparecen cuando realizanos click en algún elemento de la página web. Cómo no Joomla viene nuevamente al rescate y nos facilita la tarea.

Joomla posee una serie de helpers Html, que podemos utilizar en nuestros desarrollos. Se accede a ellos a traves del método estático “_” de la clase “JHtml”. Vamos a ver el código necesario para crear nuestro slider:

<?php echo JHtml::_('sliders.start', 'PanelID', array('useCookie'=>1)); ?>
    <?php echo JHtml::_('sliders.panel', "Coches", 'CochesID'); ?>
    <ul>
        <li>Coche 1</li>
        <li>Coche 2</li>
        <li>Coche 3</li>
        <li>Coche 4</li>
        <li>Coche 5</li>
    </ul>    
    <?php echo JHtml::_('sliders.panel', "Motos", 'MotosID'); ?>
    <ul>
        <li>Moto 1</li>
        <li>Moto 2</li>
        <li>Moto 3</li>
        <li>Moto 4</li>
        <li>Moto 5</li>
    </ul>    
    <?php echo JHtml::_('sliders.end'); ?>

El resultado de este código es un slider, que contiene en su interior dos paneles diferentes. Estos paneles están relacionados, y sólo podemos mantener abierto uno de ellos al mismo tiempo. Si queremos crear paneles independientes, debemos alojarlos en sliders diferentes.

La primera llamada a la clase “JHtml”, realmente ejecuta el metodo “start” de la clase “JHtmlSliders”. Este método puede recibir dos parámetros. El primero el identificador que tendrá nuestro slider y el segundo un array de parametros de configuración:

  • useCookie: Indicamos si queremos que el navegador recuerde el estado en el que hemos dejado el slider.
  • startOffset: Si el slider empezara expandido o comprimido.
  • duration: La duración en milisegundos del efecto del slider
  • allowAllClose: Si se activa impide mantener cerrados todos los sliders.
  • opacityTransition: Genera un pequeño efecto de opacidad.
  • startTransition: Genera el efecto de transición nada más cargar la página web.

Además este método se encarga de cargar las librerias javascript necesarias para el funcionamiento del slider.

Las dos siguientes llamadas a la clase “JHtml”, son las que crean realmente los paneles deslizantes. El método “panel”, espera otros dos parámetros. El primero el título de nuestro panel y el segundo, su ID o identificador. Por último, sólo resta llamar al método “end” para cerrar el slider.

De esta manera tan sencilla hemos creado un vistoso slider para nuestro joomla.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s