![Efecto Lightbox automatico en imagenes [Foroactivo] - Página 2 2V2SM5G](https://2img.net/h/i.imgur.com/2V2SM5G.png)
1![Efecto Lightbox automatico en imagenes [Foroactivo] - Página 2 Empty](https://2img.net/i/empty.gif)
Efecto Lightbox automatico en imagenes [Foroactivo] Jue Jun 21, 2012 4:24 am
giObanii
Mensajes : 11 
Monedas : 22 Recuerdo del primer mensaje :
![Efecto Lightbox automatico en imagenes [Foroactivo] - Página 2 Tutorialesforoactivocom](https://2img.net/r/ihimizer/img684/9668/tutorialesforoactivocom.jpg)
Autor:
giObanii fiOri (3mOtrOnik)
DescripciónCon este sencillo tutorial podras tener el tan anciado efecto Lightbox en las imagenes de los post en foros de foroactivo, ya sabemos que tenemos una herramienta que reduce la imagenes pero para ser sincero a mi no me gusto nadita yo esperaba algo con más convenciomiento. Pero despues de batallar unos dias para lograr hacerlo pues no soy un experto, logre hacer que las imagenes que esten en los post tengan un efecto Lightbox automaticamente ya que es posible hacerlo pero deberiamos insertar unas lineas de HTML y eso en verdad es frustrante para nuestros usuarios.
Nos dirigimos a:
![Efecto Lightbox automatico en imagenes [Foroactivo] - Página 2 732987880](https://2img.net/u/2713/25/78/83/smiles/732987880.png)
-Panel de administración
--Modulos
---HTML & JAVASCRIPT
----Gestión de los códigos Javascript
Copiamos el siguiente codigo: Responder el tema para ver.
Pueden Configurar "En todas las paginas" o en solo "En los temas" Cualquiera funciona pero solo afectara a las imagenes de los post.
Este paso es OPCIONAL ya que si tienen activada la opcion Redimension de las imágenes no es necesario.
Vamos a:
-Panel de administración
--Visualización
---Imágenes y Colores
----Colores
-----CSS Stylesheet:
y pegamos el CSS correspondiente:
PHPBB2
PHPBB3
PUNBB
INVISION
En el codigo anterior pueden modificar 600px por la anchura maxima de las imagenes en tus post.
Autor:
giObanii fiOri (3mOtrOnik)
Descripción
Instrucciones:
En realidad no haran casi nada ya que les he ahorrado el trabajo de alojar los archivos imagenes entre otras cosas ustedes simplemente copiaran el codigo correspondiente.Nos dirigimos a:
-Panel de administración --Modulos ---HTML & JAVASCRIPT ----Gestión de los códigos JavascriptCopiamos el siguiente codigo: Responder el tema para ver.
Pueden Configurar "En todas las paginas" o en solo "En los temas" Cualquiera funciona pero solo afectara a las imagenes de los post.
Este paso es OPCIONAL ya que si tienen activada la opcion Redimension de las imágenes no es necesario.
Vamos a:
-Panel de administración --Visualización ---Imágenes y Colores ----Colores -----CSS Stylesheet:y pegamos el CSS correspondiente:
PHPBB2
- Código:
.postbody img {max-width: 600px;}
PHPBB3
- Código:
.postbody img {max-width: 600px;}
PUNBB
- Código:
.entry-content img {max-width: 600px;}
INVISION
- Código:
.post-entry img {max-width: 600px;}
En el codigo anterior pueden modificar 600px por la anchura maxima de las imagenes en tus post.
UPDATE: 20/06/12
El Script tambien es compatible con la opcion Redimension de las imágenes asi que no habra problema si tienes esta opcion activada.
Aademas oculta los enlaces que salen arriba de las imagenes que sobrepasan las dimensiones extablecidas los cuales son [Ampliar esta imagen. Clic aquí para ver su tamaño original]
UPDATE: 23/06/12
Se ha cambiado el aspecto del lightbox utilizando fancyBox.
Ademas esto resuelve el problema de las imagenes enormes que sobrepasaban la anchura del navegador.
Se ha añadido la posibilidad de que los enlaces que dirigen a videos de youtube se visualizen tipo lightbox.
Tambien se ha solucionado el error que las imagenes con enlace son afectadas por el script ahora se deshabilita el efecto para dichas imagenes.
No es necesario volver a copiar el codigo.
DEMO
Mas info...
.Mas info...
Última edición por giObanii el Sáb Jun 23, 2012 11:53 pm, editado 17 veces
