Fancy jQuery & CSS3 Based Hexagon Image Gallery

Hex Gallery is a jQuery plugin used to display your images in a CSS3 based hexagonal grid layout with hover caption support.

See also:

• jQuery Plugin For Responsive Hexagon Grid Layout - Honeycombs

How to use it:

1. Include the jQuery Javascript library and the jQuery Hex Gallery plugin in the head of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.hex.gallery.js"></script>

2. Create a hexagon grid layout for the image gallery as follows.

<script type="text/hex-gallery">
{
"album" : [
{
  "cover": {"title": "<h4>THEME</h4><hr /><p>Stephanie Dola</p>", "class": "hex-1"},
  "photo": [
    {"imgur": "http://i.imgur.com/yIoACHc.gif"},
    {"imgur": "http://i.imgur.com/uINck6K.gif"},
    {"imgur": "http://i.imgur.com/zOZJEex.gif"},
    {"imgur": "http://i.imgur.com/dM7rBEt.gif"},
    {"imgur": "http://i.imgur.com/JkF9f4j.gif"},
    {"imgur": "http://i.imgur.com/7xNwFm8.gif"},
    {"imgur": "http://i.imgur.com/Fq7LYMu.gif"},
    {"imgur": "http://i.imgur.com/bgldBVE.gif"},
    {"imgur": "http://i.imgur.com/VrzMLCb.jpg"},
    {"imgur": "http://i.imgur.com/gTSDSce.gif"},
    {"imgur": "http://i.imgur.com/71pr7UK.jpg"},
    {"imgur": "http://i.imgur.com/4pzxseN.jpg"}
  ]
},
{
  "cover": {"title": "<h4>THEME</h4><hr /><p>2</p>", "class": "hex-2"},
  "photo": [
    {"imgur": "http://i.imgur.com/YSmWA3g.gif"},
    {"imgur": "http://i.imgur.com/6G4BDxU.gif"},
    {"imgur": "http://i.imgur.com/kuH4XVL.gif"},
    {"imgur": "http://i.imgur.com/0NemOhQ.gif"},
    {"imgur": "http://i.imgur.com/tedXr7Y.gif"},
    {"imgur": "http://i.imgur.com/5IHR8bQ.gif"}
  ]
},
{
  "cover": {"title": "<h4>THEME</h4><hr /><p>3</p>", "class": "hex-3"},
  "photo": [
    {"imgur": "http://i.imgur.com/vpKzynV.gif"},
    {"imgur": "http://i.imgur.com/J2Dllne.gif"},
    {"imgur": "http://i.imgur.com/kBQ8WDN.gif"},
    {"imgur": "http://i.imgur.com/ZkkYIVm.gif"},
    {"imgur": "http://i.imgur.com/FTMUcRf.gif"},
    {"imgur": "http://i.imgur.com/zE8oOpI.gif"},
    {"imgur": "http://i.imgur.com/OCfUjzv.gif"},
    {"imgur": "http://i.imgur.com/RkHRSno.gif"},
    {"imgur": "http://i.imgur.com/rctEEyS.gif"}
  ]
}
]
}
</script>

Change log:

2015-03-03

• using split array into chunks
• clean code & change color

---

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