Tutorial: Como instalar el Lightbox2

imported_Ryuk Seguir

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
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.
Enlace eliminado

Enlace eliminado

Demo de mi pagina de pruebas: Enlace eliminado

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

1. Descargamos los archivos de la pagina de Enlace eliminado o desde Enlace eliminado
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.

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:
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! ;)
 

barcraft

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Nov 2009
Mensajes
305
Re: [Tutorial] Como instalar el Lightbox2

Mi duda es para VB4... ya que en el punto 2 dices... "Subimos a la raiz del foro las carpetas js y css. y las imagenes a la carpeta images." ... pero en VB4 no tengo una carpeta para el foro... se deja en la raiz no mas?
 

imported_Ryuk

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
Re: [Tutorial] Como instalar el Lightbox2

No lo e probado vB4 pero me imagino que debe ser igual, y si las 2 carpetas se dejan en la raiz del foro osea donde tienes las carpetas includes, javascript, admincp, images, etc.
 

txuski

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
16 Feb 2012
Mensajes
7
Re: [Tutorial] Como instalar el Lightbox2

Un poquito de ayuda por favor...
He hecho todo tal cual pero no consigo que funcione, se ve la imagen fija, como pegada en el foro.

- - - - - - - - - - doble respuesta - - - - - - - - - -

Un poquito de ayuda por favor...
He hecho todo tal cual pero no consigo que funcione, se ve la imagen fija, como pegada en el foro.

Ni casooo ya está!

Muy chulo!
Gracias!
 

txuski

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
16 Feb 2012
Mensajes
7
Re: [Tutorial] Como instalar el Lightbox2

Voy añadir mi granito de arena...

Al agregar el codigo BB en el texto a reemplazar si ponemos los siguiente, conseguiremos que las imagenes se abran solo con pasar el ratón por encima:

HTML:
<a href="{param}" onMouseOver="this.click()" rel="lightbox[roadtrip]" title="Imagen en Lightbox"><img src="{param}" width="300" height="200"></a>

Espero que os sirva de ayuda ;)
 
Arriba