Cómo se hace: Lightbox con HTML

Escrito por scott stanchak | Traducido por manuel lama paniagua
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo se hace: Lightbox con HTML
Lightbox es una aplicación de Javascript. (Hemera Technologies/Photos.com/Getty Images)

Lightbox permite a los desarrolladores web mostrar varias imágenes en una sola página HTML. Al hacer clic en un enlace alterado se mostrará cada imagen asignada en una ventana emergente interna. El efecto se consigue utilizando código JavaScript.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Carga imágenes a tu servidor Web. Para propósitos de visionado, intenta hacer que cada imagen sea del mismo tamaño en píxeles. Anota la ruta URL de cada archivo.

  2. 2

    Crea el directorio "lightbox" en el directorio principal de tu servidor Web. Almacenarás todos los elementos de Lightbox en este directorio.

  3. 3

    Descarga el código de Lightbox. Descomprime el archivo.

  4. 4

    Carga las carpetas de css, imágenes y javascript en el directorio "lightbox" en tu servidor web.

  5. 5

    Abre el archivo HTML que deseas añadir a Lightbox. Agrega las siguientes cuatro líneas de código entre las etiquetas head </ head>: <script type="text/javascript" src="http://www.tu_url.com/lightbox/js/prototype.js"> </ script> <script type="text/javascript" src="http://www.tu_url.com/lightbox/js/scriptaculous.js?load=effects,builder"> </ script> src="http://www.tu_url.com/lightbox/js/lightbox.js"> <script type="text/javascript" </ script> <link rel="stylesheet" href="http://www.tu_url.com/lightbox/css/lightbox.css" type="text/css" media="screen" />

    Reemplaza "yoururl.com" con la URL principal de tu sitio web.

  6. 6

    Agrega el código JavaScript de Lilghtbox a tu HTML. Coloca el siguiente código entre las etiquetas <body> </ body>: <a href="http://www.tu_url.com/images/image-1.jpg" rel="lightbox" title="mi título"> imagen # 1 </ a>

    Reemplaza "http://www.yoururl.com/images/image-1.jpg" por la ruta URL de una de las imágenes que hayas subido en el paso 1. Cambia "mi título" a cualquier título que desees asignar a esa imagen. Cambia "la imagen # 1" por cualquier texto o código de imagen.

  7. 7

    Guarda tu documento HTML. Súbelo a tu servidor Web. Previsualiza la página para asegurarte de que el código Lightbox funcione correctamente.

Consejos y advertencias

  • Si tus imágenes no se muestran, comprueba que los archivos "lightbox.css" y "lightbox.js" están correctamente colocados y asegúrate de que las rutas a los archivos de imagen son correctos.

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