BBCode MODLightbox2 Imagen BBcode

BBCode MOD para phpBB 3

Moderadores: Carlos, Soporte en phpBB, Soporte en MODs

Reglas del Foro
Solo BBCode, no dudas por favor.
Avatar de Usuario
cisco007
Usuario
Usuario
Mensajes: 367
Registrado: 05 Ene 2012 15:59:22
Bandera: Mexico
Nombre real: cisco

Lightbox2 Imagen BBcode

Notapor cisco007 » 05 Feb 2013 14:28:30

[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

Código: Seleccionar todo

</head>

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

Código: Seleccionar todo

<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]

Código: Seleccionar todo

[lightbox]{URL}[/lightbox]
[/i_i]
[i_i][bbcodet]Reemplazo HTML:[/bbcodet]

Código: Seleccionar todo

<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]

Código: Seleccionar todo

[lightbox]enlace de imagen[/lightbox]
[/i_i]
[i_i][bbcodet]Ejemplo:[/bbcodet]

Código: Seleccionar todo

[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-content/uploads/2010/06/mother_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]

Avatar de Usuario
cisco007
Usuario
Usuario
Mensajes: 367
Registrado: 05 Ene 2012 15:59:22
Bandera: Mexico
Nombre real: cisco

Re: Lightbox2 Imagen BBcode

Notapor cisco007 » 05 Feb 2013 14:43:59

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

tienen que hacer un nuevo bbcode asi:

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

Código: Seleccionar todo

[lightboxg]{URL}[/lightboxg]
[/i_i]
[i_i][bbcodet]Reemplazo HTML:[/bbcodet]

Código: Seleccionar todo

<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]

Código: Seleccionar todo

[lightboxg]enlace de imagen[/lightboxg]
[/i_i]
[i_i][bbcodet]Ejemplo:[/bbcodet]

Código: Seleccionar todo

[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-content/uploads/2010/06/mother_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/SNKX-heF2fI/AAAAAAAAEI0/PO_DFfJ1wiI/s400/M%C3%A8re+nature.jpg[/lightboxg]

Avatar de Usuario
cisco007
Usuario
Usuario
Mensajes: 367
Registrado: 05 Ene 2012 15:59:22
Bandera: Mexico
Nombre real: cisco

Re: Lightbox2 Imagen BBcode

Notapor cisco007 » 05 Feb 2013 14:48:31

[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

Código: Seleccionar todo

/* 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.

Código: Seleccionar todo

/* 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!

Avatar de Usuario
cisco007
Usuario
Usuario
Mensajes: 367
Registrado: 05 Ene 2012 15:59:22
Bandera: Mexico
Nombre real: cisco

Re: Lightbox2 Imagen BBcode

Notapor cisco007 » 05 Feb 2013 14:48:55

[informacion]Reservado![/informacion]


Social Media

     

Volver a “BBCode MOD”