jQuery plugin for displaying images in a responsive Honeycomb/ Hexagon grid with caption and anchor
Open the following link to check the demo.
Demo URL: https://nasirkhan.github.com/honeycombs
To create a Honeycomb/ Hegagon grid, use the following HTML markup:
<div class="honeycombs">
<div class="comb">
<img src="https://farm6.staticflickr.com/5737/31044656732_c031f1294c_z.jpg" />
</div>
<div class="comb">
<img src="https://farm6.staticflickr.com/5727/30785062315_cb44d0c372_z.jpg" />
</div>
<div class="comb">
<img src="https://farm8.staticflickr.com/7091/27557985951_7abf426c1e_z.jpg" />
</div>
</div>Add the following Javascript snippet at the bottom of the page,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="homeycombs/js/jquery.homeycombs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.honeycombs').honeycombs();
});
</script>To create a Honeycomb/ Hegagon grid, use the following HTML markup:
<div class="honeycombs">
<div class="comb">
<img src="https://farm6.staticflickr.com/5737/31044656732_c031f1294c_z.jpg" />
<span>
<br>
jQuery Honeycombs
</span>
</div>
<div class="comb">
<img src="https://farm6.staticflickr.com/5727/30785062315_cb44d0c372_z.jpg" />
<span>
<b>Image</b>
<br>Caption
</span>
</div>
<div class="comb">
<img src="https://farm8.staticflickr.com/7091/27557985951_7abf426c1e_z.jpg" />
</div>
</div>Add the following Javascript snippet at the bottom of the page,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="homeycombs/js/jquery.homeycombs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.honeycombs').honeycombs();
});
</script>Credit I found the base script and the demo few years back, recently when i checked the repo and demo were missing.
Earlier i made some chaneges to the script for one of my projects. Uploading here with with some modification.
If you want to contribute to this project, feel free to send pull requests.