Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery

Super Sencilla Lightbox con CSS y jQuery

by
Length:MediumLanguages:

Spanish (Español) translation by Rodney Martinez (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.

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>.

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.

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.

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.

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.

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).

Imagen cortesía de CSS Lounge Photostream en Flickr

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.

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 "$".

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.

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í.

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

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.

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.

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().

Paso 14: Javascript Código Final

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

Producto final

Imagen cortesía de CSS Lounge Photostream en Flickr

¡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.

PopupPress - Popups with Slider Lightbox for WP
PopupPress - Popups con Deslizadores & Lightbox para WP
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.