- 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
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.
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:
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!
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" />
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>
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!