jQuery Plugin For Responsive Hexagon Grid Layout - Honeycombs

Honeycombs is an interesting jQuery layout plugin that uses CSS3 transforms to display images in a responsive & dynamic hexagon gird layout with caption hover over effect and auto resizing support.

You might also be interested in:

• Fancy & Responsive jQuery Diamond Layout Plugin - diamonds.js

How to use it:

1. Include the required homeycombs.css file in the head section of the page.

<link rel="stylesheet" type="text/css" href="homeycombs/css/homeycombs.css" />

2. Make sure you have jQuery library loaded, and then include the jquery.homeycombs.js at the bottom of the page.

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

3. Create the hexagon grids following the markup structure like this.

<div class="honeycombs">

<div class="comb"> <img src="1.jpg" /> 
<span>Image Caption 1</span> </div>

<div class="comb"> <img src="2.jpg" /> 
<span>Image Caption 2</span> </div>

<div class="comb"> <img src="3.jpg" /> 
<span>Image Caption 3</span> </div>

</div>

3. Call the plugin with basic options.

<script type="text/javascript">
$(document).ready(function() {
$('.honeycombs').honeycombs({
combWidth: 250,
margin: 10
});
});
</script>

---

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