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:

ML 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://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 130

Comments are closed.
  1. 1

    Disregard previous comment. I found there was another jquery library that was loading that must have messed it up.

  2. 2

    I am a beginner and I am doing my best to use this script for my site. (It’s the best I’ve seen that doesn’t cost $$$).
    The sizing of images is a bit of work…do I really need so many sizes?

  3. 4

    I’ve found when implementing this on my CMS SilverStripe that I get a security error for jquery.history.js

    “Security Issue
    an attempt was made to break through the security policy of the user agent”

    This meant after loading an image once then closing it the error occured and the popup stopped working.

    I got around the error by using another version of history.js here: https://github.com/andreasbernhard/history.js/ so the gallery still works. But the history doesn’t work anymore….

  4. 5

    Hey ML!

    Pretty nice work on here, but somehow after click the “load more” the next pictures are loading, but its overlapping the other images on top.

    The issue you can see here: http://www.yuemeeda.com/lookbook

    Any solution for that?

    Best Regards

    Jason

    • 6

      Hi jason how you got the ouput like that (in the shared link) it was really nice work,can you please let me know I am getting the images with the same height and width not at all with different sizes please help me out from that issue.

  5. 7

    Hi Guys,
    first amazing plugin i really like it… but it’s not working on chrome ??!!!!!!!!!!

  6. 8

    How would you go about setting a separate hover title and caption.
    I want to use the “data-alt” as my roll over text and the “data-description” as the main caption in the pop up..
    Im guessing its in the gamma.js, perhaps part of this section, I’v tried playing around with it but can only get the alt as the hover and then loose the main caption altogether:

    // replace each div element with an image element with the right source
    $items.each( function() {

    var $item = $( this ),
    $picEl = $item.children(),
    sources = _getImgSources( $picEl ),
    source = _chooseImgSource( sources, $item.outerWidth( true ) ),
    description = $picEl.data( 'description' );

    // data is saved in the element
    $item.data( {
    description : description,
    source : sources,
    maxwidth : $picEl.data( 'maxWidth' ),
    maxheight : $picEl.data( 'maxHeight' )
    } );

    $( '' ).addClass( 'gamma-description' ).html( description ).insertAfter( $picEl );

    $( '' ).attr( {
    alt : $picEl.data( 'alt' ),
    title : $picEl.data( 'title' ),
    src : source.src
    } ).insertAfter( $picEl );

    $picEl.remove();

    } );

    }

    thanks

  7. 10

    I want the grey overlay to not appear when I hover the mouse over a pic, can someone just tell what to remove in one of the css files to do this.

  8. 11

    Anyone else having trouble viewing the enlargements on a phone????

    The thumbs on the lower part of page disappear when clicked on!

    I have discovered that when when you scroll down on the thumb view and tap on one, the image disappears because it goes up to the top, but the screen view stays in the same spot. …. if you scroll up you see the enlargement.

  9. 12

    It looks like the script is not working correctly when used with jQuery 1.9.0. When resizing the brwoser, the mansory is not being retriggered.

  10. 14

    Amazing stuff, I was wondering if you knew or could give an example of how to make the close button in the top right corner of the previewed image rather than the top right of the browser screen. Was going through the gamma.js, but not quite sure where to start with modifying or setting up or moving the close(x) button based on the size of the viewed image in the browser.

    Thanks so much for an amazing image gallery viewer

  11. 16

    Hi. I really like the plugin but it seems to have problems with images with low aspect ratios ( 1 (wide and short). The problem is when uploading it creates a small thumbnail and this is what it uses in the viewer causing it to be extremely blurry when it is resized back up.

    Here’s a test page with 3 wide and 3 tall images. http://infinispace.net/2013/04/gamma-test-gallery/

    The tall images look like crap when activating the viewer, the wide images look fine.

    I’d like to use this plugin, but this is a showstopper for me.

    Thanks.

  12. 19

    How can i modified this code so that i can have multiple galleries on one page?

  13. 20

    This is a fantastic plugin, have got this implemented in CMSMS utilizing CGSmart Image to create the various image sizes…. I too would love to add a differing comment once the image is clicked on, are you able to provide any pointers within the gamma.js?

    Thanks for sharing

  14. 21

    Ola ?!

    Very great Gallery.
    But…don’t work on Surface (win8) :(
    Thanks

    PiPs

  15. 22

    Hello,
    great plugin! But i have a site with many images, i want to know if instead of manually entering all the names of the images, I can do this automatically. I created some directories containing images.
    Can I load them in some way?

    Thanks a lot! :)

Comments are closed.