Cómo hacer la transición de imágenes en Dreamweaver CS5

Por ken burnside
Las transiciones de imágenes se manejan a través de archivos Javascript enlazados.
Creatas Images/Creatas/Getty Images

Las transiciones de imagen a través de una ventana superpuesta de consulta de Javascript impulsada, son un elemento de diseño web común para la exhibición de fotografías y la transición entre imágenes como pase de diapositivas. Este tipo de transición se suele llamar "caja de Luz". El editor HTML de Adobe, Dreamweaver CS5, te permite enlazar las bibliotecas existentes de fotografías mediante librerías Javascript ya escritas para conseguir este efecto, sin tener que escribir ningún código Javascript por tu cuenta.

Paso 1

Descarga el archivo lightbox predefinido de tu elección, y descomprímelo. Encontrarás una serie de cuatro carpetas y un archivo index.html. Las carpetas son "css", que tiene archivos con hojas de estilo en cascada, "fotos", que contiene dos copias de cada una de las fotos que vas a utilizar, una con una miniatura, otra con resolución completa, "imágenes", que contiene los iconos utilizados para los botones y controles, y "JS", que contiene los archivos de Javascript que vas a utilizar.

Paso 2

Copia tus propias imágenes y las imágenes en miniatura en la carpeta"fotos", asegúrate de que en las miniaturas antepones el nombre de la imagen con "thumb_". Por ejemplo, "car.jpg" tendría una miniatura de "thumb_car.jpg". Asegúrate de que cada imagen tiene su miniatura correspondiente.

Paso 3

Copia la carpeta lightbox en el directorio de trabajo para hacer la copia local de tu sitio web, y abre tu página web en Dreamweaver. Utiliza la opción de herramienta "enlazar imágenes" para enlazar las imágenes en miniatura de tu página web en los lugares en los que deseas que estén.

Paso 4

Haz clic en cada imagen en miniatura y observa el área de propiedades de elemento de la aplicación Dreamweaver, encontrarás una opción para crear un enlace en torno a esa miniatura. Al lado de ese cuadro de texto hay un icono "dirigir a archivo". Haz clic ahí y arrastra la flecha que hace que la imagen sea más grande en la imagen de esa miniatura. Repite este procedimiento hasta que hayas vinculado la miniatura de cada imagen.

Paso 5

Haz clic en la ventana de código del archivo HTML, y desplázate hasta la cabecera. Dentro del head y , escribe una etiqueta que tenga este aspecto:

Paso 6

Agrega una etiqueta de script en segundo lugar, de esta manera:

La etiqueta de secuencia de comandos que agregas muestra la barra de herramientas "jQuery", y ésta detiene el código específico javascript. El nombre del código puede variar dependiendo de la caja de luz que estás utilizando.

Paso 7

Establece la función de "enganche" en tu caja de luz desde el código fuente dado, dentro de una función de Javascript que se vea así:

Paso 8

Desplázate hacia abajo y encuentra cada etiqueta que rodea a una etiqueta . Introduce el siguiente texto en cada etiqueta:

class = "lightbox"

justo antes del corchete de cierre de la etiqueta . Por ejemplo, podría ser así:

Paso 9

Vincula el archivo CSS que acompaña a lightbox a la cabecera de tu documento HTML, puedes hacer esto con la función "Adjuntar hoja de estilos" de Dreamweaver en el panel Archivos. Busca el archivo jQuery.css y vincúlalo.