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 final result :

View The Demo, you can also download the final 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:

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:

<script type="text/<span class="><!--mce:0--></script>
<script type="text/<span class="><!--mce:1--></script>
<script type="text/<span class="><!--mce:2--></script>
<link rel="stylesheet" type="text/css" href="style.css" />

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="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.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!

1STWD Editorial

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Danny says

    Its very nice but i encounter problems in Internet Explorer:

    In IE 8 there are no transparent borders and in IE 9 there are the boarders…ok; the IE transparancy problem.
    One thing that is really missing is the random rotation of the images… it doesnt work in IE… how come? Whats wrong with the script for IE?

  2. Jenniferadrago says

    is there any way to confine the are in which the images can be dragged around? I dont want them to cover other areas of my page like the header and footer.

  3. Thinkstock says

    Very helpful! We always appreciate anything that can help us decipher code (not all of us around here are naturals at it).

  4. says

    Lovely tutorial.

    I think I’m expecting too much to hope for the feature to add description. I think it’s possible though.

    Keep up the good work!

  5. Laira says

    Nice tutorial..really helpful …thanks Cosmin for sharing this greatness….