Hola a todos, el día de hoy les traigo un tuto para que implementen lightbox en sus foros, con esto lograrán justo esto:
![[Imagen: lightbox.png]](https://i.ibb.co/hXQWvJM/lightbox.png)
PASO 1:
Descargar Lightbox
PASO 2:
Subir el contenido de la carpeta "SRC" de la siguiente manera:
1.- el contenido de la carpeta images en la carpeta images de la raíz de tu foro.
2.- el contenido de la carpeta js en la carpeta jscripts de la raíz de tu foro.
3.- subir el contenido de la carpeta css en la raíz de tu foro (opcional)
PASO 3:
Ir a la plantilla: sin grupo -> headerinclude y agregar antes de {$stylesheets}:
PASO 1:
Descargar Lightbox
PASO 2:
Subir el contenido de la carpeta "SRC" de la siguiente manera:
1.- el contenido de la carpeta images en la carpeta images de la raíz de tu foro.
2.- el contenido de la carpeta js en la carpeta jscripts de la raíz de tu foro.
3.- subir el contenido de la carpeta css en la raíz de tu foro (opcional)
PASO 3:
Ir a la plantilla: sin grupo -> headerinclude y agregar antes de {$stylesheets}:
Código PHP:
<?php
<script src="jscripts/lightbox.js"></script>
PASO 4:
Ir a la plantilla: mycode -> mycode img y reemplazar todo por:
Código PHP:
<?php
<a href="{$url}" data-lightbox="image-1">
<img src="{$url}" loading="lazy" {$width}{$height} alt="{$alt}"{$css_align} class="mycode_img" /></a>
PASO 5:
Ir a tu panel de administración en la pestaña estilos, seleccionas tu theme actual y dar clic en agregar hoja de estilo, la crearemos de la siguiente manera:
1.- nombre: lightbox.css
2.- Globalmente.
3.- Escribir mi propio código.
4.- copia el contenido del archivo de la carpeta CSS de lightbox (esto sustituye el punto 3 del paso 2.
Para esto abriremos el archivo lightbox.css con nuestro blog de notas o notepadd y copiaremos todo y pegaremos en la hoja de estilo a crear.
PASO 6:
Ir a una publicación y ver los resultados.
Espero les sea de utilidad C;
Última modificación: 1 Nov, 2020, 5:01 pm por angeluz.
