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
A nice example, and I like the fact the image quality remains high.
i´ll try i near future use this example. Very cool! 😀
great example…and nice mathematical calculation man…good job…
Very interesting… I’ll have to think of ways I can use this. For evil things, perhaps.
Nice tutorial. Not sure what I could use it for just yet but it’s in my jQuery bookmarks!
Very good work, but if I can resize only one picture would also be cool, also grid.
great post thank you
Retweeted! Awesome man, thanks.
@todayinart
Thanks! Tyler did an awesome job writing this tutorial.
could you make this work with the mouse wheel?
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
Helpful tutorials. I am using it . thanks.
nice tutorial! thanks
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
Nice article.
FYI: It’s ‘peek’ not ‘peak’.
@N. Haran
Thanks for pointing out that typo.
nice tutorial. thanks for the share 🙂
Thanks for sharing. I will try this one for sure. 🙂
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.
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.
Thank you for this tutorial. I decided to implement it on my website, you can see it here: https://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: https://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!
Thanks for your information. Great job man.
Cheers,
Arya
great post! I was searching for this since long time
Nice illustration, there was also not much difference in image quality
The links to Example 1 and Example 2 don’t work… What a pity… Could you fix them? Thank you.
I get 404 errors on the examples….
Great tutorial. I will give it a go on my next website.
Thanks for sharing
its good very attractive and easy to use
thanks
Cool, I was looking for this.
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.
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
This is really helpful for managing photo projects using jQuery. Thank you for the awesome tutorial. Thanks!
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?
Thank you, its make my coding understandable than other samples….
This is really helpful for managing photo projects using jQuery. Thank you for the awesome tutorial. Thanks!
Very nice
Demo links don’t seem to be working….
Check the example links. Those are not valid or mistakes to link the exact demo page.
The demo links is broken…
Can i use these slideshows with blogger blog ?