Create a Resizable Image Grid with jQuery

By / May 22, 2009 / Tutorials

Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web. (Take a peek at the final product.)

Setting up the grid

First lets begin by setting up a static image grid. I have prepared 6 photographs than have been cropped to a maximum height and width of 500 pixels. We will create a ul and place our images inside li tags.

<ul id="grid">
  <li><img src="1deadsea.jpg"/></li>
  <li><img src="2akko.jpg"/></li>
  <li><img src="3jordan.jpg"/></li>

  <li><img src="4petra.jpg"/></li>
  <li><img src="5pyramids.jpg"/></li>
  <li><img src="6deadsea.jpg"/></li>
</ul>

Next, we will float the lis so that they wrap nicely and place a bit of margin on the right and bottom edges of the lis to add a bit of whitespace.

Image grids look best when the photographs are both vertically and horizontally centered. We can accomplish this by setting the width, height, and line-height values, and then declaring text-align: center on the ul and vertical-align: middle on the image (see iBloom’s article for more about this technique).

ul#grid li {
  list-style: none outside;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  width: 500px;
  height: 500px;
  line-height: 500px;
  text-align: center;
}
ul#grid li img {
  vertical-align: middle;
}

Example 1: The basic image grid. (The images are a bit big at this point, but we’ll be fixing that in just a bit.)

Fun with ems

Here comes the exciting part. Remember the em unit? 1 em is equal to the current font size. So if the font size is 10 pixels, then 1 em is also 10 pixels. This little unit is our magical ingredient.

What we’re going to do next is specify the width and height of our images and their parent lis in ems rather than in pixels. We will use jQuery to measure the pixel size of each image, convert those measurements to ems, and add those new measurements to each image as inline CSS.

$(document).ready(initializeGrid);

function initializeGrid() {
  $("ul#grid li img").each(function() {
    var width = $(this).width() / 100 + "em";
    var height = $(this).height() / 100 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
  });
}

You will notice that we are dividing the pixel width and height by 100 to arrive at the new em measurements. This means that if the font size were set to 100 pixels, the width and height of the image would be 5 ems. For now, lets set the font size to 50 pixels. At the same time, lets change the width, height, and line-height of the li from 500px to 5em.

ul#grid li {
  ...	
  font-size: 50px;
  width: 5em;
  height: 5em;
  line-height: 5em;
}

Adding the slider

The jQuery UI provides a lightweight slider that we can bind to the font size of the li. And you guessed it: as the font size increases, the images will enlarge; as it decreases, the images will shrink. Nifty, right?

To set up the slider, we first need to include the jQuery and jQuery UI JavaScript files, as well as the CSS file for jQuery UI.

<link rel="stylesheet" href="ui.all.css" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>

Next, we need to drop in some basic HTML for the slider:

<div id="grid_slider">
  <div class='ui-slider-handle'></div>
</div>

We also need to initialize the slider by adding some JavaScript to the initializeGrid() function. We will set the maximum value at 100, the minimum value at 10, and the initial value in the middle at 50.

$("#grid_slider").slider({
  value: 50,
  max: 100,
  min: 10,
  slide: function(event, ui) {
    $('ul#grid li').css('font-size',ui.value+"px");
  }
});

And presto! We now have an image grid that fluidly scales and is light on the browser. (Boy will that client of yours be impressed!)

