En lugar de usar un complemento hinchado que tiene características que nunca usará, este tutorial le muestra cómo crear una caja de luz súper simple para manejar imágenes. Es perfecto para galerías de imágenes, portafolios y más.!

Paso 1: El marcado

Abra su editor de texto favorito (yo uso Coda) y comencemos con nuestro formato HTML.

Nota: Si no proporciona un DOCTYPE adecuado y la página se representa en modo peculiar, la caja de luz no se mostrará correctamente en Internet Explorer.

      
 
Super Simple Lightbox
 
Nuestra super simple demo de lightbox. Aquí están los enlaces de imágenes: 
 
  Foto 1  
 
  Foto 2  
 
  Foto 3  
 
 
 
   

Nota: Usamos la clase lightbox_trigger En cada enlace que tenga una imagen queremos mostrarla en nuestra caja de luz. Esto resulta útil cuando queremos apuntar a esos elementos en el script que escribiremos.

Paso 2: El CSS

Apliquemos algunos estilos básicos de CSS a nuestra página. Para este ejemplo básico, colocaremos todos nuestros CSS en etiquetas dentro del sección.

cuerpo margen: 0; relleno: 0; fondo: #efefef; text-align: center; / * usado para centrar div en IE * / #wrapper width: 600px; margen: 0 auto; / * centra la div horizontalmente en todos los navegadores (excepto IE) * / background: #fff; alineación de texto: izquierda; / * restablece la alineación del texto desde la etiqueta del cuerpo * / border: 1px solid #ccc; borde superior: ninguno; relleno: 25px; / * Agreguemos algunos estilos CSS3, estos se degradarán con gracia en el navegador antiguo e IE * / border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; cuadro de sombra: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; 

Ahora tenemos una página simple pero elegante en la que podemos probar nuestra ventana de lightbox.

Paso 3: Notas sobre CSS en Internet Explorer

Nosotros usamos margen: 0 auto; para centrar nuestro #wrapper div horizontalmente en la página. Esto funciona muy bien para todos los navegadores, excepto ... el rollo de batería ... lo has adivinado, Internet Explorer. Para solucionar este problema, utilizamos text-align: center; en la etiqueta del cuerpo que centra los divs infantiles (en nuestro caso, el #wrapper div) horizontalmente en la página.

Sin embargo, utilizando text-align: center; en la etiqueta del cuerpo centrará la alineación de todo el texto en divs de niños también. Para solucionar esto, restablecemos alineación de texto: izquierda; en la división #wrapper para restaurar todo el contenido secundario adicional a la alineación izquierda. Visite communitymx.com si está interesado en aprender más sobre este tema en particular de IE.

Paso 4: Lightbox HTML

Este es el aspecto que tendrá nuestro código HTML de lightbox. Sin embargo, no lo inserte en el formato HTML. Lo haremos dinámicamente con jQuery. Comprender el código HTML de la caja de luz nos permite personalizarlo con CSS en consecuencia.

 
Haga clic para cerrar
 
  
 

Nota: No hay valor para la imagen. src porque eso dependerá de qué enlace haga clic en el usuario. Por lo tanto, usaremos javascript para insertar el valor dinámicamente más adelante.

Paso 5: Lightbox CSS Black Overlay

Sigamos adelante e insertemos el CSS para nuestra caja de luz. Al hacer esto ahora, los elementos de nuestra página se mostrarán correctamente más adelante cuando insertemos dinámicamente nuestro HTML.

Primero tenemos nuestro #lightbox div que actúa como la superposición negra. Queremos que esto llene la vista completa del usuario, sin importar la resolución de la pantalla.

#lightbox posición: fija; / * mantiene la ventana de la caja de luz en la ventana actual * / top: 0; izquierda: 0; ancho: 100%; altura: 100%; fondo: url (overlay.png) repetición; text-align: center; 

El CSS es bastante sencillo. Aquí hay algunos puntos destacados:

