Responsive & Compact jQuery Image Wall Plugin - Brickwall

Brickwall is a jQuery image gallery plugin that allows you to tile the images like a brick wall, where all the pieces are tiled responsively and have the same height. The plugin also comes with another jQuery plugin called brickwallFocusPointer that helps you easily set focus point of an image when you resize the browser window.

More examples:

• Basic demo
• Focus Pointer Demo

Basic Usage:

1. Include the jQuery library and jQuery brickwall.js script in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/brickwall.js"></script>

2. Create the Html to display you images in a brick wall layout. Use focus-x and focus-y attributes to set the focus point.

<ul>
<li><a href="#" title="Title 1"><img src="1.jpg" focus-y="3" focus-x="3"></a></li>
<li><a href="#" title="Title 2"><img src="2.jpg" focus-y="2" focus-x="1"></a></li>
<li><a href="#" title="Title 3"><img src="3.jpg" focus-y="1" focus-x="2"></a></li>
...
</ul>

3. The javascript to initialize the plugin.

<script type="text/javascript">
$(function() {
$('ul img').each(function(i, element) {
var focusY = Math.floor((Math.random()*4)+1);
var focusX = Math.floor((Math.random()*4)+1);
$(element).attr({'focus-y': focusY, 'focus-x': focusX});
});
$('ul').brickwall();
});
</script>

4. Default settings.

'focusPoints': { // // The number of elements to define the focus points grid.
'x': 5, 
'y': 5
},
'fadeInTime': 350, // The time of fade in animation of the images.
'updateOnWindowResize': true, // Whether the wall must be updated on window resize or not.
'lineHeight': { // The min and max height of the lines. If false, the height will be the smallest height of images, line by line (dynamic height).
'min': false,
'max': 550 
},
'margin': 3, // The margin around each image.
'resizeLast': true // Whether the last line must be resized or not.

---

This awesome jQuery plugin is developed by Pierrecle. For more Advanced Usages, please check the demo page or visit the official website.