[cisco007]

[bbcodet]Titulo:[/bbcodet] Lighbox2 Imagen BBcode
[bbcodet]Descripción:[/bbcodet] Un bbcode para abrir tus imagenes en los mensajes en un tipos highslide/lightbox! muy simple y sencillo!
[bbcodet]Autor(es)/or Enlace:[/bbcodet] Autor de el bbcode yo, archivos de aqui: Lightbox2

Pedido?: no!

[bbcodet]Historial desde la pagina oficial:[/bbcodet]
cambios

• v2.51 - 4/20/12 - IE Fix: removed stray console.log statements. :-/
• v2.5 - 4/10/12 - Switch to jQuery. Code put in Github. Compiling with Coffeescript and SASS.

[bbcodet]Notas:[/bbcodet] vean las FAQ's

lo primero que hay que hacer es, editar el overall_header.html para añadir estas ediciones:
[findcode]Buscar

Code: Select all

</head>

Añadir antes Agregue la línea siguiente(s) en una nueva línea en blanco antes de la línea de encontrar.

Code: Select all

<script src="{ROOT_PATH}lightbox/jquery-1.7.2.min.js"></script>
<script src="{ROOT_PATH}lightbox/lightbox.js"></script>
<link href="{ROOT_PATH}lightbox/lightbox.css" rel="stylesheet" />

[/findcode]

[i_i][bbcodet]Uso BBcode:[/bbcodet]

Code: Select all

[lightbox]{URL}[/lightbox]

[/i_i]
[i_i][bbcodet]Reemplazo HTML:[/bbcodet]

Code: Select all

<a href="{URL}" rel="lightbox" title=""><img src="{URL}" style="width:25%;height:25%;" alt="" /></a>

[/i_i]
[i_i][bbcodet]Línea de ayuda:[/bbcodet]

Code: Select all

[lightbox]enlace de imagen[/lightbox]

[/i_i]
[i_i][bbcodet]Ejemplo:[/bbcodet]

Code: Select all

[lightbox]http://www.adroie.com/gogreen/blog/wp-content/uploads/2010/06/mother_nature.jpg[/lightbox]

[/i_i]

[bbcodet]DEMO:[/bbcodet]
[lightbox]http://www.adroie.com/gogreen/blog/wp-c ... nature.jpg[/lightbox]

[bbcodet]FAQ:[/bbcodet]

1. pero tengo otros enlaces de jquery en la cabecera!?
   [spoiler=respuesta]con un solo enlace que tengas te puede funcionar todo![/spoiler]

[bbcodet]Descarga:[/bbcodet]
[dwnbt]http://rapidshare.com/files/1387415737/lightbox.zip[/dwnbt]

[cisco007]

[approved]Tambien pueden usar este bbcode para muchas imagenes![/approved]

tienen que hacer un nuevo bbcode asi:

[i_i][bbcodet]Uso BBcode:[/bbcodet]

Code: Select all

[lightboxg]{URL}[/lightboxg]

[/i_i]
[i_i][bbcodet]Reemplazo HTML:[/bbcodet]

Code: Select all

<a href="{URL}" rel="lightbox[gallery]" title=""><img src="{URL}" style="width:25%;height:25%;" alt="" /></a>

[/i_i]
[i_i][bbcodet]Línea de ayuda:[/bbcodet]

Code: Select all

[lightboxg]enlace de imagen[/lightboxg]

[/i_i]
[i_i][bbcodet]Ejemplo:[/bbcodet]

Code: Select all

[lightboxg]http://www.adroie.com/gogreen/blog/wp-content/uploads/2010/06/mother_nature.jpg[/lightboxg][lightboxg]http://ts2.mm.bing.net/th?id=H.5041450625073213&pid=1.7[/ligthboxg][lightboxg]http://4.bp.blogspot.com/_hXjhQ1_xjuQ/SNKX-heF2fI/AAAAAAAAEI0/PO_DFfJ1wiI/s400/M%C3%A8re+nature.jpg[/lightboxg]

[/i_i]

[bbcodet]DEMO:[/bbcodet]
[lightboxg]http://www.adroie.com/gogreen/blog/wp-c ... nature.jpg[/lightboxg]
[lightboxg]http://ts2.mm.bing.net/th?id=H.5041450625073213&pid=1.7[/lightboxg]
[lightboxg]http://4.bp.blogspot.com/_hXjhQ1_xjuQ/S ... nature.jpg[/lightboxg]

[cisco007]

[warning]debo corregir un pequeño error![/warning]
después o antes de subir la carpeta y el contenido a tu foro, debes corregir el archivo .css
[findcode]Buscar Esto puede ser un encuentro parcial y no toda la línea

Code: Select all

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../images/next.png) right 48% no-repeat;
}

Reemplazar con Reemplazar la línea(s) anteriores de encontrar con lo siguiente.

Code: Select all

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(images/next.png) right 48% no-repeat;
}

[/findcode]

debes hacer esto para que salgan las imágenes de navegación cuando uses el bbcode para varias imágenes!

[cisco007]

[informacion]Reservado![/informacion]