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

Escrito por ken burnside Google | Traducido por manuel lama paniagua
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
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. (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.

Otras personas están leyendo

Instrucciones

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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>

  6. 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.

  7. 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>

  8. 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">

  9. 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.

Consejos y advertencias

  • También puedes poner un atributo de título en cada atributo , así: , aunque esto no es necesario para crear la transición de imagen.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles