Gamma Gallery: A Responsive Image Gallery Experiment

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

Gamma Gallery: A Responsive Image Gallery Experiment

View demo Download source

Creating a truly responsive image gallery can be a very tricky and difficult thing. There are so many factors to consider like the layout and the features, and so many choices to make when it comes to delivering a good viewing experience for every device. Gamma Gallery is an attempt to create an image gallery that uses a similar responsive images approach to the proposed picture element. Focused on providing suitable image sizes for both, the fluid grid thumbnails and the full image view, the selection of images also depends on container dimensions and not solely on the window size. In some cases it might even be reasonable to load larger thumbnails for a smaller device if we, for example want to show less columns in a grid. So, smaller windows don’t necessarily mean smaller thumbnails.

Gamma Gallery uses David David DeSandro’s Masonry in a fluid mode where column numbers are defined depending on the grid container sizes.

Inspired by Picturefill from Scott Jehl, the responsive images approach that mimics the picture element, we’ve come up with the following HTML structure for defining different image sizes:

<div class="gamma-container gamma-loading" id="gamma-container">

	<ul class="gamma-gallery">
		<li>
			<div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400">
				<div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>
				<div data-src="images/xxlarge/1.jpg" data-min-width="1000"></div>
				<div data-src="images/xlarge/1.jpg" data-min-width="700"></div>
				<div data-src="images/large/1.jpg" data-min-width="300"></div>
				<div data-src="images/medium/1.jpg" data-min-width="200"></div>
				<div data-src="images/small/1.jpg" data-min-width="140"></div>
				<div data-src="images/xsmall/1.jpg"></div>
				<noscript>
					<img src="images/xsmall/1.jpg" alt="img01"/>
				</noscript>
			</div>
		</li>
		<li> <!-- ... --> </li>
		<!-- ... -->
	</ul>

	<div class="gamma-overlay"></div>

</div>

Depending in which viewing mode we are, thumbnail grid view or full image view, the choice of the fitting image will depend on either the list item’s size or the whole viewport size. Let’s call that the “container size”. An “xsmall” image will be chosen if the container size is less than 140 pixels. A “small” image is picked if the container is wider than 140 pixels (data-min-width=”140″). A “medium” image is chosen if the container is wider than 200 pixels and so on.

Because we have a “fluid” image approach where we define the max-width of the image to be 100%, we will fit the image in its container if the image is bigger than the container. For that, our images will have the sizes that are defined in their consecutive (upper) step. For example, the “large” sized image will have a width of 700 pixels. This will ensure that the image shown is always equal or larger than its container, never smaller. In order to maintain the layout of the grid and never show a pixelated image (i.e. by stretching it), this approach seemed the most reasonable one.

The data-max-width and data-max-height attributes defines the largest image dimension which will restrict it to that size and not stretch it fully in the slideshow view. The slideshow view will take all the window size into account and allow the image to fill up all the possible space. The attributes ensure that the image doesn’t get resized beyond its largest dimension and become pixelated on huge screens.

Some things we are using in Gamma:

There are many things to improve here, it is a very experimental implementation that tries to tackle the responsiveness of a special scenario, an image gallery.

In the demo we don’t really take care of the vertical images which should of course have a set of reasonable dimensions that take the height of common screen sizes into account.

Here are the settings in the Gamma gallery script:

// default value for masonry column count
columns : 4,
// transition properties for the images in ms (transition to/from singleview)
speed : 300,
easing : 'ease',
// if set to true the overlay's opacity will animate (transition to/from singleview)
overlayAnimated : true,
// if true, the navigate next function is called when the image (singleview) is clicked
nextOnClickImage : true,
// circular navigation
circular : true,
// transition settings for the image in the single view.
// These include:
// - adjusting its position and size when the window is resized
// - fading out the image when navigating
svImageTransitionSpeedFade : 300,
svImageTransitionEasingFade : 'ease-in-out',
svImageTransitionSpeedResize : 300,
svImageTransitionEasingResize : 'ease-in-out',
svMarginsVH : {
	vertical : 140,
	horizontal : 120
},
// allow keybord and swipe navigation
keyboard : true,
swipe : true,
// slideshow interval (ms)
interval : 4000,
// if History API is not supported this value will turn false
historyapi : true

And here is an example of how we can initialize the gallery:

<script type="text/javascript">
	
	$(function() {

		var GammaSettings = {
				// order is important!
				viewport : [ {
					width : 1200,
					columns : 5
				}, {
					width : 900,
					columns : 4
				}, {
					width : 500,
					columns : 3
				}, { 
					width : 320,
					columns : 2
				}, { 
					width : 0,
					columns : 2
				} ]
		};

		Gamma.init( GammaSettings );

	});

