jQuery: resizable image gallery

In this post I'm going to show you how to create a resizable image gallery with jQuery UI and two simple CSS rules. The only thing we need to do before writing few lines of code is to reference the main CSS file of jQuery UI and, of course, jQuery UI itself. In the head section of our page we'll insert the jQuery UI CSS file, like so:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" media="all" />

Before the closing tag of the body element we'll insert both jQuery and jQuery UI (the order is important):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Now, after the main jQuery UI CSS file we can define our custom CSS rules:

#gallery {
 width: 50%;
 margin: 0 auto;
 height: 150px;
 padding: 1em;
 background: silver;
 overflow: hidden;
}

#gallery img {
 float: left;
 width: 24%;
 margin-left: 5px;
}

Image dimensions are expressed in percentages: that's the key for making the images scale along the gallery when it's resized. Finally, after our scripts we can insert our custom jQuery code to make everything work:

$(function() {

  $('#gallery').resizable();

});

Did you expect more code? Sorry to disappoint you. wink You can see the demo below.

Demo

Live demo