Cómo establecer tamaño máximo en la mesa de luz

La mesa de luz es un término general que se refiere a una ventana "modal" que se superpone una página Web cuando se hace clic en una imagen, que muestra una versión ampliada de la imagen. El script jQuery original, que ahora se llama "la mesa de luz 2," ha servido de base para muchos otros scripts que ya han sido liberados, como PrettyPhoto, Litebox y Slimbox. Cada guión está escrito con sus propios estilos únicos y variables y puede tener diferentes métodos para controlar el tamaño máximo de las imágenes. PrettyPhoto, por ejemplo, le permite establecer una altura y anchura predeterminada en la secuencia de comandos de configuración se inserta en el encabezado del documento HTML. Con Lightbox2, modificaciones se deben hacer a la secuencia de comandos para permitir una imagen para ajustar el tamaño de la pantalla del usuario.

Instrucciones

1 Descarga la última versión del guión mesa de luz desde la página oficial Lightbox2. Se extrae la carpeta de scripts, y abrirlo para localizar el archivo "lightbox.js". Abra el archivo en un editor HTML o texto.

2 Busque las siguientes líneas de código alrededor de la línea 262 del archivo de script:

this.lightboxImage.width = imgPreloader.width;

this.lightboxImage.height = imgPreloader.height;

Coloca el cursor al comienzo de cada línea y tipo dos barras diagonales para desactivar el código:

//this.lightboxImage.width = imgPreloader.width;

//this.lightboxImage.height = imgPreloader.height;

3 Introducir una nueva línea debajo de las dos líneas que haya desactivado. Copiar y pegar el siguiente código a la nueva línea:

si (imgPreloader.width> 850)

imgPreloader.width = 800;

si (imgPreloader.height> 620) imgPreloader.height = 600;

Por defecto, este código actualizado fijará su máxima anchura y altura de 800 píxeles de ancho por 600 píxeles de alto. Para ajustar los valores a sus dimensiones deseadas, añadir 50 a la anchura deseada y editar el primer valor numérico. Editar el segundo valor con la anchura exacta. Editar los valores de tercero y cuarto con el valor de la altura deseada, añadiendo 20 con el tercer valor. Los píxeles adicionales permiten el relleno del recipiente mesa de luz.

4 Guarde el archivo de secuencia de comandos y abrir el archivo "lightbox.css" ubicado en la carpeta "css". Añadir un "max-height" y la declaración "max-width" al selector "#lightbox img" y establecer los valores a su altura y anchura elegida. Por ejemplo:

caja de luz img {width: auto; altura: auto; max-width: 800px; max-height: 600px;}

5 Guarde el archivo y acceder a su servidor Web. Cambie el nombre de "lightbox.js" existentes y archivos "lightbox.css" en su servidor aa prueba de fallos en caso de que algo va mal con los archivos editados. Cargar los archivos modificados, a continuación, vaciar la caché del navegador. Probar los cambios haciendo clic en una imagen de la mesa de luz habilitado y seguir para modificar los estilos si lo deseas.