Diseño Web y Formación en Drupal E-duca.eu
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.
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:
- Descargar e instalar el módulo Jquery Plugin desde: http://drupal.org/project/jquery_plugin
- Descomprmir el módulo y ponerlo en sites/all/modules como corresponde.
-
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. - 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.
-
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> - 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.
- En formato de entrada seleccionamos: PHP Code.
- Grabamos y comprobamos desde la Home que vemos las imágenes en transición.