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. Hey the Github link is not working ๐Ÿ™

    This is really cool btw, keep up the good work.

  2. Hello there, loved your gallery, I’m trying to do something similar but with song and auto slide..
    I know how to put my audio file, but for the auto-slide.. is there a simple way for photostack to set an interval and do ‘next’?
    Thank you !!

  3. I tried it on my Galaxy Trend and it’s really sweet. I didn’t see the entire gallery but it was still working and was useable.

  4. This is nice…good work! But would be great if you can click on any picture and then effects to the middle ๐Ÿ™‚

  5. Nice gallery.
    Could it be possible to expand it with autorotation of the images with stopping on hover. It would be a nice feature that could be used many places. Maybe an idea for your next project? ๐Ÿ™‚

  6. Awesome work..
    Can you please tell me the fonts used in back of image I really liked it and want to use it on my site
    *I am a newbie and don’t know how to find it of my own

  7. Hi

    Really like the effect. What I would like to do is properly shuffle the cards every time what would be easiest way to do this?

  8. I love the attention to detail in order for it to stay consistent with ‘flat’ design. Nice job.

  9. Hola chicos, me encanta su blog, uso mucho de su material para paginas de mis clientes, me parece muy bueno todo lo que hacen y se que en algun momento estare en su altura.

    Thank you!
    From Argentina!

  10. Impressive, nice job. Keep it up! ๐Ÿ™‚
    How long to develop it? (curious)

    @Veaceslav : For me ie 11 is ok.

  11. Hi! This is a really nice sketch but I wanted to ask if there is a way to make the text behind the polaroids selectable/clickable? Thanks.

  12. This is beautifully amazing but there’s one thing that I wonder. Is this only works for WordPress, isn’t it? Could it be possible to use it on Blogger platform? ’cause my blog is running on Blogger platform but I desperately want this for my website. If you could help me it’d mean a whole lot. Thank you !!

  13. Hi,

    Thanks for the Gallery. This is wonderful. Please tell me that it is for the wordpress only or for others also

  14. Once again, a great plugin!
    Thanks a lot for sharing!

    Integrated into the new version of my website for an artistic galery and adopted ๐Ÿ˜‰
    No issues for me: works perfectly, ditto for the mobile version.

    ร‰tien’

  15. Can you please share code that will enable the side images to shuffle and stay completely within the div?

  16. Definetely amazing.

    How to implement auto sliding? I don’t like to click on each button…

  17. Why is there only 6 Polaroids in the Navigation, also when i have more then 6 figures in the code!?

  18. Hi, Thanks for this great code! ๐Ÿ™‚

    I was wondering.. did it use to work on chrome? I when i flip a polaroid in demo 2 or 3 it doesn’t show. Tested in other browser and they seem to work. Anyone has an idea why it doesn’t work?

    • Hi Aron, thanks for your feedback! We are looking into it; Chrome Version 37.0.2062.94 on Mac does not seem to handle the backface-visibility well here. I’ll post an update once we find out how to fix it. Thanks again and cheers, ML

    • I have found the solution. It appears, that the new version of chrome sets the z-indexes differently of transformed elements (probably to 0 or lower). I can’t confirm, but the solution is rather simple, just set the z-index of the photostack back to 1.

      .csstransformspreserve3d figure.photostack-flip .photostack-back { z-index: 1; }

      That’s it ๐Ÿ™‚

  19. Hi

    This code has stopped working in Chrome (mac) since it recently updated to version 37, any ideas how to fix the issue?

  20. Hi. I love this idea and would like to use it on my website/blog! Is there any way to import this into WordPress to use instead of their gallery?

  21. Hi Is there anyway to make this responsive I am testing it locally with webmatrix but when I open it with the iphone the images just show backwards text instead of the image

  22. This gallery looks cool ๐Ÿ™‚
    I have 16 images and it shows only 6 pictures.
    Is there any way to show all 16 pictures??

  23. I’m trying to put this in autoplay mode.

    Using this I can make them move, but…
    setInterval( function(idx) { self._shuffle(); }, 4000);

    But I can only make shuffle the ones that aren’t active.

    Can anyone help me?

  24. Hi Mary Lou,
    Many thanks for this great article and all the other ones, as I feel you provide us with great ideas for a better web!

    For this particular article, I am trying to implement it, but am struggling with contents on the back of the images, as content is sometimes longer than the container. Unfortunately setting overflow:auto on the back container does not solve the problem, as somehow the scroll bar shows, but cannot be accessed. This seems to be also linked to Arsh Shah Dilbagi (Robo)’s question from back in March, where he said he can’t select the text on the back.

    An example, using Ramosquis’ implementation: look at the second polaroid on this page, the overflow is pretty ugly as content is too long, so I tried to add overflow:auto to .photostack-back (in Chrome DevTools only).

    I have tested this in most browsers, and it only works in IE (that’s a first!). Would you be able to advise how this could be resolved? I have tried finding a solution or workaround, without success.

    Many thanks in advance for your (or anyone else’s) input,
    Wishing you all the best,
    Nico

    • Update since yesterday: I have applied a Firefox update, and it seems this now works in Firefox as expected (Firefox 33.1 on Windows 8.1). The .photostack-back also responds to :hover css as expected.

      It still does not want to play nice in Chrome (I tested Chome Beta 39.0.2171 and Canary 41.0.2218).