Scattered Polaroids Gallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Today we’d like to share a little gallery experiment with you. We wanted to revisit the classic look of scattered Polaroids and bring it to a next, flat level with some nice effects. The resulting gallery shows some Polaroid images with a title, randomly rotated and spread in a container. When navigating the images, the current one will be moved to the center and the resting Polaroids will move to the sides. Optionally, we’ll have a backside for each Polaroid which can be viewed by clicking the current dot of the navigation again. The indication for an existing backside will be a rotated arrow on the dot. Once the dot is clicked again, the dot itself will flip and so will the Polaroid, revealing the description on the back.

We use the following structure for the gallery:

<section id="photostack-1" class="photostack photostack-start">
	<div>

		<!-- default Polaroid without backside -->
		<figure>
			<a href="http://goo.gl/Qw3ND4" class="photostack-img">
				<img src="img/1.jpg" alt="img01"/>
			</a>
			<figcaption>
				<h2 class="photostack-title">Serenity Beach</h2>
			</figcaption>
		</figure>

		<!-- Polaroid with backside -->
		<figure>
			<a href="http://goo.gl/fhwlSP" class="photostack-img">
				<img src="img/2.jpg" alt="img02"/>
			</a>
			<figcaption>
				<h2 class="photostack-title">Happy Days</h2>
				<!-- optional backside -->
				<div class="photostack-back">
					<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
				</div>
			</figcaption>
		</figure>

		<!-- Example for different shuffle iteration count -->
		<figure data-shuffle-iteration="3">
			<!-- ... -->
		</figure>

		<!-- Example for a "dummy" Polaroid -->
		<figure data-dummy>
			<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
			<figcaption>
				<h2 class="photostack-title">Lovely Green</h2>
			</figcaption>
		</figure>
		
		<!-- ... -->
	</div>
</section>

The “photostack-start” class can be used to show an initial overlay on the gallery container. Once the gallery is clicked, the items will make their first move and the first item will be shown in the middle.

The div with the class “photostack-back” can be used to insert some more info for the backside of the Polaroid.

The shuffle iteration count (the amount of times we want all Polaroids to move around before the next item becomes current) can be controlled with the data-attribute data-shuffle-iteration.

The can also contain “dummy” items which will be shown in the container but which will not be part of the viewable gallery. This can be useful in cases where only a subset of a certain image collection should be shown. Imagine an article about your travels where in each section you describe a specific location. You’d set the irrelevant items as dummies and only the Polaroids that are specific to that location would be viewable in detail. In the next section you’d set the others to dummies.

Note that the main wrapping div (immediate child of the section) is set to a width and height of 100%, which means that the items will be scattered across the whole container. If we would like to compact the space of spreading, we could also set the dimension of that div to a smaller one.

Take a look at some screenshots of the gallery:

Optionally, the initial state of the gallery can have an overlay
Optionally, the initial state of the gallery can have an overlay

The current image moves to the middle and the resting items will make way and move to the sides
The current image moves to the middle and the resting items will make way and move to the sides
If there is a backside, we can flip the Polaroid by clicking on the navigation dot for a second time
If there is a backside, we can flip the Polaroid by clicking on the navigation dot for a second time

I hope you like this gallery idea and find it inspirational 🙂

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 up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 90

Comments are closed.
  1. Hello,

    Can this code be used in Adobe Muse? or only in Adobe Dreamweaver? and if so, how would I go about inserting it? I’ve been searching the internet for tutorials and articles. I’m a novice and new [self-taught] to web design. Any help you can provide is welcome.

  2. Thanks Mary Lou – always look forward to learning all kinds of interesting stuff on your site. Recently integrated this into a wordpress site on their homepage link below –

    James Food Stories featuring the polaroids gallery

  3. Thanks Mary for all your awesome works,
    Can i include it in html theme on envato marketplaces ?

  4. Great ! Easy, free and fun ! thank you very much !

    Commercial com and jounralism student.

  5. Hi there

    Do you have somewhere where we can donate some money? We’ve used this in a project and want to pay it foward

  6. Thank you for your nice gallery. But it’s possible to click on the photo can active to current too.

  7. Love the gallery thanks! One question, how can I pull in the background images to be closer to the current image? Like before you click on “view gallery”. Many thanks!!

  8. Hello Mary ,

    Love your work !!!
    i am trying to use your scattered polaroid gallery , but i am not able to see any navigation dots , could you please let me know , where i could be wrong ?

    looking forward to your reply

  9. Hey there,
    really nice work! But there seems to be an issue in Safari – I put the nav on top of the picture. As soon as the image i flipped the nav will disappear behind the image – I fixed it with flipping it the other way around. In case you are interested! 🙂

  10. HI Love this plugin!
    Is there a fix for IE not flipping the pictures? (rotate effect)..in chrome it rotates nicely, but IE Edge/10/9 it just shows the back with no effects.

  11. Thanks for this Gallery ! Perfect *-*

    For those who want an autoplay mode, edit photostark.js :

    Find :
    this.navDots.forEach( function( dot, idx ) { dot.addEventListener( 'click', function() { // rotate the photo if clicking on the current dot if( idx === self.current ) { self._rotateItem(); } else { // if the photo is flipped then rotate it back before shuffling again var callback = function() { self._showPhoto( idx ); } if( self.flipped ) { self._rotateItem( callback ); } else { callback(); } } } ); } );

    Replace :
    var maxPhoto = 0; this.navDots.forEach( function( dot, idx ) { maxPhoto=maxPhoto+1; dot.addEventListener( 'click', function() { // rotate the photo if clicking on the current dot if( idx === self.current ) { self._rotateItem(); } else { // if the photo is flipped then rotate it back before shuffling again var callback = function() { self._showPhoto( idx ); } if( self.flipped ) { self._rotateItem( callback ); } else { callback(); } } } ); } ); var currentPhoto = 1; function autoplay(){ self._showPhoto(currentPhoto); currentPhoto=currentPhoto+1; if(currentPhoto>maxPhoto-1) currentPhoto = 0; } setInterval(function(){ autoplay(); },3000);

  12. Hi, would it be possible to grab the photo from the database or directory?
    Which part should I amend?