Site icon Web Design Ledger

Create a Resizable Image Grid with jQuery

Tyler

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

Exit mobile version