• posición: fijo hace que nuestra superposición aparezca correctamente en la vista actual, sin importar la posición del usuario en la pantalla (parte superior o inferior de la página). Aquí es donde usar el DOCTYPE correcto es útil. Si IE se ejecuta en modo peculiar debido a un DOCTYPE incorrecto (o ninguno), entonces nuestra superposición no aparecerá correctamente.
• ancho: 100%; altura: 100%; Esto hace que nuestro #lightbox div, que actúa como superposición negra, cubra toda la ventana gráfica sin importar la resolución de la pantalla del usuario final..
• fondo: url (overlay.png) repetición; Podríamos haber utilizado el color RGBa para hacer que nuestro color de fondo sea ligeramente transparente. Esto habría requerido algo como fondo: rgba (0,0,0, .7);. Sin embargo, dado que esta propiedad es bastante nueva, la transparencia del color de fondo no funcionará en IE (a menos que aplique ciertos hacks). Entonces, en lugar de usar hacks CSS3 e IE, simplemente creamos un PNG de 1x1 píxeles en photoshop con un fondo negro y establecemos la transparencia en aproximadamente el 75 por ciento..

Paso 6: Instrucciones para el usuario de Lightbox CSS

Solo para asegurarnos de que nuestros usuarios no estén confundidos, agregaremos texto en la superposición de lightbox indicando que pueden hacer clic en cualquier lugar para que desaparezca la ventana de lightbox..

#lightbox p text-align: right; color: #fff; margen derecho: 20px; tamaño de fuente: 12px; 

Paso 7: Imagen CSS Lightbox

Ahora queremos diseñar la imagen que aparecerá en la caja de luz. Simplemente voy a darle algunos efectos CSS3. Obviamente, estos no aparecerán en IE y en los navegadores más antiguos, pero aún así se degradan con gracia. Puede agregar otros efectos aquí si lo desea, como un borde blanco alrededor de la imagen.

#lightbox img box-shadow: 0 0 25px # 111; -webkit-box-shadow: 0 0 25px # 111; -moz-box-shadow: 0 0 25px # 111; ancho máximo: 940px; 

Nota:Añadiendo un anchura máxima reducirá las imágenes de alta resolución a las que podríamos estar vinculando. Esto ayuda a garantizar que todas las imágenes encajen en la ventana gráfica..

Así es como se vería nuestra página si insertáramos nuestro HTML de lightbox en el documento (lo haremos con javascript):

Imagen cortesía de CSS Lounge Photostream en Flickr

Paso 8: Determinando la lógica

Si el usuario hace clic en un enlace a la imagen, queremos mostrar la imagen en una caja de luz. Para hacer esto, primero queremos determinar la lógica detrás de nuestra funcionalidad:

• El usuario hace clic en el enlace con la clase lightbox_trigger
  • Evita que el navegador siga el enlace por defecto
  • Ver si el caja ligera div ya está dentro del documento
    • Si existiera:
      • Encuentra y lo existente img etiqueta dentro del contenido div.
      • Reemplace la imagen de src valor con el href Valor de cualquier enlace que se hizo clic.
    • Si no existe:
      • inserte el marcador lightbox en la página con la imagen src valor establecido en href Valor de cualquier enlace que se hizo clic
• Permitir cualquier clic en la caja de luz (cuando se muestra) para hacerla desaparecer

Paso 9: Javascript Incluyendo jQuery

Ahora que tenemos nuestro formato HTML, estilo CSS y lógica javascript, es hora de ahondar en el código y hacer que nuestra funcionalidad funcione..

Primero incluimos la biblioteca jQuery. Me gusta agregarlo justo antes del cierre. cuerpo etiqueta usando la versión alojada de jQuery.

Paso 10: Script de Javascript personalizado

Vamos a envolver nuestro código en guión Etiquetas y documento de jQuery.

Incluiremos nuestro script personalizado justo después de incluir la biblioteca jQuery. Configuramos nuestra función jQuery usando el signo de dólar "$" en el parámetro de la función, de esa manera no tenemos que escribir "jQuery" cada vez que queremos usar la funcionalidad jQuery. En su lugar podemos simplemente usar "$".

Paso 11: Javascript lightbox_trigger Función

Como se explicó anteriormente en el Paso 1, para cada imagen vinculada que usará la caja de luz, le asignamos una clase de lightbox_trigger. En nuestro script, creamos una función que se activará cada vez que se enlace con la clase. lightbox_trigger se hace clic.

