jQuery Plugin For Expanding Image Grid - Grid Accordian
File Size: | 2.6 MB |
---|---|
Views Total: | 3814 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Grid Accordian is a jQuery plugin to create an image grid that uses animate()
method to smoothly expand/collapse images on mouse hover, much like an accordion.
How to use it:
1. Insert your images into the grid like this:
<div id="demo" class="ga-accordian"> <div class="ga-item"> <a href="#"> <img class="ga-background" src="img/1.jpg" /> </a> </div> <div class="ga-item"> <a href="#"> <img class="ga-background" src="img/2.jpg" /> </a> </div> <div class="ga-item"> <a href="#"> <img class="ga-background" src="img/3.jpg" /> </a> </div> <div class="ga-item"> <a href="#"> <img class="ga-background" src="img/4.jpg" /> </a> </div> <div class="ga-item"> <a href="#"> <img class="ga-background" src="img/5.jpg" /> </a> </div> <div class="ga-item"> <a href="#"> <img class="ga-background" src="img/6.jpg" /> </a> </div> ... </div>
2. The basic styles for the image grid.
.ga-accordian { display: block; } .ga-item { overflow: hidden; display: block; position: absolute; } .ga-background { }
3. Include jQuery lirbary and the jQuery Grid Accordian plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="js/grid-accordian.js"></script>
4. Call the plugin on the parent container.
$(document).ready(function() { $("#my-ga").GridAccordian({ cols: 4, // default 2 speed: 600 // animation speed }) })
5. Full plugin options.
speed: 600, margin: 2, // your settings are equal to their value if window's width equal to this value baseWindowSize: 1400, baseFontSize: 14, briefOffset: 2, briefFontColor: "rgba(0, 0, 0, 1.0)", // background-color briefBGColor: "rgba(127, 127, 127, 0.8)",
Change logs:
2015-04-25
- Fix a bug in showing briefs and descriptions
2015-04-23
- You can now add brief and description!
2015-04-18
- v0.0.2
This awesome jQuery plugin is developed by M6stafa. For more Advanced Usages, please check the demo page or visit the official website.