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. 7

    Guys! Please, create a video-mode and comments likes facebook (or block with some content likes fb) in full size image. PLEASE!!
    Fantastic script! Sorry for my bad english :)

  2. 8

    Hey, I love the idea, love the concept! I have a question: would be possible to do it horizontally? I experience some troubles when I attempt to do horizontal scroll galleries; and the only way I could achieve that, was with way simpler structure, with one or two images, without “adjusting” to the width of the screen… do you think that setting the width of the screen like 10,000 pixels, and moving sideways would make the trick? (I tried that, with another method, but… I totally failed! xd )

  3. 9

    Can anyone help me make a minor change to this? Instead of a larger image opening on click, I’d like it to go to a URL. Perfect for our use if I can figure out this one change…

    Steve (srhedd@gmail.com)

  4. 10

    Hi Mary,
    this is an awesome script. Thanks for putting it up.

    One Query, would it be possible to open a video hosted on youtube with the light box effect pop up on click of an image?
    Cheers!!

  5. 11

    This looks amazing but I cant get it working on a WordPress (WAMP) environment.

    Firebug shows me: “source is undefined, Line 414”
    Line 414 of gamma.js = src : source.src

    When I ignore the error, the image grid shows up, scaling works to but I’m unable to open a fullsize image.
    The page stays black. Only after a refresh (F5) the fullsize image shows up.
    After that, going back to the grid view doesn’t work too.

    Next to the js error, I can see that this part of the HTML is not executed (greyed out in Firebug)


    events=Object { click=[1], swipeleft=[1], mousedown=[1], meer...}handle=function()

    events=Object { click=[1]}handle=function()
    events=Object { click=[1]}handle=function()

    events=Object { click=[1]}handle=function()
    events=Object { click=[1]}handle=function()

    Any help would be much appreciated! I’m reaching a deadline for a web-project and would love to implement this gallery… :-)

    Thank you in advance!

    Kind regards,
    Steven

    • 12

      My mistake… After loading the gallery scripts in the footer instead of the header, everything works as it should. :-s

  6. 13

    doesn’t work on mobile, tested on android smartphone – gallery loads fine but when you tap on any thumb, it brings up its image without controls. also if you swipe down and tap on any thumbs there – it just disappears.

    • 14

      I just noticed this too, using an old iPhone3. When when you scroll down on the thumb view and tap on one in the lower half of the page, it disappears because it goes up to the top, but the screen view stays in the same spot. …. So if you scroll up you will see the enlargement.

      Anyone experienced this/ have any fix? Change the scroll position with jQuery? Change the overlay position in CSS?
      I will reply if I find a fix.

  7. 15

    Dear Mary Lou

    I’m trying to implement your great gamma gallery more then once on one page (its going to be a scrolling website with different categories).
    Now I’m having some trouble with the singeviewer and its ID. Maybe you can help me out here.

    Thanks so much!
    Chris

  8. 20

    Hello Mary Lou

    im having a lot of problem with IE to load all the image, and also on small resolution screen and mobile …. its just loading and loading and loading.

    heres teh wevsite : jsboutique.com/spring.php

    Thanks a lot if you can help me !

    • 21

      Ok i fix the small resolution problem by changing the data-min-width=”” form 150 to 50… now small resolution and mobile load well !

      Trying to fix the IE problem now !

  9. 22

    I have tried with multiple “gamma-container” but its not working.I want to use it into slideshow thats why.

Comments are closed.