Polaroid Photobar Gallery with jQuery

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop […]

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.

For this gallery we will be using the 2D Transform plugin to animate rotations.

The beautiful photos used in the demo are by talented Tetsumo. Visit his blog here.

Let’s get started!

The Markup

We are going to include all our HTML in a div with the class “pp_gallery”. It will consist of the loading div, the navigation that will appear when the full image is viewed and the main thumbnails container.

Inside of the thumbnails container which will have the class “pp_thumbContainer”, we will have several divs for the albums and a div for going back to the album view. Each album will contain the thumbnails with a description wrapped in a div with the class “content”. We will also include a div element for the description of the album itself.

<div id="pp_gallery" class="pp_gallery">
	<div id="pp_loading" class="pp_loading"></div>
	<div id="pp_next" class="pp_next"></div>
	<div id="pp_prev" class="pp_prev"></div>
	<div id="pp_thumbContainer">
		<div class="album">
			<div class="content">
				<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" />
				<span>The Sixties by Tetsumo</span>
			<div class="content">
				<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" />
				<span>The Sixties by Tetsumo</span>
			<div class="descr">
				The Sixties
		<div class="album" style="bottom:-90px;">
		<div class="pp_back">Albums</div>

The HTML structure of the dynamically created full image preview will be the following:

<div id="pp_preview" class="pp_preview">
	<img src="images/album1/1.jpg" />
	<div class="pp_descr"><span>Description</span></div>

Now, let’s take a look at the style.


We will start with a reset and some general styles for the body:

	background:#000 url(../bg.jpg) repeat center center;
	font-family:"Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
	color: #fff;

A structured background fits very nicely, so we choose to add a wood texture. You can find this and more textures on Webtreats.

Next, we will style the loading div and the navigation for stepping through the pictures when we are in the preview mode:

	margin:-35px 0px 0px -35px;
	background:#fff url(../icons/loader.gif) no-repeat center center;
