Inicio de sesión

Aprende Drupal

Suscríbete para recibir por email el nuevo contenido de Aprende Drupal con E-duca.eu.
Disfrutarás aprendiendo Drupal.

Introduce tu email:

Delivered by FeedBurner

CURSO DRUPAL ABRIL 2011 - DIA 22: COMO INCLUIR BANNERS CON TRANSICIONES DE IMÁGENES CON JQUERY

  Hemos terminado con la creación del sitio web como práctica, volveremos a él para ajustar algún aspecto o duda puntual que los alumnos vayan teniendo.

 

  Hemos hecho un BrainStorming sobre los módulos que podemos ver antes de terminar el curso para hacer su planificación.
 

 

  Vamos a terminar la clase con un módulo muy úti y fácil que nos va a permitir incluir transiciones de imágenes con Jquery en nuestro sitio para hacer Banners llamativos. Estas imágenes en transición podemos colocarlas en Bloques ubicados en regiones de nuestro sitio o en el mismo page-tpl.php en el lugar que creamos adecuado para hacer el diseño más atractivo.

Notas de instalación y configuración para banners con Jquery:

  1. Descargar e instalar el módulo Jquery Plugin desde: http://drupal.org/project/jquery_plugin
  2. Descomprmir el módulo y ponerlo en sites/all/modules como corresponde.
  3. Vamos a Administrar -> modulos, y activamos Jquery Plugin.
    Este módulo nos ofrecera una Api que vamos a utilizar para invocar la función de transición de imágenes de la siguiente forma.
  4. Para el ejemplo vamos a crear un Block en el lateral izquierdo donde pondremos un banner con 3 imágenes. Así que cogemos 3 imágenes y las subimos a la carpeta nuestro_sitio/imagenes.
  5. A continuación creamos un Nuevo Bloque donde pegaremos el siguiente código:

    <?php
    jquery_plugin_add('cycle');
    drupal_add_js(' $(document).ready(function() {
         $("#s1").cycle("fade");
         });',
         'inline'
    );
    ?>

    <div id="s1" class="pics" style="height: 230; width: 400>
         <img src="/imagenes/sync-slide-01.jpg" width="230" height="400" />
         <img src="/imagenes/sync-slide-02.jpg" width="230" height="400" />
         <img src="/imagenes/sync-slide-03.jpg" width="230" height="400" />
         <img src="/imagenes/sync-slide-01.jpg" width="230" height="400" />
    </div>

  6. Ajustaremos el nombre de las imágenes y el hight y el width que queremos que tengan las imágenes. Si queremos podemos omitir el height y éste será calculado en tiempo de ejecución proporcionalmente al ancho que hemos dado a la imágen y al contenedor Div.
  7. En formato de entrada seleccionamos: PHP Code.
  8. Grabamos y comprobamos desde la Home que vemos las imágenes en transición.