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

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

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 </ head>, escribe una etiqueta que tenga este aspecto:

<script type="text/javascript" src="

Dreamweaver mostrará un pequeño menú donde puedes seleccionar la carpeta .js que va usar tu caja de luz, y así podrás seleccionar el archivo "jquery.js". El código final se verá de esta manera, pero puede variar dependiendo de donde hayas colocado la carpeta de la caja de luz:

<script type="text/javascript" src="js/jquery.js"> </ script>


Paso 6

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

<script type="text/javascript" src="js/jquery.lightbox-0.5..js"> </ script>

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í:

<script type="text/javascript"> $(function() { $('a.lightbox').lightBox(); }); </script>


Paso 8

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

class = "lightbox"

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

<a href="photos/car.jpg" class="lightbox">


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.