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

    • 2

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

  2. 3

    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?

    • 4

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

    • 5

      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

  3. 6

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

  4. 9

    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?

    • 10

      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.

  5. 11

    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?

    • 12

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

  6. 13

    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?

  7. 15

    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?

  8. 17

    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

  9. 19

    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.

  10. 20

    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!

  11. 21

    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 ?

  12. 22

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

  13. 23

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

  14. 24

    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

Comments are closed.