A Responsive, Touch-Enabled jQuery Grid Accordion Component

Main features:

• modular architecture
• responsive
• touch-swipe
• CSS3 transitions
• animated layers (and static)
• deep linking
• lazy loading
• retina-enabled
• video support
• JavaScript breakpoints

How to make use of it:

1. Include the Grid Slider jQuery plugin.

<link rel="stylesheet" href="../dist/css/grid-accordion.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.gridAccordion.min.js"></script>

2. Add your content material as accordion panels to the grid.

<div id="example" class="grid-accordion">
  <div class="ga-panels">
    <div class="ga-panel">
      <img class="ga-background" src="1.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="2.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="3.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="4.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="5.jpg"/>
    </div>
  </div>
</div>

3. Initialize the plugin on the parent container to generate a fundamental accordion grid.

$('#example').gridAccordion({
  // options here
});

4. Enable lazy loading & excessive-decision/retina photos.

<img class="ga-background" 
     src="./dist/css/images/blank.gif" 
     data-src="/path/to/original/image.jpg" 
     data-retina="/path/to/original/[email protected]" />

5. Add a number of layers to accordion panels utilizing the next CSS classes and HTML data attributes.

<div class="ga-panel">
  <a href="#">
    <img class="ga-background" src="./dist/css/images/blank.gif" data-src="1.jpg" data-retina="1.jpg@2x" />
  </a>
  <div class="ga-layer ga-closed ga-white panel-counter" 
     data-position="bottomLeft" data-horizontal="8" data-vertical="8">
     Panel 1
  </div>
  <h3 class="ga-layer ga-opened ga-black ga-padding" 
    data-horizontal="40" data-vertical="62%" 
    data-show-transition="left" data-hide-transition="left">
    Lorem ipsum dolor sit amet
  </h3>
  <p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen" 
    data-horizontal="40" data-vertical="74%" data-width="350" 
    data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

6. Load content from JSON.

$('#example').gridAccordion({
  JSONSource: '/path/to/accordion.json',
});

// accordion.json
{
  "accordion": {
    "panels": [
      {
        "background": {"source": "/path/to/1.jpg"},
        "backgroundRetina": {"source": "path/to/[email protected]"},
        "backgroundOpened": {"source": "path/to/alt1.jpg"},
        "backgroundOpenedRetina": {"source": "path/to/[email protected]"},
        "backgroundLink": {"address": " "},
        "layers": [
          {"content": "Panel 1", "style": "closed white padding panel-counter", "position": "bottomLeft", "horizontal": "8", "vertical": "8"},
          {"content": "Lorem ipsum dolor sit amet", "style": "opened black padding", "showTransition": "down", "hideTransition": "up", "horizontal": "20", "vertical": "20"}
        ]
      },
      //...
    ]
  }
}

7. Load content from XML.

$('#example').gridAccordion({
  JSONSource: '/path/to/accordion.xml',
});

<!-- accordion.xml -->
<accordion>
  <panel>
    <background>path/to/1.jpg</background>
    <backgroundRetina>path/to/[email protected]</backgroundRetina>
    <backgroundOpened>path/to/1.jpg</backgroundOpened>
    <backgroundOpenedRetina>path/to/[email protected]</backgroundOpenedRetina>
    <backgroundLink> </backgroundLink>
    <layer vertical="8" horizontal="8" position="bottomLeft" style="closed white vertical panel-counter">Panel 1 </layer>
    <layer vertical="10%" horizontal="40" style="opened black padding" hideTransition="left" showTransition="left">Lorem ipsum dolor sit amet </layer>
    <layer vertical="22%" horizontal="40" style="opened white padding" hideTransition="left" showTransition="left" hideDelay="200" showDelay="200">consectetur adipisicing elit </layer>
    <layer vertical="34%" horizontal="40" style="opened black padding" hideTransition="left" showTransition="left" hideDelay="500" showDelay="400" width="350">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </layer>
  </panel>
  ...
