Super Sencilla Lightbox con CSS y jQuery

() translation by (you can also view the original English article)

En vez de usar un plugin sobrestimado que tiene funciones que nunca usará, este curso le mostrará como crear una lightbox super sencilla para manejar las imágenes. ¡Es perfecta para galerías de imágenes, portafolios y mucho más!

Paso 1: El markup [lenguaje de marcado de HTML5].

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

Nota: si usted no proporciona un DOCTYPE apropiado y la página se recrea en un forma peculiar, entonces el lightbox no se mostrará correctamente en internet Explorer.

<!DOCTYPE html> 
<html>
  <head>
		<title>Simple Lightbox</title>
	</head>
<body>

<div id="wrapper">
	<h1>Super Simple Lightbox</h1>
	<p>Our super simple lightbox demo. Here are the image links:
		<ul>
			<li>
				<a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">
				Picture 1
				</a>
			</li>
			<li>
				<a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">
				Picture 2
				</a>
			</li>
			<li>
				<a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">
				Picture 3
				</a>
			</li>	
		</ul>
	 </p>
</div> <!-- #/wrapper -->
</body>
</html>

Nota: nosotros usamos la clase lightbox_trigger en cada enlace que tiene una imagen que queremos mostrar en nuestro lightbox. Esto se vuelve útil cuando queremos apuntar a esos elementos en el código que escribiremos.

Paso 2: El CSS

Vamos a aplicar algunos estilos CSS a nuestra página. Para éste ejemplo básico, todas nuestro código CSS dentro de las etiquetas <style></style> que están dentro de la sección <head>.

body {
	margin:0; 
	padding:0; 
	background:#efefef;
	text-align:center; /* used to center div in IE */
}
#wrapper {
	width:600px; 
	margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/
	background:#fff; 
	text-align:left; /*resets text alignment from body tag */
	border:1px solid #ccc;
	border-top:none; 
	padding:25px; 
	/*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px; 
	box-shadow:0 0 5px #ccc;
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
}

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

Paso 3: Notas sobre CSS en Internet Explorer

Usamos margin: 0 auto; para centrar nuestro div #wrapper horizontalmente sobre la página. Esto funciona de forma excelente para todos los navegadores, excepto…redoble de tambores…adivine quién; exacto: Internet Explorer. Para arreglar ese problema, usamos text-align:center; en la etiqueta body, lo que ubicará todos los elemento dentro del div al centro (en nuestro caso, el div #wrapper) horizontalmente sobre la página.

Sin embargo, usar text-align:center; en la etiqueta body, hará que todos los textos se alinien al centro en sus divs. Para arreglar esto, reseteamos text-align:left; en el div #wrapper para restaurar todos los elementos dentro del div con la alineación hacia la izquierda. Verifique communitymx.com si está interesado en aprender más sobre éste problema en particular de IE.

Paso 4: Lightbox HTML

Así es como luce nuestro markup HTML para nuestro lightbox. Sin embargo, no lo inserte dentro del markup HTML. Haremos eso de forma dinámica con jQuery. Entender el markupt HTML del lightbox nos permite darle estilo de acuerdo con CSS.

<div id="lightbox">
	<p>Click to close</p>
	<div id="content">
		<img src="#" />
	</div>
</div>

Nota: No hay valor para la etiqueta image src porque eso dependerá de cual enlace es presionado por el usuario. Por lo tanto, usaremos javascript para insertar el valor dinamicamente, pero más adelante.

Paso 5: Lightbox CSS, superposición del color negro

Continuemos e insertemos el CSS para nuestra lightbox. Si lo hacemos ahora, nuestros elementos de la página se mostrarán apropiadamente cuando insertemos dinámicamente nuestro código HTML.

Primero, tenemos nuestro div #lightbox que actúa como la capa de color negro. Queremos que éste llene por completo la ventana del usuario, no importa la resolución de pantalla.

#lightbox {
	position:fixed; /* keeps the lightbox window in the current viewport */
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	background:url(overlay.png) repeat; 
	text-align:center;
}

El CSS es bastante sencillo. Aquí están algunos puntos destacados:

