How To Create A Polaroid Photo Gallery With CSS3 And jQuery

Photo Galleries are becoming more and more popular these days. Today we are going to create a simple one using some of the new CSS3 features and jQuery. A prominent feature of the gallery is that You will be able to Drag the photos with single click in the gallery we are going to create. Hope you will enjoy this and understand it easily.

Let’s take a look at what we will be building, here is the result :

View The Demo, you can also download the result by clicking here (*.zip archive).

Step 1: Preparing The Files

Let’s start by creating our needed files :

• Index.html
• style.css ( this file will contain all the styles we need )
• script.js ( this one will contain our scripts )

In this tutorial I used some nature photos, but you can select your own:

• The Lookout By Chris Gin
• Leeds Castle Grounds By Joel Antunes
• Driftwood By Macindows
• Sunny Highlands By sopex
• Grassy Sunset By mattyv8

Here is also the texture I used in this tutorial. Now create a new folder, name it ” images ” then put in your choosed photos.

Step 2: The html file structure

First of all we have to link to our css, javascript files and both of jQuery and jQuery ui, to do this simply paste this code in your head section:

Now we need to show our images. To do this, add the code above into the body section of your html file :

<img src="images/1.jpg" alt="" />

Step 3: Adding some styles !

Now we have our html file ready, we need to add some styles to the body section and to our images:

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;
}

Explanation:

Here I added a background image. For each image I set it’s background to a light grey and used some paddings to give the traditional Polaroid shape. Also I have used some CSS3 techniques to give each image a simple shadow. Next I used some margins to make some space between the images.

Step 4: Time for some scripts

Now we have our images set up, we need to have some scripts to have a working polaroid.

First add this to your script.js file:

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
});

I defined a variable with a name of zindex and assigned to it 1 as a value. Then I used the jQuery ui features to make each image draggable. When an image is dragged the zindex value will increase by 1 then I used $(this).css to change the z-index value of the dragged image.

Let’s continue, ad this to the previous code :

$('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)');
});

Here I used the .each() technique, so for each image three variables are created : the rotation degrees, the top position and the left position. For each variable you have to use some math : math.random returns a value between 0 and 1 so we have to control the other values to get the numbers we need. Per example the first variable will always return a value between 15 and -15 degrees. For the left and top position I used the same formulas but I have changed the other values. After preparing the variables we have to use them. To do this we are going to use the same method we have used in the previous code ( this.css) then change the rotation degrees, the top position and the left position of each image so we can get a random appearance.

After all this I used the .mouseup method so when an image is clicked it will be showed up in the front. Also you can add something useful : when the button is double clicked we are going to adjust it with rotate(0).

Now all our script file should look like this :

$(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)');
});
});

That’s it !

Thanks for following this tutorial. I hope you liked it and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this. If you have any problem or you need some help feel free to write your question or request into the comments section.

Want more?

Check also Creating a polaroid photo viewer with CSS3 and jQuery much more advanced  tutorial done by Marco Kuiper!