Instalar HTML5 LightBox en tu sitio web

  1. Descargar la versión gratuita de HTML5 lightBox y copia los archivos en tu sitio web.
  2. Adjuntar los archivos jquery.js y html5lightbox.js antes del cierre de la etiqueta </head>

Darle clic al la imagen de “script” script buscar los archivos anteriores y poner aceptar. El código será:

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

 

  1. Añadir el atributo class="html5lightbox" dentro de la etiqueta de inicio <a> para activar el efecto del html5 lightbox.
<a href=”images/galeria/galeria1.jpg” class=”html5lightbox” >

Datos Adicionales

  1. Añadir el atributo title="Toronto" dentro de la etiqueta de inicio <a> para colocar el título del lightbox.
<a href="images/galeria/galeria1.jpg" class="html5lightbox"  title="Toronto">
  1. Si se desea agrupar las imágenes se debe colocar el atributo data-group="mygroup" dentro de la etiqueta de inicio <a>. Esto se debe realizar en todas las imágenes que desea agrupar.
<a href="images/galeria/galeria1.jpg" class="html5lightbox" data-group="mygroup" title="Toronto">
  1. Si desea colocar una marca de agua coloque el siguiente código antes del cierre de la etiqueta </head>:
<script type="text/javascript">
var html5lightbox_options = {
watermark: "images/logo.png",
watermarklink: "http://www.enlacabezadecesar.com/blog"
};</script>