Creating a polaroid photo viewer with CSS3 and jQuery

Placed in: Home

Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.

Placing them on simple polaroids on a webpage simply didn't do it for me. I wanted to drag them around, rotate them and still have a fun time. That's were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random).

Polaroid Photo Viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.

Demo polaroid photo viewer with CSS3 and jQuery

Download polaroid photo viewer with CSS3 and jQuery

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all modern browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. Mozillas Firefox 3.1 is getting these properties too (with the -moz- prefix). So, for now, this is just for fun - Other browsers will display the polaroids, but won't have the neat shadow while dragging and rotating while placing them down.

With that said, check out how you can re-create this effect and learn some more about CSS3 and jQuery. Check out one of my older articles if you're searching for an image gallery that isn't using CSS3.

Just for the record: Not all pictures were taken by me (just some of them). Most of them were from stock.xchng.

Safari Demo

Check out this small video I placed on YouTube, showing this effect in full glory (rotating and adding a shadow while dragging).

HTML

The HTML of this page isn't really hard to understand.

 
<div class="polaroid">
  <img src="images/01_colosseum.png" alt="Colloseum" />
  <p>Coloseum in Rome</p>
 
</div>
<div class="polaroid">
  <img src="images/02_vatican.png" alt="Vatican" />
  <p>Vatican</p>
</div>
<!-- More images here -->

The polaroid-class is the container of the polaroid. The next element (img) is the picture, the element after that (p) is used for the caption below the image. Repeat this as many times as you want with all your polaroids!

CSS

Just like the HTML, the CSS part of this example is pretty simple.

 
.polaroid { width:368px; height:376px; background-image:url(../images/polaroid-bg.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; }

Note that polaroid-class has a fixed width and height (Same size of the background image). It's also placed on an absolute position. The img of the polaroid has also been moved to a fixed position. The caption is aligned to the center.

jQuery and CSS3

Now for the real fun! The HTML and CS weren't so interesting, now this is going to be. I'll split the code in several parts and make sure you read the comments in the code.

 
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.7.0");

I'm using Googles JavaScript Libraries API to load jQuery and the jQuery UI. We're going to need the last one for the jQuery UI Draggable Component for dragging the polaroid around.

 
   // Set the Z-Index (used to display images on top while dragging)
   var zindexnr = 1;
   
   // boolean to check if the user is dragging
   var dragging = false;
   
   // Show the polaroid on top when clicked on
   $(".polaroid").mouseup(function(e){
      if(!dragging) {
         // Bring polaroid to the foreground
         zindexnr++;
         var cssObj = { 'z-index' : zindexnr,
         '-webkit-transform' : 'rotate(0deg)' };
         $(this).css(cssObj);
      }
   });

The zindexnr variable is used to "remember" the z-index. Every time a polaroid is clicked, the z-index is added by one, making the polaroid come to the foreground. The dragging boolean is to determine if the user is dragging the polaroid, or just clicking on it. When clicked (like in this part of the code), the polaroid is rotated to it's original position (zero degrees) and placed on top.

I actually made this method to "zoom in" to the polaroid, but removed it later on. If you still want to zoom in, simply add your code in that function.

 
   // Function to get random number upto m
   // http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html
   function randomXToY(minVal,maxVal,floatVal) {
      var randVal = minVal+(Math.random()*(maxVal-minVal));
      return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
   }

The function that you see above is to generate a random number between two integers. I added the source URL where I got the function from; We'll need it in the next part of the code:

 
   // Make the polaroid draggable & display a shadow when dragging
   $(".polaroid").draggable({
      cursor: 'crosshair',
      start: function(event, ui) {
         dragging = true;
         zindexnr++;
         var cssObj = { '-webkit-box-shadow' : '#888 5px 10px 10px',
            'margin-left' : '-10px',
            'margin-top' : '-10px',
            'z-index' : zindexnr };
         $(this).css(cssObj);
      },
      stop: function(event, ui) {
         var tempVal = Math.round(Math.random());
         if(tempVal == 1) {
            var rotDegrees = randomXToY(330, 360); // rotate left
         } else {
            var rotDegrees = randomXToY(0, 30); // rotate right
         }
         var cssObj = { '-webkit-box-shadow' : '',
            '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
            'margin-left' : '0px',
            'margin-top' : '0px' };
         $(this).css(cssObj);
         dragging = false;
      }
   });

Let's break this up a little bit.

$(".polaroid").draggable( - Needed for jQuery UI to make the element draggable.
start: function(event, ui) - This is called when the user starts dragging and the shadow is needed.
'-webkit-box-shadow' : '#888 5px 10px 10px' - Added to inject the CSS3 "box-shadow" property.
$(this).css(cssObj); - Adding the CSS to this, which is the polaroid.
stop: function(event, ui) - This is called when the user stops dragging and the shadow is removed, including a rotation.
var tempVal = Math.round(Math.random()); - Generating a random number (1 or 0), needed to rotate the polaroid left or right.
var rotDegrees = randomXToY(330, 360); - Generating a random number between 330 and 360 to rotate the polaroid to the left.
var rotDegrees = randomXToY(0, 30); - Generating a random number between 0 and 30 to rotate the polaroid to the right.
'-webkit-box-shadow' : '' - Removing the shadow.
'-webkit-transform' : 'rotate('+ rotDegrees +'deg)' - Rotating the polaroid based on the randomly generated degrees.

That's about it! I also added a function that randomly scatters the polaroids when everything had loaded and tadaa: An awesome polaroid photo viewer with CSS3 and jQuery.

Conclusion and Download

Hopefully CSS3 will become the standard quick and users will kick out the old browsers too. This way, this technique would be pretty awesome to be used to display some crazy photo galleries. It's relatively simple to achieve, still the effect is pretty powerful. It's really fun too!

I hoped you learned something today about CSS3 and/or about jQuery. Do you think this could be useful somewhere or that you're going to use it in the future? Or do you want to improve the code by adding the zooming functionality when the user clicks on the image? Please share!

UPDATE

For those people that are interested in a non-full screen version of this script, I just released it too.

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Gaya - nice

2009-03-16 21:38:13

Looks good Marco =D, really nice use of Javascript.

I hate the fact that not all browsers are implementing the rules, making it almost useless to put on your website as a nice rich application.
Damn the browsers. It would be so easy for us if there was 1 good standard which HAD to be implemented, or else the browser wouldn't be allowed online.
We can only dream.