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

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!

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 132

Comments are closed.
  1. 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.

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

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

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

    • 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 !

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

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

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

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

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

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

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

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

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

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

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

  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

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

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

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

  18. Ola ?!

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

    PiPs

  19. 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! 🙂

  20. Hi Mary Lou how you work was really nice work,I just copied your code and trying to apply to a site .I am getting the images with the same height and width not at all with different sizes please help me out from that issue.Eagerly waiting for your reply

    • There is the same image in every block of . You just have to change the image from every block with different images that have different sizes (heigth & width).

  21. What a great gallery. I just seem to have a small problem with it.
    Everything works fine on desktop, but if I upload it to my server I can only see the alt- and hover texts. Clicking them opens the view mode and it tries to load, but nothing happens. This must be some kind of path problem??? But what do I need to change? What, where, how?

    • Ok. It is not a path problem. It has something to do with images. I uploaded the demo images and with those it works fine. But with my own images I can only make it work on my desktop.
      I have scaled my images to quite same pixel size as the demo ones, but my files are larger (biggest img 3.39 MB).

    • SOLVED!
      For some reason my image file endings had turned to caps. So instead of jpg they were JPG.
      I also slimmed down my files to 85% quality.

      Like I said… a great gallery. Thank you, Mary Lou

  22. Mary Lou superb!
    I am integrating the responsive gallery into my new gallery and replacing my not so responsive highslide scripting!

  23. Now I have another problem.
    I have only three images in my gallery so far. Everything works great, but when I resize my browser window down to a level where the images appear as 700px width, then the my second image (id=1) never shows. Only the download circle will appear. Other images show just fine.

    The img file itself can’t be the problem, because if I rearrange the img order and try again the problem is always only with id=1.

    Has anyone had this same problem?

    • SOLVED!
      I still can’t put my finger on it what the problem actually was, because I compared the codes (original source vs. my implementation) really carefully and couldn’t find anything wrong with it. Finally, I pasted again some of the source to my page and that solved the problem. So it must have been a typo from my part. I just couldn’t see it for some reason.

  24. I can’t make it work on my mobile devices.. I just tested the demo on my iphone and works fine, but mine position the images at the top left corner without resizing them.. any help?

    • Também tive problemas no mobile, coloquei a versão 1.8.2 do jquery e resolveu.

  25. I have a little problem with gallery. When i click load more images, images are loaded but hidden behind the other images. How can this be fixed?

  26. Hello, I can’t understand how to use it in Joomla 3. I copy folder to root, then in material put the HTML structure and javascript but it doesn’t work. I need to add all js in head?

  27. Hey Mary Lou!

    Really nice gallery, but the slideshow doesn’t work on the native android browser. It does work on Chrome and Firefox for android, but not the native browser.
    A fix, or maybe just the possibility to link to the file itself / some place else instead of the slideshow, would be nice 🙂

    greetings

  28. Hey,
    Your gallery rocks! I was trying to figure out how to separate the data-description into a title on the thumb and then something different for the zoomed photo.

    Thought I’d ask …
    Thanks.

  29. hey, this might seem like a silly question — i don’t want to use the lightbox at all , I just want to connect to other pages on the site (from clicking on a picture).

    how can I achieve this? what would the mark up be for one image?

    Thanks!

  30. I have a question: I’m trying to use this code but, instead of show a picture, I need to show a YOUTUBE video. Is it possible ?

  31. Hello
    Great work, thanks .
    I’ ve a question.
    How to change the link of the page when we close the gallery ?
    thx.

  32. Hi!

    Very nice responsive code… i think i-ll use it to my website if a can! Thank you. I was doing some tests and i notice that, when you have a pronunced vertical aspect ratio image, the grid leaves some white spaces in that div, to avoid the stretch. But, i think it’s better to stretch a little the image in order to keep the apariencie, so, in the selector “.gamma-gallery li img ” of the css, i’ve changed the width from auto to 100% and with this, i was able to solve this little thing. I think you put the auto for some reasons, but i wanted to tell you about this change if it is for some help. Bye and thanks again, from Argentina. Rodrigo.-

  33. Hi Mary,

    May be you can implement onCompelete function in your library.
    Now in your code
    add = function( $newitems ) {
    Gamma.gallery.append( $newitems );
    Gamma.items = Gamma.gallery.children();
    Gamma.itemsCount = Gamma.items.length;
    _layout( $newitems );
    _reloadMasonry();

    };
    For adding new item. but if it take long to add new item. The reload executed before the item actually added and Grid overlaps all new images. You need to call _reloadMasonry(); after all of the item added. You can add some sort of onComplete function and after everything is added up then _reloadMasonry();

    More detail can be found here
    http://stackoverflow.com/questions/4750303/jquery-callback-not-working-when-animation-options-are-included-masonry-plugin

  34. Help – Mary Lou!

    The script is displaying fine in all browsers except for Firefox Quantum as it overlaps the images on load. However, if I resize the page, the images appear fine.

    Is there something I am missing with Firefox or JQuery Masonry?

    Thanks,
    Adam