Create a Resizable Image Grid with jQuery

By / May 22, 2009 / Tutorials
shares

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

40 Comments

  1. Paul Randall
    May 22, 2009

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

    Reply
  2. mynameisorman
    May 22, 2009

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

    Reply
  3. josé pacheco
    May 22, 2009

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

    Reply
  4. Roshan Bhattarai
    May 22, 2009

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

    Reply
  5. Stephen Fairbanks
    May 22, 2009

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

    Reply
  6. bitlimakina
    May 22, 2009

    great post thank you

    Reply
  7. Ruan Carlos
    May 22, 2009

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

    Reply
  8. @todayinart
    May 22, 2009

    Retweeted! Awesome man, thanks.

    Reply
  9. Henry
    May 22, 2009

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

    Reply
  10. vidlord
    May 22, 2009

    could you make this work with the mouse wheel?

    Reply
  11. Tyler Tate
    May 22, 2009

    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

    Reply
  12. Kamrul
    May 23, 2009

    Helpful tutorials. I am using it . thanks.

    Reply
  13. art2code
    May 23, 2009

    nice tutorial! thanks

    Reply
  14. Dusan
    May 23, 2009

    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

    Reply
  15. N. Haran
    May 24, 2009

    Nice article.

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

    Reply
  16. Henry
    May 25, 2009

    @N. Haran
    Thanks for pointing out that typo.

    Reply
  17. Blue Blots
    May 26, 2009

    nice tutorial. thanks for the share :)

    Reply
  18. Saw Htoo
    May 26, 2009

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

    Reply
  19. Michael Angrave
    May 28, 2009

    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.

    Reply
  20. Sasha
    May 30, 2009

    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.

    Reply
  21. Chad
    June 17, 2009

    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!

    Reply
  22. Aryashree Pritikrishna
    August 11, 2009

    Thanks for your information. Great job man.

    Cheers,
    Arya

    Reply
  23. Narendra
    September 24, 2009

    great post! I was searching for this since long time

    Reply
  24. Pretush
    December 23, 2009

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

    Reply
  25. federicosanchez
    January 15, 2010

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

    Reply
  26. CommerceStyle.com
    January 17, 2010

    I get 404 errors on the examples….

    Reply
  27. Onetop
    April 2, 2010

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

    Thanks for sharing

    Reply
  28. Anurag
    April 8, 2010

    its good very attractive and easy to use
    thanks

    Reply
  29. Ibrahim
    June 26, 2010

    Cool, I was looking for this.

    Reply
  30. Kevin
    November 17, 2010

    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.

    Reply
  31. Sam
    January 4, 2011

    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

    Reply
  32. tuba
    June 27, 2011

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

    Reply
  33. Arthur
    September 17, 2011

    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?

    Reply
  34. Mark Anthony Recto
    February 6, 2012

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

    Reply
  35. Vipul Chauhan
    February 6, 2012

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

    Reply
  36. Leinix Advertising Group
    March 9, 2012

    Very nice

    Reply
  37. Elaine
    March 16, 2012

    Demo links don’t seem to be working….

    Reply
  38. Md. Liton Arefin
    May 5, 2012

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

    Reply
  39. creativefault
    June 25, 2012

    The demo links is broken…

    Reply
  40. Narender
    August 6, 2012

    Can i use these slideshows with blogger blog ?

    Reply

Leave a Reply