Using jQuery to fit thumbnails

The problem

I’ve run onto a problem today: I had a bunch of thumbnail files that should be displayed in a gallery page in fixed-size boxes, but each image had different dimensions.

It’s easy to fit images to a box using css and width/height properties – you can apply one of them (i.e. width), and leave the other not set – the image will be resized and will keep it’s aspect ratio.

The problem arises, when you have to fit images to a box (say 160px x 200px), but images can have any possible size. You have to handle wide images (i.e. 250px x 100px) as well as narrow ones (100px x 250px).

The solution

There are several ways to deal with image sizing on web pages:

• using plain css  – but this is not a cross-browser solution
• if the images are generated within your application – refactor the thumbnail generation procedure to output images that fit perfectly into the box
• use client-side javascript

When your application has to deal with already existing files, then you’re left only with the last solution.

jQuery

Javascript image manipulation is tricky when you have to deal with dimensions, events and still keep it working on all major browsers. That’s why I have choosen jQuery for that. The main reason is that jQuery separates you from the browser – you don’t have to waste time implementing bunch of “ifs” for each browser.

In my code the images are outputted using this part of HTML code:

<div style="overflow: hidden;width: 160px;height: 200px">
 <a href="target_to_image_or_gallery">
  <img class="imageFitBox" src="some_thumbnail.jpg?rnd=5624562456" alt="(Image is missing)" />
 </a></div>

If you use ASP or PHP or any other server-side processed scripting language, you will probably use some controls to output the images, links etc. It doesn’t matter whether you put that part into table cells, floating divs or any other construct.

Important parts in the code above:

• the outer div element has fixed size

• image’s class name is set to “imageFitBox”

• image’s url is extended with a random number (can be also current date or anything simmilar) to prevent browser from image caching. This is required, because some of browsers when displaying a cached image do not set up the javascript width / height properties of a image.

• code is a part of document’s DOM (it can’t be in a  detached node kept in javascript variable – it must be part of page)

The jQuery part :

//attach to onload event - it's fired when entire page is loaded (icluding images)
$(window).load(function()
{
 //iterate the images that have the imageFitBox class set up
 $('img.imageFitBox').each(function()
 {
  //check if image height exceeds the maximal height of box
  if ( $(this).height() > 200)
  {
   //if so - limit only the height to maximal height
   $(this).css('height','200px');
  }
  //IMPORTANT! after setting up the height, check the width
  if ( $(this).width() > 160)
  {
   //reset the height...
   $(this).css('height','');
   //.. and apply width constraint
   $(this).css('width','160px');
  }
  // you can also set up the margins of image, to center it inside the box
  $(this).css('margin-left',( ( 160-$(this).width() )/2)+'px');
  $(this).css('margin-top',( ( 200-$(this).height() )/2)+'px');
 });
});

Note: WordPress forces &gt and &lt in code blocks. Please replace it with > and < operators.

You can put the jQuery script any place you want – it can be in a separate javascript file or inisde the HTML page.
To get jQuery and see how to use it visit jQuery homepage.

Tags: asp.net, design, jquery, tips & tricks

This entry was posted on Thursday, January 14th, 2010 at 11:39 and is filed under Developers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments (1) to “Using jQuery to fit thumbnails”

• 
  1 April 2010 at 18:25, Matt says

  I’m a bit hazy on jQuery… how does one go about editing the last bit to center the image within the div?