.pp_next, .pp_prev{
	border:1px solid #111;
	-moz-box-shadow:0px 0px 3px #000;
	-webkit-box-shadow:0px 0px 3px #000;
	box-shadow:0px 0px 3px #000;
	background:#222 url(../icons/next.png) no-repeat center center;
	background:#222 url(../icons/prev.png) no-repeat center center;

The loading div is set to the center of the page by using the 50% negative margin trick. When the position is fixed, we can set the top and left to 50% and add a top and left margin to the negative value of half of the element’s width, or height, respectively.

The same we do for the navigation items, just that here will only center the elements vertically.

The thumbnails container will be positioned at the bottom of the page:


The albums are hidden initially. When we load the page, they will slide in from the bottom, so we will set the initial bottom value to -90 pixels:

#pp_thumbContainer .album{

The left value for the positioning of the albums will be calculated dynamically on page load. We will spread all the albums evenly throughout the width of the page.

The description of the album and the back element will share some styles:

.album .descr,
	border:1px solid #111;
	text-shadow:0px 0px 1px #fff;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;

…but not all. We will overwrite and add the values that are specific to the .pp_back class:


The wrapper for the image and the image title will have the following style:

#pp_thumbContainer .content{

These wrappers will also be spread into position dynamically in our JavaScript. We set the top value to 0, so that all the thumbnails align to the top of the thumbnails container. We don’t want vertical thumbnails to stick out.

The thumbnail will have a white border and a box shadow:

#pp_thumbContainer img{
	border:5px solid #fff;
	-moz-box-shadow:1px 1px 7px #000;
	-webkit-box-shadow:1px 1px 7px #000;
	box-shadow:1px 1px 7px #000;

The description for each image is invisible. We will only use it to fill the description element for the full view.

#pp_thumbContainer .content span{

The wrapper for the full image will be positioned outside of the page by setting the top value to 150%. Once the image is loaded, we will slide it in from the bottom. We are setting the left value to 50% since we want to center the picture. Since we don’t know the width and height of the picture yet, we cannot set any negative margins yet. We will do that in our JavaScript function.


The full image will have a bigger white border at its bottom where we will insert the description:

.pp_preview img{
	border:10px solid #fff;
	border-bottom:45px solid #fff;
	-moz-box-shadow:1px 1px 7px #000;
	-webkit-box-shadow:1px 1px 7px #000;
	box-shadow:1px 1px 7px #000;

The description will be at the bottom of the preview element. In the JavaScript we will set the width and height of the preview div to the one of the image dynamically, so the description will be positioned at the thicker bottom border of the image.


We will cufonize the description using a nice hand written font (see at the end).

And now, let’s add some real magic!

The JavaScript

There will be many animations throughout the JavaScript. The albums will slide in from the bottom when the page loads. Once an album is clicked, we will spread the thumbnails evenly by giving them an according left value. When we choose a thumbnail, we need to create the preview div and slide it in from the bottom. The image will get resized so that it fits into the window.

Let’s start by defining some initial variables. First, we want to know if we are dealing with Internet Explorer since we don’t want to use the rotation of the full image here (it’s buggy when used together with the slide in animation):

var ie 			= false;
if ($.browser.msie) {
	ie = true;

We will use some index variables for the navigation and save some elements:

//current album/image displayed
var current		= -1;
var album		= -1;
//windows width
var w_width 	= $(window).width();
var $albums 	= $('#pp_thumbContainer div.album');
var $loader		= $('#pp_loading');
var $next		= $('#pp_next');
var $prev		= $('#pp_prev');
var $images		= $('#pp_thumbContainer div.content img');
var $back		= $('#pp_back');

We want to spread the albums evenly throughout the page, so we will calculate the according left value:

var nmb_albums	= $albums.length;
var spaces 		= w_width/(nmb_albums+1);
var cnt			= 0;
//preload all the images (thumbs)
var nmb_images	= $images.length;
var loaded  	= 0;
	var $image = $(this);
	$('<img />').load(function(){
		if(loaded == nmb_images){
			//let's spread the albums evenly at the bottom of the page
				var $this 	= $(this);
				var left	= spaces*cnt - $this.width()/2;
			//also rotate each picture of an album with a random number of degrees
				var $this = $(this);
				var r = Math.floor(Math.random()*41)-20;
				$this.transform({'rotate'	: r + 'deg'});
	}).attr('src', $image.attr('src'));

The spreadPictures function will do a similar thing: it will move the chosen album to the left and spread all the thumbnails:

function spreadPictures(){
	var $album = $(this);
	//track which album is opened
	album = $album.index();
	//hide all the other albums
		//now move the current album to the left
		//and at the same time spread its images throughout
		//the window, rotating them randomly, hide the description of the album

	//store the current left for the reverse operation
		var total_pic 	= $album.find('.content').length;
		var cnt			= 0;
		//each picture
			var $content = $(this);
			//window width
			var w_width 	= $(window).width();
			var spaces 		= w_width/(total_pic+1);
			var left		= (spaces*cnt) - (140/2);
			var r 			= Math.floor(Math.random()*41)-20;
			//var r = Math.floor(Math.random()*81)-40;
		  .animate({'rotate': r+'deg'},300);

Now, we will define what happens when we click on the item to go back to the albums view. We will animate the album to its initial left position and slide the other albums up again. If the user was viewing a full image, we will make it slide up, out of the window (hideCurrentPicture):

	//there's a picture being displayed
	//lets slide the current one up
	if(current != -1){

	var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');


				var $content = $(this);
				$content.unbind('mouseenter mouseleave click');


The next function, called showImage, will display the full image by sliding it in from the bottom. If there was another image being shown, we will slide that one up. For centering the preview, we need to set its negative margins according to the width and height of the image. We will also rotate the preview randomly:

function showImage(nav){
	if(nav == 1){
		//reached the first one
		var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
		//reached the last one
	var $content 	= $(this);

	//show ajax loading image

	//there's a picture being displayed
	//lets slide the current one up
	if(current != -1){

	current 				= $content.index();
	var $thumb				= $content.find('img');
	var imgL_source 	 	= $thumb.attr('alt');
	var imgL_description 	= $thumb.next().html();
	//preload the large image to show
	$('<img style=""/>').load(function(){
		var $imgL 	= $(this);
		//resize the image based on the windows size
		//create an element to include the large image
		//and its description
		var $preview = $('<div />',{
			'id'		: 'pp_preview',
			'className'	: 'pp_preview',
			'html'     	: '<div class="pp_descr"><span>'+imgL_description+'</span></div>',
			'style'		: 'visibility:hidden;'
		var largeW 	= $imgL.width()+20;
		var largeH 	= $imgL.height()+10+45;
		//change the properties of the wrapping div
		//to fit the large image sizes
			'width'			:largeW+'px',
			'height'		:largeH+'px',
			'marginTop'		:-largeH/2-20+'px',
			'marginLeft'	:-largeW/2+'px',
			'visibility'	:'visible'
		//show navigation

		//hide the ajax image loading

		//slide up (also rotating) the large image
		var r 			= Math.floor(Math.random()*41)-20;
			var param = {
			var param = {
				'rotate': r+'deg'
		//error loading image.
		//Maybe show a message : 'no preview available'

The next two functions handle the navigation through the images:

//click next image

//click previous image

The function hideCurrentPicture will make the preview slide up. We will not use any rotation animation if the browser is IE:

//slides up the current picture
function hideCurrentPicture(){
	current = -1;
	var r 	= Math.floor(Math.random()*41)-20;
		var param = {
		var param = {
			'rotate': r+'deg'

The showNavigation and hideNavigation functions will take care of showing and hiding the navigation items:

//shows the navigation buttons
function showNavigation(){

//hides the navigation buttons
function hideNavigation(){

When hovering over a thumbnail, we want it to move up a little and rotate slightly:

function upImage(){
	var $content 	= $(this);
		'marginTop'		: '-70px'
		  .animate({'rotate': '0deg'},400);

When the mouse leaves the currently hovered thumbnail, we want it to drop back, rotating randomly again:

function downImage(){
	var $content 	= $(this);
	var r 			= Math.floor(Math.random()*41)-20;
		'marginTop'		: '0px'
	},400).find('img').stop().animate({'rotate': r + 'deg'},400);

And finally, we will use a resize function to fit the full image into the window:

function resize($image){
	var widthMargin		= 50
	var heightMargin 	= 200;

	var windowH      = $(window).height()-heightMargin;
	var windowW      = $(window).width()-widthMargin;
	var theImage     = new Image();
	theImage.src     = $image.attr("src");
	var imgwidth     = theImage.width;
	var imgheight    = theImage.height;

	if((imgwidth > windowW)||(imgheight > windowH)){
		if(imgwidth > imgheight){
			var newwidth = windowW;
			var ratio = imgwidth / windowW;
			var newheight = imgheight / ratio;
			theImage.height = newheight;
			theImage.width= newwidth;
				var newnewheight = windowH;
				var newratio = newheight/windowH;
				var newnewwidth =newwidth/newratio;
				theImage.width = newnewwidth;
				theImage.height= newnewheight;
			var newheight = windowH;
			var ratio = imgheight / windowH;
			var newwidth = imgwidth / ratio;
			theImage.height = newheight;
			theImage.width= newwidth;
				var newnewwidth = windowW;
				var newratio = newwidth/windowW;
				var newnewheight =newheight/newratio;
				theImage.height = newnewheight;
				theImage.width= newnewwidth;

Since we cufonize the description, we need to add the following lines to the head of the HTML:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Note_this_400.font.js" type="text/javascript"></script>

You can find the beautiful “Note This” font on www.fontsquirrel.com.

And that’s it! We hope you enjoyed this tutorial and find it useful!!

Message from TestkingEnjoy the free learning of web design with testking 646-364 tutorials. Download testking EX0-101 design tutorials and testking 642-374 study guides to become expert in web designing .

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 111

Comments are closed.
  1. not working in chrome 7 dev on mac.
    css works but mouseover not triggered and click opens stack outside of screen.

  2. WoW!
    This is brilliant 🙂
    I’m on Chrome (Win). It worked beautifully.
    I’m planning to use it in my project.

  3. @MF, @Chuck, @bthaxor could you explain what exactly does not work on Chrome? And which versions of Chrome are you using? Cheers, ML

  4. jQuery place!!!
    This is the best website in the review and ideas…
    keep post master…hosh!!!

  5. Great article !

    What is to update to get it working with more than 6 pics ? …i tried but stays stucked on pic 6…


  6. Wow! Great effect and probably the best jQuery photo gallery I have come across. I am urrently studying javascript and jQuery, so I am still learning the ropes, but I will definitely play with this one. Thanks for the share!

  7. Hi Mary Lou,

    you have always great idea and write tutos and code marvelous.

    Just un error, i think, you close a DIV not open in line 3 of HTML Structure.

    An other question is :
    – why you dont use h1 for div with class descr (name of the Album is important, i think), and use ul and li for the photo and a span balise for photo description…?

    Thank again

  8. @Jireck, thank you for your feedback, it’s always good and reasonable! Next time I will not forget about the correct hierarchy… I promise!!! 🙂 Cheers, ML

  9. @Franco, if you want to add more pictures to one album, you simply add them to the folder of the respective album (thumbnail and full image) and add the new content divs with the img element inside. Don’t forget to write the path to the big image into the “alt” attribute. Hope it helps, ML

  10. Great gallery!

    Is it possible to set the gallery within a div with a fixed height and width?


  11. Quite fantastic! Thanks for the very detailed tutorial, today I learned about rotation and cufon !

    Now I have work for weeks 🙂

    Keep going!

  12. Uhhh, another great tut. Where do you get those ideas?

    Thank you for sharing! U own

  13. Very nice effect, and it works in IE 🙂 , but best viewed on Chrome I guess. Thanks for the tut! Keep it coming!

  14. Pretty amazing work and really useful. I don’t know if that was my firefox or not but it felt a little slow loading things.

  15. This is fantastic!

    Could someone give me a hint: How can i make a button out of the current large picture to use it as next-button?

  16. Thanks for this awesome article.

    I have a question..

    Is there a way to get previous and next buttons for the bottom stack also. This is because, say I have more than 50 photos of the same category. Then is there any way to get some kind of paging on the bottom stack. Or Previous/next kind of thing for this bottom stack.


  17. Hello,
    Really love yours tutos.
    But for this one if have a problem, why I only put 12 different photos on each albums ??
    Thanks to reply

    PS: Sorry for my poor english but I’m a french guy living on Barcelona !

  18. Hi! Awesome solution for a portfolio. But I have a question since I’m not a JS coder. How can I replace the font?!

  19. Hi,

    Awesome work! I am using it for my project and it works perfectly. Thanks a lot for this great gallery!

  20. I’d like to use the gallery inside the structure of a site i’ve made.
    The site has a quite simple structure, header, footer and two columns.
    So, try to insert the code inside the the main column content (800x600px) but it doesn’t seems to work.
    Could Mary Lou or someone else genlty help me?
    Thanx from Italy. Congratulations for all your great jobs.

  21. hey.. the script is work great, but.. sometimes lag in each transform..

    too bad, its only loader an image…;

    anyway can we use blog post to replace the image (display blog post in each frame and preview, not an image)???


  22. A wonderful addition to my website… but it only works on my testing server, and when I upload to the web host server. It Does NOT work in any browser… Why would that be ?

  23. Bizarrely this stops working when I change the album images – even if they are made exactly the same size! what gives?

    • Hi bikeman, if you have it online somewhere, I could take a look… Did you adapt the HTML code, maybe the naming of the images is not correct? Cheers, ML

  24. I used this in my website gallery, but there is one question I would like to ask, what if I have more gallery folder? what will happen would in automatically create a scrolling something so that all of my folders can be viewed?

  25. hello again
    The problem with the images is solved, it had nothing to do with the coding, but with some fierce creatures that wind up everything
    The question for the font remains though
    Thanks again