2019 - © MAUVIMI - Tuluá (Valle) - Colombia - mauvimi@yahoo.es

Haz Interesante Tu Web

Códigos HTML

Rockero_GIF_MVM_160x160
Este efecto es igual al de ampliar imagen haciendo un clic con el mouse, solo que aqui se activa y desactiva dando solo UN CLIC.

CODIGO PARA CADA IMAGEN

DECLARACION

Código Ampliar Fotos - Clic con el mouse (Opción 2)

Este efecto es igual al de ampliar imagen pasando el mouse, solo que aqui se activa dando UN CLIC y se desactiva dando DOS CLIC.

Código Ampliar Fotos - Clic con el mouse (Opción 1)

Es muy util si deseas ampliar una imagen pasando el mouse por encima de la imagen y volver a la imagen miniatura al retirar el mouse de la imagen ampliada. Observa que al ampliar oculta el contenido de la Web. Recomiendo que dimensiones la imagen ampliada con moderación.

Código Ampliar Fotos - Pasando Mouse por la imagen

Lo interesante de este plugin comparado a sus alternos LIGHTBOX, THICKBOX y otros, es que LYTEBOX es extremadamente configurable y de muy bajo tamaño. Lo primera que debes hacer es descargar los ficheros del plugin LYTEBOX 5.2, AQUI y descomprimelo en tu PC. El .zip contiene: lytebox.css (Solo se modificará si cambias el tamaño del borde de la imagen) lytebox.js images (NO debes modificar ningún archivo de ésta carpeta) Para modificar el archivo lytebox.js te recomiendo que lo abras con el programa "WordPad" que está disponible en todo PC ya que viene adjunto en la instalación del WINDOWS. 1. Si deseas personalizar más tu LYTEBOX, abre el archivo lytebox.js y modifica los parametros según tus necesidades. Observa los parámetros a modificar, 2. Si deseas modificar el tamaño del borde de la imagen (padding), abre el lytebox.css abrelo y busca la parte que dice: #lbImageContainer, #lbIframeContainer { padding: 10px; } #lbLoading { donde esta el 10, modificalo según tu gusto, y guarda los cambios. El valor debe ser igual tanto en el archivo lytebox.js como en el lytebox.css, en el primero ya sabes como hacerlo. 3. Si deseas que la grafica se situe en la parte superior del navegador (TOP de la ventana del navegador), modifica el archivo lytebox.js, en la parte que dice: var object = this.doc.getElementById('lbMain'); object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px"; donde esta el 15 coloca 1000 para llegar al TOP, o modificalo a tu gusto y guarda los cambios. Una vez hayas guardado los cambios en los archivos, los subes a tu sitio y utilizas la DECLARACION y EL CODIGO HTML para hacer las llamadas de tus imagenes y direcciones URL. Para subir los archivos, a través del "File Manager", te recomiendo: 1. Crear una carpeta en tu sitio, llamada "lytebox" para que puedas identificarla. 2. Incluye en esta carpeta todos los archivos: lytebox.css - lytebox.js - carpeta con imagenes. No saques los archivos de esta carpeta, copiala dentro de la carpeta "lytebox" tal cual. 3. Si quieres variedad en los colores y presentaciones, puedes crear cuantas carpetas lytebox desees. Por ejemplo, si quieres que el fondo sea verde (green) crea carpeta “lytebox_green” e incluye todos los archivos ya configurados para que sea verde y haz un llamado a esta carpeta cuando lo necesites.


10_01_02_E37_Birthday01

Código Ampliar Fotos - Utilizando el efecto LYTEBOX

MENU
MAUVIMI
MAUVIMI
2019 - © MAUVIMI - Tuluá (Valle) - Colombia - mauvimi@yahoo.es

Haz Interesante Tu Web

Códigos HTML

Rockero_GIF_MVM_160x160
Este efecto es igual al de ampliar imagen haciendo un clic con el mouse, solo que aqui se activa y desactiva dando solo UN CLIC.

CODIGO PARA CADA IMAGEN

DECLARACION

Código Ampliar Fotos - Clic con el mouse (Opción 2)

Este efecto es igual al de ampliar imagen pasando el mouse, solo que aqui se activa dando UN CLIC y se desactiva dando DOS CLIC.

Código Ampliar Fotos - Clic con el mouse (Opción 1)

Es muy util si deseas ampliar una imagen pasando el mouse por encima de la imagen y volver a la imagen miniatura al retirar el mouse de la imagen ampliada. Observa que al ampliar oculta el contenido de la Web. Recomiendo que dimensiones la imagen ampliada con moderación.

Código Ampliar Fotos - Pasando Mouse por la imagen

Lo interesante de este plugin comparado a sus alternos LIGHTBOX, THICKBOX y otros, es que LYTEBOX es extremadamente configurable y de muy bajo tamaño. Lo primera que debes hacer es descargar los ficheros del plugin LYTEBOX 5.2, AQUI y descomprimelo en tu PC. El .zip contiene: lytebox.css (Solo se modificará si cambias el tamaño del borde de la imagen) lytebox.js images (NO debes modificar ningún archivo de ésta carpeta) Para modificar el archivo lytebox.js te recomiendo que lo abras con el programa "WordPad" que está disponible en todo PC ya que viene adjunto en la instalación del WINDOWS. 1. Si deseas personalizar más tu LYTEBOX, abre el archivo lytebox.js y modifica los parametros según tus necesidades. Observa los parámetros a modificar, 2. Si deseas modificar el tamaño del borde de la imagen (padding), abre el lytebox.css abrelo y busca la parte que dice: #lbImageContainer, #lbIframeContainer { padding: 10px; } #lbLoading { donde esta el 10, modificalo según tu gusto, y guarda los cambios. El valor debe ser igual tanto en el archivo lytebox.js como en el lytebox.css, en el primero ya sabes como hacerlo. 3. Si deseas que la grafica se situe en la parte superior del navegador (TOP de la ventana del navegador), modifica el archivo lytebox.js, en la parte que dice: var object = this.doc.getElementById('lbMain'); object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px"; donde esta el 15 coloca 1000 para llegar al TOP, o modificalo a tu gusto y guarda los cambios. Una vez hayas guardado los cambios en los archivos, los subes a tu sitio y utilizas la DECLARACION y EL CODIGO HTML para hacer las llamadas de tus imagenes y direcciones URL. Para subir los archivos, a través del "File Manager", te recomiendo: 1. Crear una carpeta en tu sitio, llamada "lytebox" para que puedas identificarla. 2. Incluye en esta carpeta todos los archivos: lytebox.css - lytebox.js - carpeta con imagenes. No saques los archivos de esta carpeta, copiala dentro de la carpeta "lytebox" tal cual. 3. Si quieres variedad en los colores y presentaciones, puedes crear cuantas carpetas lytebox desees. Por ejemplo, si quieres que el fondo sea verde (green) crea carpeta “lytebox_green” e incluye todos los archivos ya configurados para que sea verde y haz un llamado a esta carpeta cuando lo necesites.


10_01_02_E37_Birthday01

Código Ampliar Fotos - Utilizando el efecto LYTEBOX

MAUVIMI