$ ('. lightbox_trigger'). haga clic en (función (e) // Código que hace que aparezca el lightbox);

Paso 12: Javascript dentro de la función

Primero, queremos evitar la acción por defecto. Esto evita que el navegador abra la imagen vinculada en una página nueva. (Para ver por qué usamos preventDefault () haga clic aquí

e.preventDefault ();

A continuación, obtenemos la href de la imagen que mostraremos en la caja de luz desde el enlace en el que se hizo clic

var image_href = $ (this) .attr ("href");

Aquí es donde nuestra lógica predeterminada realmente entra en juego. Debido a que estamos insertando nuestro lightbox HTML dinámicamente, primero queremos ver si ya existe en el documento. Por lo tanto, vamos a ejecutar una sentencia if / else.

Si

Si el caja ligera div existe, vamos a reemplazar el img etiqueta dentro del contenido div. También nos aseguraremos de que src El valor de la etiqueta de imagen se establece para que coincida con el href De cualquier enlace se hizo clic.

if ($ ('# lightbox'). length> 0) // #lightbox existe // insertar la etiqueta img con href del enlace seleccionado como valor src $ ('# content'). html (''); // Mostrar la ventana de la caja de luz: puede usar una transición aquí si lo desea, es decir, ... mostrar ('rápido') $ ('# lightbox'). show (); 

Más

Si nuestro caja ligera No se puede encontrar div en el documento, lo crearemos e insertaremos. Esto solo se ejecutará la primera vez que se haga clic en un enlace de lightbox.

else // # lightbox no existe // crear código HTML para la ventana de lightbox var lightbox = '
'+'
Haga clic para cerrar
'+'
'+ // inserta href del enlace pulsado en img src''+'
'+'
'; // insertar lightbox HTML en la página $ ('body'). append (lightbox); 

Paso 13: Javascript ocultando la ventana de la caja de luz

Por último, queremos ocultar la ventana de la caja de luz cada vez que el usuario haga clic en ella. Porque el div caja ligera se inserta después de que el DOM ya está construido (la página ya se ha cargado), tenemos que decirle a jQuery que estamos colocando un nuevo div en nuestra página y observar los clics en estos nuevos elementos. Hacemos esto usando .live () en lugar de .click ()

$ ('# lightbox'). live ('click', function () $ ('# lightbox'). hide (););

Paso 14: Código Final de Javascript

Ahora que hemos examinado nuestro script de lightbox, esto es lo que parece:

Producto final

Imagen cortesía de CSS Lounge Photostream en Flickr

¡Eso es! Ahora tienes una solución lightbox liviana para mostrar imágenes. Espero que hayas disfrutado este tutorial y hayas aprendido algo nuevo! Gracias por leer.

Opciones premium

Este tutorial le ha enseñado el enfoque de bricolaje, pero si prefiere una solución ya hecha, Envato Market tiene muchos complementos de lightbox disponibles. Aquí hay una selección de los más populares:

1. Lightbox Evolution para WordPress

Lightbox Evolution es una herramienta para mostrar imágenes, contenido HTML, mapas y videos en un estilo de "caja de luz" que flota sobre la página web. Usando Lightbox Evolution, los autores de sitios web pueden mostrar una amplia variedad de medios en todos los principales navegadores sin tener que navegar por los usuarios fuera de la página de enlace. También hay una versión jQuery..

Lightbox Evolution para WordPress

2. iLightBox · Revolucionario Plugin Lightbox

iLightBox le permite crear fácilmente las ventanas de superposición de respuesta más hermosas usando la biblioteca de jQuery JavaScript. Al combinar el soporte para una amplia gama de medios con pieles hermosas y una API fácil de usar, iLightBox pretende impulsar el concepto de Lightbox en la medida de lo posible.

iLightBox · Revolucionario Plugin Lightbox

3. PopupPress - Popups con Slider y Lightbox para WP

PopupPress es un complemento de Wordpress que te permite crear fácilmente ventanas superpuestas y elegantes. Este complemento está diseñado para insertar cualquier tipo de contenido en una ventana emergente de la forma más rápida y sencilla en cualquier página de WordPress. También tiene estadísticas simples del sistema para el número de vistas de las ventanas emergentes.. 

PopupPress - Popups con Slider y Lightbox para WP