Crear un simple Lightbox con jQuery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Jquery

¡votar!

Crear un simple Lightbox con jQuery

En nuestros desarrollos, no siempre necesitamos algo muy elaborado, sino que con un simple efecto nos podría ser válido. Nos podemos encontrar muchos plugins ya desarrollados, pero puede ser que muchos de ellos consuman mucha memoria.

Por eso, hoy vamos a ver la forma de crear un sencillo popup con jQuery, que en muchas ocasiones será más que suficiente para lo que pretendemos hacer.

Lo primero que haremos será crearnos la estructura html de nuestro diseño. En este caso serán varias imágenes, que al pulsar en una de ellas, se ampliará en un PopUp.

<ul class="portfolio_images">
<li>
<a href="#"><img class="item_portoflio" src="http://dummyimage.com/120x120/727161/fff" alt="" /></a>
<div class="pop">
<div class="pop_container">
<a class="close">Cerrar</a> <img src="http://dummyimage.com/330x280/000/fff" alt="" />
<p>Una buena desripcion de esta imagen aqui.</p>
</div>
</div>
</li>
<li>
<a href="#"><img class="item_portoflio" src="http://dummyimage.com/120x120/727161/fff" alt="" /></a>
<div class="pop">
<div class="pop_container">
<a class="close">Cerrar</a> <img src="http://dummyimage.com/330x280/000/fff" alt="" />
<p>Otra buena desripcion de esta imagen aqui.</p>
</div>
</div>
</li>
</ul>

Si nos fijamos en el código, tenemos unos enlaces para las imágenes, que no lleva a ningún lado, pero que lanzará la petición para el PopUp. También tendremos un contenedor que será donde se muestre la imagen en el PopUp.

Ahora le daremos algo de estilos.

.portfolio_images {
display: inline;
float: left;
list-style: none outside none;
margin: 2em 0 1em;
padding: 10px
}
.portfolio_images li {
display: inline;
float: left;
float: left;
margin-left: 30px;
margin-right: 10px
}
.pop{
background: rgba(0, 0, 0, 0.5);/*semi transparencia*/
display: none;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 9999
}
.pop_container{
height: 300px;
left: 50%;
margin-left: -175px; /*margenes negativos al 50% del width*/
margin-top: -150px; /*margenes negativos al 50% del height*/
position: fixed;
top: 50%;
width: 350px;
z-index: 9999
}
.pop p{
color: #FFFFFF;
text-align: center;
text-shadow: 0 1px 0 #444444
}
.pop_container img{
background: #fdfdfd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
height: 280px;
padding: 10px;
width: 330px
}
a.close{
color: #fff;
cursor: pointer;
display: inline;
float: left;
font-size: 1.5em
}

Por último, le damos animación utilizando jQuery.

$(document).ready(function () {
$('.portfolio_images a').click(function (event) {
$(this).next('div').css({
display: 'block'
});
event.preventDefault();
});
$('.portfolio_images a.close').click(function (event) {
$('div.pop').css({
display: 'none'
});
event.preventDefault();
});
});

Cada vez que se haa click en un Thumbnail nuestro div.pop pasara de display:none a display:block y viceversa cuando se haga click en el boto “Cerrar”, es decir nuestro Lightbox se cerrara.

Vía: Eliseos