BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jQuery lightbox plugin. Un lightbox en jQuery

01/JUL/2011 6.255 visitas Ver comentarios
jQuery lightbox plugin. Un lightbox en jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Hace mucho que existe esta versión del famoso lightbox pero en versión jQuery. Este plugin es muy limitado hoy día ya que solo vale para imágenes, pero si lo que quieres es ampliar tus fotos con un código muy pero muy liviano, debes darle una oportunidad.

No tiene mucho que hacer contra otros como Colorbox o PrettyPhoto o FancyBox, pero si tu objetivo son solo ampliar las imágenes, te vale de sobra.

Su implementación es más que sencilla, muy poquito css y una línea javascript para hacer que todas las imágenes o las específicas que marques se amplíen.

Para descargarlo, te dejo el enlace original donde hay una muy breve documentación sobre como utilizarla.

 

Código 1 - HTML
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Código 2 - HTML
<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
Código 3 - JAVASCRIPT
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018