position:fixed; hace que nuestra capa aparezca correctamente en la ventana actual, no importa cual sea la posición del usuario en la pantalla (arriba o abajo de la página). Aquí es donde el uso del DOCTYPE correcto resulta de gran ayuda. Si IE se ejecuta en un modo raro debido al DOCTYPE equivocado (o no en lo absoluto) entonces nuestra capa no aparecerá correctamente.
width:100%; height:100%; Esto hace que nuestro div #lightbox, el cual actúa como la capa de color negro, cubra la pantalla completa no importando dónde termina la resolución de pantalla del usuario.
background:url(overlay.png) repeat; Podríamos haber utilizado el modo de color RGBa para hacer nuestro color de fondo ligeramente transparente. Esto requeriría algo como background: rgba(0,0,0,.7);. Sin embargo, ya que está propiedad es bastante nueva, la transparencia para el color de fondo no funcionará en IE (a menos que usted aplique ciertos trucos). Así que en lugar de usar CSS3 y trucos para IE, simplemente creamos un archivo PNG en Photoshop con un formato de 1x1 pixel con fondo negro y ajustamos al transparencia a un 75 por ciento.

Paso 6: Lightbox CSS instrucciones para los usuarios

Solamente para estar seguros que nuestros usuarios no están confundidos, añadiremos algo de texto en la capa lightbox dando la condición que pueden hacer clic en cualquier parte para hacer desaparecer la ventana.

#lightbox p {
	text-align:right; 
	color:#fff; 
	margin-right:20px; 
	font-size:12px; 
}

Paso 7: Lightbox CSS imagen.

Ahora que queremos aplicar estilo a la imagen que aparecerá en el lightbox. Sencillamente, voy a darle algunos de los efectos CSS3. Obviamente, estos no aparecerán en IE y, tampoco, en navegadores antiguos, pero todavía se degrada fácilmente. Usted podría añadir otros efectos aquí si así lo quiere, como, por ejemplo; 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;
	max-width:940px;
}

Nota: añadir un max-width, reducirá cualquier imagen de alta resolución que podríamos enlazar. Esto ayuda a tener por seguro que todas las imágenes se adaptan a la ventana.

Así es como nuestra página luciría ahora si nosotros insertamos nuestro código HTML para el lightbox dentro del documento (eso lo vamos hacer con javascript).

Paso 8: Determinando la lógica

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

Los usuarios hacen clic con la clase lightbox_trigger
- Evita que el navegador siga el enlace por defecto
- Mira si el div lightbox está ya está dentro del documento
  - Si éste existe:
    - Encuentre la etiqueta img dentro del div content.
    - Reemplace el valor del imagen dentro del atributo src con el valor href de cualquier enlace en el que haya hecho clic.
  - Si éste no existe:
    - inserte el markup del lightbox dentro de la página con los valores src de las imágenes, configure el valor href de cualquier enlace que haya sido presionado.
Permite que cualquier clic sobre el lightbox (cuando está mostrado) lo haga desaparecer

Paso 9: Javascript incluyendo jQuery

Ahora que tenemos nuestro markup HTML, los estilos CSS y la lógica de javascript, es hora de profundizar en el código y hacer que nuestra funcionalidad funcione.

Primero, incluyamos la biblioteca jQuery. Me gusta añadirla justo antes de cerrar la etiqueta body usando la versión alojada de jQuery.

1	<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>

Paso 10: Javascript, Script personalizados

Envolvamos nuestro código en una etiqueta script en una función document.ready de jQuery.

Vamos a incluir nuestra secuencia de comandos después de incluir la biblioteca jQuery. Vamos a configurar nuestra función jQuery usando el signo de dolar "$" en el parámetro de la función, de esa manera, no tenemos que escribir jQuery cada vez que deseemos usar la funcionalidad jQuery. En lugar de eso, sencillamente usamos "$".

<script>
jQuery(document).ready(function($) {
	
	// Our script will go here

});
</script>

Paso 11: Javascript, función `lightbox_trigger`

Como explique anteriormente en el Paso 1, para cada imagen enlazada que usaremos en el lightbox, le hemos asignado una clase lightbox_trigger En nuestra secuencia de códigos, creamos una función que se activará cada vez que un enlace con la clase lightbox_trigger es presionado.

$('.lightbox_trigger').click(function(e) {
	
	// Code that makes the lightbox appear

});

Paso 12: Javascript dentro de la función

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

1	e.preventDefault();

A continuación, vaya al atributo href de la imagen que mostraremos en el lightbox desde el enlace que hicimos clic.

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

Aquí es donde nuestra lógica predeterminada viene a ser de gran ayuda. Porque estamos insertando nuestro lightbox HTML dinamicamente, pero, primero queremos ver si ya existe en el documento. Así que, ejecutaremos una condición if/else.

If

Si el div lightbox existe, reemplazaremos la etique img dentro del div content. Además, nos aseguraremos de que el valor src de la etiqueta de la imagen está ajustado para coincidir con el atributo href o cualquier enlace en donde se haga clic.

