Fancy jQuery & CSS3 Based Hexagon Image Gallery
File Size: | 583 KB |
---|---|
Views Total: | 14619 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Hex Gallery is a jQuery plugin used to display your images in a CSS3 based hexagonal grid layout with hover caption support.
See also:
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.