Download Grid Accordion - Responsive and Touch-enabled grid

Grid Accordion combines the functionality of a grid gallery and an accordion slider, offering you an interesting method to display your portfolio. For Designers Fully responsive – the grid is responsive out of the box and provides 2 responsive modes: auto and custom Touch-enabled – supports touch swipe gestures on touch-screen devices and mouse drag on the desktop Customizable rows and columns – you can change the number of rows and/or columns in the grid based on the screen’s size Layers – Grid Accordion supports animated and static layers that can hold any content: from simple text to videos Image Swap – it’s possible to swap the background image when the panel opens Retina-ready – the accordion supports alternative, high-resolution images for screens with high PPI, like the Retina display Lazy-loading – the images will be loaded only they are in the visible area Deep-linking – it’s possible to open a panel from a link, whether the link is in the same page or in another page Keyboard navigation – it’s possible to navigate through the grid accordion (panel by panel or page by page) using the keyboard Automatic video control – integration with YouTube, Vimeo, HTML5 video, Sublime Video and Video

Grid Accordion combines the functionality of a grid gallery and an accordion slider, offering you an interesting method to display your portfolio.

For Designers

• Fully responsive – the grid is responsive out of the box and provides 2 responsive modes: auto and custom
• Touch-enabled – supports touch swipe gestures on touch-screen devices and mouse drag on the desktop
• Customizable rows and columns – you can change the number of rows and/or columns in the grid based on the screen’s size
• Layers – Grid Accordion supports animated and static layers that can hold any content: from simple text to videos
• Image Swap – it’s possible to swap the background image when the panel opens
• Retina-ready – the accordion supports alternative, high-resolution images for screens with high PPI, like the Retina display
• Lazy-loading – the images will be loaded only they are in the visible area
• Deep-linking – it’s possible to open a panel from a link, whether the link is in the same page or in another page
• Keyboard navigation – it’s possible to navigate through the grid accordion (panel by panel or page by page) using the keyboard
• Automatic video control – integration with YouTube, Vimeo, HTML5 video, Sublime Video and Video.js
• SEO-friendly
• XML and JSON support

For Developers

• Modular architecture – the plugin consist of several modules and you can build your own script, containing only the features you will be using
• CSS3 transitions and RequestAnimationFrame – modern animation techniques are used in order to provide smooth animations
• Powerful API – Grid Accordion provides multiple public method and callback functions, and also the possibility to change the properties on runtime

You can read more about the above features and see them in action here.

If you have any questions or need assistance integrating the accordion, please feel free to ask; I will gladly help you. Also, if you like this script, please take a moment to rate it Most of the buyers give this script 5 stars but if you plan to rate it lower than 5 stars I would really appreciate if you contact me first with your suggestions/complaints; maybe I can resolve those issues Thank you!

Changelog

 v 2.0 (8 November 2013) * rewritten the entire code and implemented a modular architecture * added many new features, like responsiveness, touch swipe, animated layers, retina support, lazy-loading, pagination, automatic video control, etc.  v 1.2 (10 January 2012) * updated the jQuery library to the latest version  v 1.1 (15 December 2010) * added the possibility to have both landscape and portrait images in the same grid  v 1.0 (29 November 2010) * first release