[Tutorial] Como instalar el Lightbox2

Hola, muchos se preguntaran que es el Lightbox2 pues es un sencillo script utilizado para superposicionar las imágenes en pantalla completa. Es muy fácil de configurar y funciona en todos los navegadores modernos.
Ejemplo de lo que queremos lograr ver demo en la pagina oficial. Lightbox 2

Demo de mi pagina de pruebas: DEMOLIGHTBOX2

Entonces como ya sabemos para que sirve, vamos con la instalacion.

1. Descargamos los archivos de la pagina de lighbox2 o desde aqui
2. Subimos a la raiz del foro las carpetas js y css. y las imagenes a la carpeta images.
3. Ahora con todo subido, nos vamos a Admincp -> Estilos y Plantillas -> Administrar estilos y en nuestro estilo buscamos la plantilla Header.
4. Dentro de la plantilla Header colocamos lo siguiente, esto lo colocamos al final de la plantilla.

Código HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Listo y guardamos.

5. Ahora crearemos un BBcode ya que originalmente el lightbox esta hecho para utilizarlo en html entonces para que sea utilizado por cualquier usuario lo vamos a tranformar en BBcode.

Nos vamos a Admincp -> Codigos BB -> Agregar nuevo codigo BB.

Titulo: Lightbox
Nombre de la Etiqueta: img2
Reemplazar:

Código HTML:

<a href="{param}" rel="lightbox[roadtrip]" title="Imagen en Lightbox"><img src="{param}" width="300" height="200"></a>

Ejemplo: [img2]http://www.tusitio.com/images/image-1.jpg[/img2]
Usar {option} : No

Imagen de Botón: Abajo les voy a dejar una adjunta, pero le pueden colocar la que deseén.

Eliminar Etiqueta Si Está en Blanco: si
Deshabilitar Código BB Dentro de Este Código BB: no
Deshabilitar Caritas Dentro de Este Código BB: no
Deshabilitar Envoltura de Texto Dentro de Este Código BB: no

Listo y guardan.

Nota: el tamaño de la imagen la pueden colocar a su gusto, ojo este tamaño no es el que se ve al final, si no el es que se previsualiza antes. lo pueden cambiar en el codigo - Ancho: width="300" Largo: height="200"
Nota: En la imagen final se ve un pequeño titulo abajo eso lo pueden cambiar, si quieren le colocan el nombre se su foro o lo que uds quieran, que es el sig title="Imagen en Lightbox"


Listo ya tienen su Lightbox2 Instalado en su foro espero les haya gustado este tutorial facil y sencillo.


Edito: Agregada la funcion de multiples imagenes, ya que anteriormente habia que ver imagen por imagen, ahora se va haciendo click en la misma imagen y se va rotando. (si es que en el tema tienes mas de 1 imagen). solo se agrego un [roadtrip] al Html del BBcode ejemplo rel="lightbox[roadtrip]"

Dudas y problemas se las respondere en los post!