Diseño Web y Formación en Drupal E-duca.eu

  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.