</accordion>

8. It additionally helps Youtube/Vimeo/Sublime/HTML5 videos.

<!-- Youtube -->
<div class="ga-layer" data-horizontal="325">
  <iframe class="ga-video" src="https://www.youtube.com/embed/VIDEO-ID?enablejsapi=1&wmode=opaque&rel=0" width="500" height="280" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Vimeo -->
<div class="ga-layer" data-horizontal="325">
  <iframe class="ga-video" src="//player.vimeo.com/video/VIDEO-ID" width="498" height="280" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!-- HTML5 Video -->
<div class="ga-layer" data-horizontal="325">
  <video id="video3" class="ga-video" controls="controls" preload="none" width="497" height="280" poster="poster.jpg">
    <source src="1.mp4" type='video/mp4'/>
    <source src="1.ogg" type='video/ogg'/>
  </video>
</div>
<!-- Video.js -->
<div class="ga-video" data-videojs-id="video1">
  <video id="video1" class="video-js vjs-default-skin" poster="poster.jpg" width="500" height="350" controls="controls" preload="none" data-setup="{}">
    <source src="1.mp4" type="video/mp4"/>
    <source src="1.ogv" type="video/ogg"/>
  </video>
</div>
<!-- Sublime Video -->
<video id="video2" class="ga-video sublime" poster="poster.jpg" width="500" height="350" controls="controls" preload="none">
  <source src="1.mp4" type="video/mp4"/>
  <source src="1.ogv" type="video/ogg"/>
</video>

9. Full plugin choices.