Example 2: The finished product

  • http://prandall.com Paul Randall

    A nice example, and I like the fact the image quality remains high.

  • http://twitter.com/mynameisorman mynameisorman

    Nice tutorial. Not sure what I could use it for just yet but it’s in my jQuery bookmarks!

  • http://designi1.com josé pacheco

    i´ll try i near future use this example. Very cool! 😀

  • http://roshanbh.com.np Roshan Bhattarai

    great example…and nice mathematical calculation man…good job…

  • http://www.ghosthorses.co.uk Stephen Fairbanks

    Very interesting… I’ll have to think of ways I can use this. For evil things, perhaps.

  • http://www.bitlimakina.com bitlimakina

    great post thank you

  • http://www.ruancarlos.com.br Ruan Carlos

    Very good work, but if I can resize only one picture would also be cool, also grid.

  • http://todayinart.com @todayinart

    Retweeted! Awesome man, thanks.

  • http://henryjones.us Henry

    @todayinart
    Thanks! Tyler did an awesome job writing this tutorial.

  • http://www.vidlord.com vidlord

    could you make this work with the mouse wheel?

  • http://www.tylertate.com/ Tyler Tate

    Glad everyone is liking the tutorial! I’ve been used this technique in my company’s content management system to nicely display images, though I’m sure there are other uses out there as well.

    Taking it a step further, since a fairly large image is already being loaded for the image grid, you could easily add a link to view the full size of that same image in a lightbox.

    Tyler

  • http://www.looogo-web.com/ Kamrul

    Helpful tutorials. I am using it . thanks.

  • http://www.art2code.com art2code

    nice tutorial! thanks

  • http://idsandclasses.com Dusan

    Cool effect. One thing that is probably missing is to add IE only css rule ul#grid li img { -ms-interpolation-mode: bicubic;} for better quality images in IE

  • N. Haran

    Nice article.

    FYI: It’s ‘peek’ not ‘peak’.

  • http://henryjones.us Henry

    @N. Haran
    Thanks for pointing out that typo.

  • http://www.blueblots.com Blue Blots

    nice tutorial. thanks for the share :)

  • http://www.photovaco.com Saw Htoo

    Thanks for sharing. I will try this one for sure. :)

  • http://www.crearedesign.co.uk Michael Angrave

    Another interesting example of jQuery. Doesn’t really stand out to me what I could use it for at present, but I will be making a note of it for potential future use.

    Keep up the work, always looking for examples of jQuery. Very powerful tool.

  • Sasha

    Awesome, love the idea of this! This would be great on, say, web image galleries, letting people decide what size they want to view the thumbnails in. How would one go about integrating with with the jquery Cookie plugin, so it remembers settings site-wide? That would totally make this kick-ass.

  • http://www.apoads.com Chad

    Thank you for this tutorial. I decided to implement it on my website, you can see it here: http://www.apoads.com/CampFuji/Ad/Photo

    One thing, the photos on my site are pulled from a database. That’s no big deal, but it means that the images that are in the list can change from time to time.

    A problem cropped up with browsers caching the photos in the list, but when it changes it causes some weird stretching of the photos.

    To reproduce the effect, visit the site linked above… then visit this page: http://www.apoads.com/CampZama/Ad/Photo . It’s the same thing but the photos are in a different arrangement.

    Any ideas on how to resolve this?

    Thanks in advance!

  • http://webarya.wordpress.com/ Aryashree Pritikrishna

    Thanks for your information. Great job man.

    Cheers,
    Arya

  • Narendra

    great post! I was searching for this since long time

  • http://techmasher.co.cc Pretush

    Nice illustration, there was also not much difference in image quality

  • federicosanchez

    The links to Example 1 and Example 2 don’t work… What a pity… Could you fix them? Thank you.

  • http://www.commercestyle.com CommerceStyle.com

    I get 404 errors on the examples….

  • http://onetop.co.uk Onetop

    Great tutorial. I will give it a go on my next website.

    Thanks for sharing

  • http://discountexpress.in/ Anurag

    its good very attractive and easy to use
    thanks

  • http://www.zaklinks.ca Ibrahim

    Cool, I was looking for this.

  • Kevin

    Awesome. Do you know if it is possible to save the resized gallery to a cookie or save the resized settings when the page is reloaded? Also, reset button to resize gallery to original settings. Thanks.

  • Sam

    Really nice and smooth. Am trying to use it with images that users upload, so have removed the width and height from the HTML img elements (as we don’t know them for any uploaded images), but without width and height this doesn’t display the image. Would appreciate any help, just trying to get into JQuery.
    Thanks

  • http://psdtomagento.net tuba

    This is really helpful for managing photo projects using jQuery. Thank you for the awesome tutorial. Thanks!

  • Arthur

    Hi, this is wonderful!

    Wondering however, how could I make a version of this code that pulls the images from a folder or directory automatically to populate the grid?

    This is great for small pages, but once you start dealing in the hundreds it gets a little monotonous :/ can anyone link me to some tutorials?

  • http://icstwebsite.bravehost.com Mark Anthony Recto

    Thank you, its make my coding understandable than other samples….

  • Vipul Chauhan

    This is really helpful for managing photo projects using jQuery. Thank you for the awesome tutorial. Thanks!

  • http://www.leinix.com Leinix Advertising Group

    Very nice

  • http://elainevellacatalano.com Elaine

    Demo links don’t seem to be working….

  • http://www.h2cweb.com Md. Liton Arefin

    Check the example links. Those are not valid or mistakes to link the exact demo page.

  • http://creativefault.com creativefault

    The demo links is broken…

  • http://www.eduways.in Narender

    Can i use these slideshows with blogger blog ?