if ($('#lightbox').length > 0) { // #lightbox exists
	
	//insert img tag with clicked link's href as src value
	$('#content').html('<img src="' + image_href + '" />');
   	
	//show lightbox window - you can use a transition here if you want, i.e. .show('fast')
	$('#lightbox').show();
}

Else

Si nuestro div lightbox no puede ser encontrado en el documento, entonces lo crearemos y los insertaremos. Esto solamente se ejecutará la primera vez que un enlace lightbox es presionado.

else { //#lightbox does not exist 
	
	//create HTML markup for lightbox window
	var lightbox = 
	'<div id="lightbox">' +
		'<p>Click to close</p>' +
		'<div id="content">' + //insert clicked link's href into img src
			'<img src="' + image_href +'" />' +
		'</div>' +	
	'</div>';
		
	//insert lightbox HTML into page
	$('body').append(lightbox);
}

Paso 13: Javascript ocultando la ventana lightbox.

Por último, queremos ocultar la ventana lightbox cuando los usuarios hagan clic sobre ella. Debido a que el div lightbox está insertado después, el DOM ya lo construyo (la página ya lo ha cargado) tenemos que decirle a jQuery que estamos colocando un nuevo div en nuestra página y ver los clics en éstos elementos nuevos. Hacemos estos usando .liv() en lugar de .click().

1	$('#lightbox').live('click', function() {
2	$('#lightbox').hide();
3	});

Paso 14: Javascript Código Final

Ahora que hemos examinado el código de nuestro lightbox, aquí está como luce todo:

<script>
jQuery(document).ready(function($) {
	
	$('.lightbox_trigger').click(function(e) {
		
		//prevent default action (hyperlink)
		e.preventDefault();
		
		//Get clicked link href
		var image_href = $(this).attr("href");
		
		/* 	
		If the lightbox window HTML already exists in document, 
		change the img src to to match the href of whatever link was clicked
		
		If the lightbox window HTML doesn't exists, create it and insert it.
		(This will only happen the first time around)
		*/
		
		if ($('#lightbox').length > 0) { // #lightbox exists
			
			//place href as img src value
			$('#content').html('<img src="' + image_href + '" />');
		   	
			//show lightbox window - you could use .show('fast') for a transition
			$('#lightbox').show();
		}
		
		else { //#lightbox does not exist - create and insert (runs 1st time only)
			
			//create HTML markup for lightbox window
			var lightbox = 
			'<div id="lightbox">' +
				'<p>Click to close</p>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + image_href +'" />' +
				'</div>' +	
			'</div>';
				
			//insert lightbox HTML into page
			$('body').append(lightbox);
		}
		
	});
	
	//Click anywhere on the page to get rid of lightbox window
	$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
		$('#lightbox').hide();
	});

});
</script>

Producto final

¡Ya está! Ahora tiene una solución lightbox ligera para mostrar imágenes. ¡Espero que haya disfrutado este curso y también haya aprendido algo nuevo! Gracias por leer.

Opciones premium

Este curso ha enseñado a través del método hágalo usted mismo, pero si usted prefiere una solución predefinida, Envato Market tiene muchas plugin lightbox disponibles. Aquí está una selección de las más populares:

1. Lightbox Evolution para WordPress

Lightbox Evolution es una herramienta para mostrar imágenes, contenido html, mapas y vídeos en un estilo "lightbox" que flota sobre la página web. Al usar Lightbox Evolution, los autores de los sitios web pueden mostrar una amplia gama de medios en todos los navegadores principales sin alejar a los usuarios de la página enlazada. Además, hay una versión jQuery.

Lightbox Evolution for WordPress — Lightbox Evolution para WordPress

2. iLightBox • Plugin Lightbox revolucionario

iLightBox le permite crear con facilidad la ventana más hermosa y flexible usando la biblioteca jQuery de Javascript. Al combinar soporte para una amplia gama de medios con magníficos cubiertas y APIs fáciles de usar, los objetivos de iLightBox empujaron el concepto LightBox hasa donde fue posible.

iLightBox Revolutionary Lightbox Plugin — iLightBox • Plugin Lightbox revolucionario

3. PopupPress - Popups con Deslizadores & Lightbox para WP

PopupPress es un plugin para WordPress que permite crear fácilmente ventanas superpuestas. Éste plugin está destinado para insertar cualquier tipo de contenido en una Ventana emergente de la manera más rápida y fácil en cualquier página de WordPress. Además, tiene un sencillo sistema estadístico para visualizar los números de ventanas emergentes.