$('#example').gridAccordion({
  // width/height
  width: 800,
  height: 400,
  // enable responsive layout
  responsive: true,
  // 'auto' or 'custom'
  responsiveMode: 'auto',
  // aspect ratio
  aspectRatio: -1,
  // 'horizontal' or 'vertical'.
  orientation: 'horizontal',
  // 0 for the first panel
  startPanel: -1,
  // number of rows
  rows: 3,
  // number of columns
  columns: 4,
  // the size of the opened panel
  // fixed or percentage value
  openedPanelWidth: 'max',
  openedPanelHeight: 'max',
  // max size of opened panel
  maxOpenedPanelWidth: '70%',
  maxOpenedPanelHeight: '70%',
  // 'hover', 'click', or 'never'
  openPanelOn: 'hover',
  // close the opened panels on mouse out
  closePanelsOnMouseOut: true,
  // the delay in milliseconds between the movement of the mouse pointer and the opening of the panel
  mouseDelay: 200,
  // the distance between consecutive panels
  panelDistance: 0,
  // duration on ms
  openPanelDuration: 700,
  closePanelDuration: 700,
  pageScrollDuration: 500,
  // easing function
  pageScrollEasing: 'swing',
  /* e.g.
  {
    960: {visiblePanels: 5},
    800: {visiblePanels: 3, orientation: 'vertical', width: 600, height: 500},
    650: {visiblePanels: 4},
    500: {visiblePanels: 3, orientation: 'vertical', aspectRatio: 1.2}
  }/* 
  breakpoints: null,
  // 0 for the first page
  startPage: 0,
  // adds shadow to the accordion slider
  shadow: true,
  // determines if the panels will be shuffled/randomized
  shuffle: false,
  // autoplay options
  autoplay: true,
  autoplayDelay: 5000,
  autoplayDirection: 'normal', // 'normal' or 'backwards
  autoplayOnHover: 'pause', // 'pause', 'stop' or 'none'
  // keyboard options
  keyboard: true,
  keyboardOnlyOnFocus: false,
  keyboardTarget: 'panel', // 'panel' or 'page',
  // mousewheel options
  mouseWheel: true,
  mouseWheelSensitivity: 10,
  mouseWheelTarget: 'panel', // 'panel' or 'page'
  // swap background options
  swapBackgroundDuration: 700,
  fadeOutBackground: false,
  // touch swipe opitons
  touchSwipe: true,
  touchSwipeThreshold: 50,
  // 'playVideo' or 'none'
  openPanelVideoAction: 'playVideo',
  // 'pauseVideo' or 'stopVideo'
  closePanelVideoAction: 'pauseVideo',
  // 'stopAutoplay' or 'none'
  playVideoAction: 'stopAutoplay',
  // 'startAutoplay' or 'none'
  pauseVideoAction: 'none',
  // 'startAutoplay', 'nextPanel', 'replayVideo' or 'none'
  endVideoAction: 'none',
  // callback functions
  // or $('#example').on('callbackName', function(event) {})
  init: function() {},
  update: function() {},
  accordionMouseOver: function() {},
  accordionMouseOut: function() {},
  panelClick: function(index) {},
  panelMouseOver: function(index) {},
  panelMouseOut: function(index) {},
  panelOpen: function(index, previousIndex) {},
  panelsClose: function(previousIndex) {},
  pageScroll: function(index) {},
  panelOpenComplete: function(index) {},
  panelsCloseComplete: function(previousIndex) {},
  pageScrollComplete: function(index) {},
  breakpointReach: function(size, settings) {},
  videoPlay: function() {},
  videoPause: function() {},
  videoEnd: function() {},
});

10. API strategies.

// $('#example').gridAccordion('methodName', value);
// or 
// var accordion = $('#example').data('gridAccordion');
// accordion.methodName(value);
// Returns all the data of the panel at the specified index.
accordion.getPanelAt(index);
// Returns the index of the current panel.
accordion.getCurrentIndex();
// Returns the total number of panels.
accordion.getTotalPanels();
// Opens the next panel.
accordion.nextPanel();
// Opens the previous panel.
accordion.previousPanel();
// Opens the panel at the specified index.
accordion.openPanel(index);
// Closes all panels.
accordion.closePanels();
// Gets the number of visible panels.
accordion.getVisiblePanels();
// Gets the number of pages.
accordion.getTotalPages();
// Gets the index of the page currently displayed.
accordion.getCurrentPage();
// Scrolls to the specified page.
accordion.gotoPage(index);
// Goes to the next page.
accordion.nextPage();
// Goes to the previous page.
accordion.previousPage();
// Destroy
accordion.destroy();
// Updates the accordion
accordion.update();
// Removes all panels
accordion.removePanels();
// resize the accordion slider
accordion.resize();

11. Events.

// $('#example').on(eventType, callback);
// $('#example').off(eventType);
$('#example').on('init', function(event) {
  // do something
});
$('#example').on('update', function(event) {
  // do something
});
$('#example').on('accordionMouseOver', function(event) {
  // do something
});
$('#example').on('accordionMouseOut', function(event) {
  // do something
});
$('#example').on('panelClick', function(event, index) {
  // do something
});
$('#example').on('panelMouseOver', function(event, index) {
  // do something
});
$('#example').on('panelMouseOut', function(index) {
  // do something
});
$('#example').on('panelOpen', function(event, index, previousIndex) {
  // do something
});
$('#example').on('panelsClose', function(event, previousIndex) {
  // do something
});
$('#example').on('pageScroll', function(event, index) {
  // do something
});
$('#example').on('panelOpenComplete', function(event, index) {
  // do something
});
$('#example').on('panelsCloseComplete', function(event, previousIndex) {
  // do something
});
$('#example').on('pageScrollComplete', function(event, index) {
  // do something
});
$('#example').on('breakpointReach', function(event, size, settings) {
  // do something
});
$('#example').on('videoPlay', function(event) {
  // do something
});
$('#example').on('videoPause', function(event) {
  // do something
});
$('#example').on('videoEnd', function(event) {
  // do something
});

Feature-rich Grid Slider jQuery Plugin, Grid Accordion Github, jquery skewed slider, vertical accordion wordpress plugin

See Demo And Download