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

    Hi Mary Lou,

    Awesome, I love it :-) a lot

    Just one hick: it is not responding well on firefox, when clicking on the arrows or close icon.

    Rida

  2. 2

    … actually here is the scenario:
    if you try close an image immediately after clicking onto it to zoom it, it doesn’t work. when clicking on the image and then navigating using the arrows and then closing the image after works

    I hope this will help you tracking the issue

    Thanks

    Rida

  3. 4

    I love it. Would be perfect if it had the option to share the photo on social networks.

  4. 6

    Hi, thank you for this post, love it so much !!!!

    But I have one question, is it possible to make a different link ? let me explain : can I make a link that don’t goes to full size image but goes to another page or something like that ???

    Thank you

  5. 8

    Hi,

    Just what I was looking for. Thank you for this great plugin. I am experiencing some issues with it.

    When clicking on the loadmore button, I am loading the next set of images dynamically using Ajax. But when doing so, it shows the titles first and I think it calculates the heights based on this. But later when the actual images are loaded, the height still stays the same. But when I refresh the browser, it loads correctly, possibly because of a cached image. Not sure why this is happening.

    Please have a look at the screen shots which explains the three different behaviours. http://www.bounceapp.com/80715.

    This the call back function, I used to load more images. As this is on my local development server, I cannot provide you a url to have a proper look. But any help on this would be much appreciated.

    Thanks

    John

    function fncallback() {

    $('#loadmore').show().on('click', function() {
    ++page;

    // function that makes a request and returns a promise:
    function getMoreItems() {
    return $.ajax({
    type: "POST",
    url: "www.doamin.com/index.php?option=com_rsmediagallery&task=getitems&format=raw",
    data: {
    limitstart: $("#gamma-container ul").children().length + parseInt($("#rsmg_original_limitstart").val()),
    Itemid: $("#rsmg_itemid").val()
    }
    });
    }

    // function that expects a promise as an argument:
    function addMoreItems(ajaxReturned) {
    ajaxReturned.success(function(data) {

    var htmlitems = $('');
    if(typeof data == "object" && data.items && data.total) {
    $(data.items).each(function(index, item) {
    var li = $("");
    var divouter = $("", {
    "data-alt": item.title,
    "data-description": item.title,
    "data-max-width": item.absolute_images.maxdata.width,
    "data-max-height": item.absolute_images.maxdata.height
    });

    var lastimg;
    $(item.absolute_images.images).each(function(idx, img) {
    var oneimg = $("", {
    "data-src": img.image,
    "data-min-width": img.width
    });
    divouter.append(oneimg);
    lastimg = img;
    });
    var scrptimg = $("", {
    "src": lastimg.image,
    "alt": item.title
    });
    divouter.append($("").append(scrptimg));
    li.append(divouter.append());
    htmlitems.append(li);
    });
    }

    Gamma.add($(htmlitems.html()));

    if($("#gamma-container ul").children().length >= data.total) $("#loadmore").hide();

    });

    }

    // get a promise from testAjax:
    var promise = getMoreItems();

    // give a promise to other function:
    addMoreItems(promise);

    });
    }

    • 9

      Not sure.. but it might be that the images chosen to be displayed are not being preloaded. This is something I will have to fix. Thanks for the feedback. ML

  6. 10

    Hi many compliments for this gallery but i have a little prob. with chrome mac … in safari and firefox for mac all works good but with chrome there are only 2 columns … and i don’t understand where is the problem … also you page demo in chrome have the same problem …

    look:
    http://www.andromedamurano.it/project/index.html (your page demo)
    http://www.andromedamurano.it/project/index.php (your page demo with my pictures)

    Can you help me please!?
    Thx a lot
    Tommy

  7. 12

    Hi Mary Lou,

    Thanks a lot for the reply. I will try something to preload the images. Hope you will update the script very soon :)

    Many thanks
    John

    • 13

      Hi John,
      have you already found a way to preload the images?
      I’ve the same problem: the images which are appended via ajax are overlapping.
      Thx
      Sarah

  8. 14

    Hey Mary Lou, great plugin!
    I’m trying to use it with ajax page loading, and I’ve found that it would be useful to add a reset function to cleanup events and variables, something like

    reset = function(){
    Gamma.singleview = false;

    $window.off( ‘smartresize.gamma’);
    $window.off( ‘statechange.gamma’);
    …..
    }

    ….
    return {
    init : init,
    add : add,
    reset: reset
    }

    if you want to see it live it’s here: http://www.theautumnsrain.com (press and foto)
    Many thanks for sharing this anyway, it’s a wonderful and well well thought plugin!

  9. 17

    Hey, I’m messing around with this but I’m a bit confused. Why does it take so incredibly long to load with my implementation? I specifically (and tediously) resided each image to the corresponding sizes which I thought was supposed to keep load times down..Instead it takes like 10 seconds or longer! http://co2oogle.com/portfolio/photo.html

    • 18

      Hi Jon, your main container can have a maximum size of 1580px which, with 5 columns set as maximum number and a screen that shows the max width, will load the large image in the thumbnail view instead of the medium one (since the list item will be bigger than 300 pixels). This is what’s causing the high loading time. Either you specify to have another column for larger screens which will make sure the list item will not get bigger than your medium sized images or you add another image size for this case. You could also restrict the main container to have a max-width of 1540px. When I open your page on a large screen I can see what you are talking about, but on a smaller screen it loads pretty fast. So just make sure to tune it appropriately. The ideal approach is of course to have multiple image sizes (our demo is just using a few).
      I hope it helps, let me know how it goes, cheers, ML

  10. 21

    Thank you!! This is amazing and just what I have been looking for. Is there a plan to make this into a plug-in for WP? I’d love to use it on my photography site.

  11. 23

    This is great! I have one small issue, my previous and next arrows are not showing like they do in the sample. I see that the in the code they aren’t pointing to image files for these icons… any idea how I might get them to show or if I’m missing something?

  12. 24

    Hi, sorry for sounding stupid but can I disable the modal window and give a normal href link?
    Thanks

  13. 26

    hello,
    Very nice site.
    I tried to do it for my site, it works very well on Dreaweaver, but I put it online it does not work:
    -it does not find the images when they are on the server
    -it does not move from one image to another
    -it does not close the image to return to main page …

    Can you help me?
    http://martinlagardere.com/fashion

  14. 29

    Latest version of Chrome shows image in background when set to mobile size and that background image is sticky for some reason.

  15. 30

    Hi,

    I’m trying to integrate it in radiant but after I click on a image to zoom in and close it again, I can’t open another image.
    It works fine when I take the code out of the radiant template in a stand alone file.
    The ‘_singleview = function()’ code gets executed each click, but it just doesn’t zoom in the image. Guess the createSingleView function doesn’t get executed because some issue with a selector not matching correctly when the gallery is wrapped up in different div’s.
    Here is the code (site is not yet online): https://gist.github.com/bc8e8d66046d5b209e02

Comments are closed.