a jquery accordion for image grids
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
README.md
gridacord.js
gridacord.min.js
jquery.imagesloaded.min.js

README.md

#gridacord a jquery accordion for image grids

contents
What is
Example
Requirements
How to use
Parameters
Frame center
Contribute
Limitations

###What is Gridacord is a jquery plugin that creates an accordion-style image gallery grid with minimum necessary setup yet customizable.

###Requirements

###How to use

$("#mygrid").gridacord(); 

or

$("#mygrid").gridacord({item_margin : 2, transition_time: 1000}); 

###Parameters

  • item_margin - Margin of each picture frame in pixels
  • width - Width of each picture frame in pixels
  • height - Height of each picture frame in pixels
  • transition_time - Frame expansion animation transition time

###Frame center To define which spot of the picture will be on the center of frame it's possible to define two extra parameters on <div class="item"> like in the example below:

<div class="item" data-spot-x="40" data-spot-y="20">
  <img src="5.jpg"/>
</div>
  • data-spot-x - the x axis distance in % of the left top corner to the right top corner
  • data-spot-y - the y axis distance in % of the left top corner to the left bottom corner
-------- x axis ------>100
|0
|
|       
y
axis   IMAGE
|
|
V
100

###Limitations

  • Only 2x2, 3x3, 4x4 ... grids can be used

###Contribute Plz.