</script>

The viewport width is the width that we will take into account for choosing the right sized image but also for defining how many columns in our grid layout we want to show. For example, between 320 and 500 pixel we would like to show 2 columns.

The images used in the demo are by Idleformat.

The thumbnail hover style is inspired by the one seen on Nudge.

Feedback, suggestions and comment are very welcome, there is lot’s things to improve and make better. Thank you!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 130

Comments are closed.
  1. 1

    Wonderful work as always but seems not working on IE9 (blocked in images loading state).

  2. 2

    More info: works on IE9 with file protocol but does not work on local serveur or from codrops host.

    • 4

      Hi Daniel, there was a conflict with another script in the demo and it’s fixed now! Thanks again for your feedback, cheers, ML

  3. 5

    Looks great, but how does it scale images? If a have a bunch of the images with the equal dimensions (say 1000 x 200) how does this grid will display it?

    Thanks.

    • 6

      Hi Andrey, the purpose of this gallery is to serve different images for different screen/container sizes. But you can of course use it with just one large version and and a thumbnail size…

  4. 9

    I dont know about loading 5 different image size at once for each image. It seems a lot of unnecessary server requests to me.

    • 10

      Hi Ozgur, you obviously misunderstood, no 5 images are loaded of course. The whole point of this is to load only the image that is needed… Cheers, ML

  5. 13

    as always, great script. And for a play ground, it works quite well.

    And as an FYI: it works very well on OS X 10.5.7 via Chrome, FF and Safari. I also tested on iPad 2 running IOS 5.1.1.

    Beautiful script!

    well done Mary Lou!

    • 15

      Outside the fact that isotope would allow/add filtering functionality, can you clarify what other benefits of using isotope would be instead( or your question is in fact asking that)?

    • 16

      The only reason would be for the filtering functionality. I might give it a try myself shortly.

  6. 17

    You have no idea how useful this post was! Thanks Mary Lou, and the plugin is awesome! Thanks for sharing. =)

  7. 18

    That’s amazing !
    I am using Isotope on my website, and always have had this High priority problem with google PageSpeed,
    60% of the image’s data is loaded unnecessarily when viewed on a large width device, since they are shrinked but not scaled to fit the column width. Also, when viewed on a small width device the images are stretched bigger resulting in an ugly pixel rendering.
    The idea of loading different images according to the device width is genious. It saves precious page loading time, which generally is quite long on a gallery website.
    I can’t see any weakness in your code, but I’ll wait a bit before using it on my website, since some people might have interesting improvement feedback to share.
    GJ ML

  8. 21

    Hello! Classroom work! is it possible to apply to this script “lazyload” because the script is very good, and posledrvatelnoy-loading pictures available! high output, it is a lot of traffic … Thanks guys!

  9. 23

    Wonderful demo, although it rescales a little slow, even in Chrome (but this might be due to its experimental nature).
    One thing I’d personally change is the pixel values for the viewports, instead using em’s. This is much more responsive as it takes zooming and user stylesheets (font sizes) into account.

    Other than that it looks really nice!

    • 24

      Hi Reinier, thank you for your feedback! You are absolutely right, em instead of pixel would be a wiser choice, I’ll keep that in mind. Thanks and cheers, ML

  10. 25

    Very slick – love the effect of zooming the image out of the thumbnail into the gallery view, Facebook does this in their new iPhone app and it’s really nice. I think some user feedback would be nice while the larger image is being loaded in gallery view (i.e. “enhancing”) just so you know that it’s not a super pixelated image you’re getting.

    Also when you go back to an image you’ve already viewed, the small version is zoomed before you get the full-res version. If this is in cache already, could you expand the high-res version from a compressed size?

    Final little thing is, instead of getting a spinner when you’re clicking to the next image as it’s loaded – if you used an expanded view of the thumb with some “enhancing” feedback I think this would be a smoother experience. Fantastic showcase though, just a few ideas for getting an extra few percent of awesome out of it :)

    • 26

      Hi Darren,
      excellent suggestions, thanks a lot for you feedback! I agree with all points; I’m not sure if the second one would be a bit heavy because of the zoom effect on a much larger image. Thanks a lot again, it’s great feedback, I really appreciate it! Cheers, ML

  11. 28

    Excellent plugin!! Thanks for sharing, love it!

    One Question: Where can i specify how many images are loaded after clicking “Loading more items”?

  12. 29

    Slideshow functionality doesn’t work properly.
    If you press “play” , then “pause” , and then continue to via arrows left and right. previous images are not hidden.

Comments are closed.