March 19, 2024

Create a Resizable Image Grid with jQuery

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

Share

40 Comments

  1. Tyler Tate Reply

    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

  2. Dusan Reply

    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

  3. Michael Angrave Reply

    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.

  4. Sasha Reply

    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.

  5. Chad Reply

    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!

  6. Kevin Reply

    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.

  7. Sam Reply

    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

  8. Arthur Reply

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *