Fotos tipo polaroid con Jquery

Posteado el 21. Aug, 2010 por tuto in Desarrollo Web, Jquery

Aqui puedes ver el demo de lo que enseñaremos en este tutorial. RECUERDA TOMAR UNA FOTO Y MOVERLA PARA QUE VEAS EL EFECTO

PASO 1
Creamos una carpeta llamada Fotos Polaroid y dentro de ella creamos una nueva carpeta llamada imágenes dentro de la cual vamos a colocar las imágenes que vamos a utilizar para nuestro efecto Polaroid.

Fotos tipo polaroid con Jquery

PASO 2
Ahora vamos a Dreamweaver y Creamos un nuevo documento HTML en blanco.

Fotos tipo polaroid con Jquery

PASO 3
Con el comando ctrl. + S vamos a guardar nuestro documento HTML dentro de la carpeta Fotos Polaroid con el nombre fotos polaroid.html

Fotos tipo polaroid con Jquery

PASO 4
Ahora vamos a crear un nuevo documento CSS (comando Ctrl + S).

Fotos tipo polaroid con Jquery

PASO 5
Dentro del Archivo Css vamos a copiar el siguiente código

Code block

body, div, img, p { padding:0; margin:0; }
body { overflow:hidden; background-image:url(../imagenes/fondo.jpg); }
.polaroid { width:368px; height:376px; background-image:url(../imagenes/marcofotos.png); position:absolute; }
.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }
.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E; margin-top:15px; }

Fotos tipo polaroid con Jquery

PASO 6
Con el comando Ctrl + S guardamos nuestro documento dentro de una carpeta llamada css con el nombre fotos.css

Fotos tipo polaroid con Jquery

PASO 7
Regresamos a nuestro documento HTML y debajo de la etiqueta copiamos el siguiente código

Code block

<link rel="stylesheet" type="text/css" href="css/fotos.css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>

Fotos tipo polaroid con Jquery

PASO 8
Ahora dentro de las etiquetas vamos a copiar el siguiente código.

Code block

<div class="polaroid">
 
<img src="imagenes/1.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/2.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/3.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/4.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/5.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/6.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/7.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>
<div class="polaroid">
 
<img src="imagenes/8.jpg" alt="Tutoriales en la Web" />
 
Tutoriales en la Web
 
</div>

Fotos tipo polaroid con Jquery

PASO 9
Dentro de la carpeta Fotos Polaroid creamos una carpeta nueva llamada js y copiamos el archivo script.js dentro de esta carpeta (el archivo lo adjunto en este tutorial).