Crear una galería de fotos polaroid con CSS3 y Jquery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet CSS

¡votar!

Crear una galería de fotos polaroid con CSS3 y Jquery

Hoy en día, las galerías de fotos son cada vez mas populares y logradas. Vamos a ver la forma de crear una galería donde las fotos tendrán forma de fotos polaroid utilizando CSS3 y Jquery.

La galería que crearemos tendrá la posibilidad de mover las fotos de forma sencilla, solo basta con pulsar en la foto y arrastrar hacia donde queramos.

Los archivos que nosotros vamos a necesitar son:

Index.html
style.css (contendrá todo lo relacionado con los estilos de la página)
script.js (contiene los scripts necesarios para darle los ejectos)

En el archivo index.html lo que haremos será la llamada a las librerías jquery, pero en vez de cargarlo desde nuestro sitio, lo cargaremos desde una url de google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>

También nos creamos el listado de fotos que vamos a poner en la galería, por ejemplo las siguientes

<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />

Hasta aquí los pasos son sencillos, son los normales que se hacen para añadir imágenes a una página, no tiene mucho que explicar.

Lo siguiente que vamos hacer es darle algo de estilo a la página y a las imágenes. Le hemos puesto a la página una imagen de fondo para hacerlo mas vistosa, pero no sería necesario. A continuación le damos algo de estilo a las imágenes que formarán la galería. En nuestro caso lo que hemos hecho ha sido ponerle a cada una, un fondo gris claro para darle forma de polaroid, y por medio de estilos CSS3 le hemos asignado una sombra simple, y por último le hemos asignado márgenes para separarlas.

body
{
background: url(texture.jpg);
}
img
{
padding: 10px 10px 50px 10px;
background: #eee;
border: 1px solid #fff;
box-shadow: 0px 2px 15px #333;
-moz-box-shadow: 0px 2px 15px #333;
-webkit-box-shadow: 0px 2px 15px #333;
position: relative;
margin:25px 0 0 15px;
}

Por último nos toca la programación utilizando JQuery

$(document).ready(function(){
var zindex = 1;
$("img").draggable({
start: function(event, ui) {
zindex++;
var cssObj = { 'z-index' : zindex };
$(this).css(cssObj);
}
});
$('img').each(function(){
var rot = Math.random()*30-15+'deg';
var left = Math.random()*50+'px';
var top = Math.random()*150+'px';
$(this).css('-webkit-transform' , 'rotate('+rot+')');
$(this).css('-moz-transform' , 'rotate('+rot+')');
$(this).css('top' , left);
$(this).css('left' , top);
$(this).mouseup(function(){
zindex++;
$(this).css('z-index' , zindex);
});
});
$('img').dblclick(function(){
$(this).css('-webkit-transform' , 'rotate(0)');
$(this).css('-moz-transform' , 'rotate(0)');
});
});

Lo que hacemos es para cada imagen que forma la galería, creamos tres variables para indicarle los grados de rotación, posición superior y posición izquierda. Una vez que tengamos estos valores, procedemos a modificar los estilos de cada imagen dándoles estos nuevos valores. Con la función mouseup lo que hacemos es que cuando se pulse en una de ellas, se ponga la primera de todas. Para terminar, lo que se ha hecho ha sido una función cuando se hace doble click en una de ellas, que lo que hace es ponerla recta.

Vía: 1stwebdesigner

Descargar adjuntos