grid-accordion-js

v1.0.1

Published

6 months ago

Modular grid accordion built in Vanilla JavaScript.

Downloads

0High
0Medium
0Low

bqworks

grid accordion slideshow gallery touch swipe javascript modular grid-accordion responsive layers video

Grid Accordion JS

A JavaScript gallery that combines the look of a grid with the functionality of an accordion. Written in Vanilla JavaScript, it is modular, dependency-free, rich-featured, flexible and easy to use.

Main features:

Modular architecture
Responsive
Touch-swipe support
CSS3 transitions
Animated layers (and static)
Deep-linking
Lazy loading support
Video content support
JavaScript breakpoints

See some examples on the presentation page.

The Grid Accordion is also available as a jQuery plugin and as a WordPress plugin.

Getting started

1. Get a copy of the plugin

You can fork or download the plugin from GitHub, or you can install it through npm.

$ npm install grid-accordion-js

2. Load the required files

You can either load the minimized JS and CSS files in your HTML or you can import the files as modules.

<link rel="stylesheet" href="grid-accordion-js/build/grid-accordion.css"/>
<script type="text/javascript" src="grid-accordion-js/build/grid-accordion.js"></script>

From unpkg.com:

<link rel="stylesheet" href="https://unpkg.com/grid-accordion-js/build/grid-accordion.css"/>
<script type="text/javascript" src="https://unpkg.com/grid-accordion-js/build/grid-accordion.js"></script>

Alternatively you can import the accordion's core and each add-on from the grid-accordion-js package.

import GridAccordion, { Autoplay, Buttons, SwapBackground } from 'grid-accordion-js';

You can also import the CSS, either the entire code or for each individual module:

// imports the entire CSS code
import 'grid-accordion-js/css';

// imports the CSS code for the core and for each individual add-on
import 'grid-accordion-js/css/core';
import 'grid-accordion-js/css/buttons';
import 'grid-accordion-js/css/layers';
import 'grid-accordion-js/css/touch-swipe';
import 'grid-accordion-js/css/video';

3. Create the HTML for the grid accordion

<div class="grid-accordion" id="my-accordion">
	<div class="ga-panels">
		<!-- Panel 1 -->
		<div class="ga-panel">
			<img class="ga-background" src="path/to/image1.jpg"/>
		</div>
		
		<!-- Panel 2 -->
		<div class="ga-panel">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
		
		<!-- Panel 3 -->
		<div class="ga-panel">
			<h3 class="ga-layer">Lorem ipsum dolor sit amet</h3>
			<p class="ga-layer">consectetur adipisicing elit</p>
		</div>
	</div>
</div>

4. Instantiate the grid accordion

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', () => {
		const myAccordion = new GridAccordion('#my-accordion', {
			width: '100vw',
			height: '100vh',
			autoplay: true,
			...
		});
	});
</script>

If you are importing the files as modules, you need to add each imported add-on to the addOns option.

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', () => {
		const myAccordion = new GridAccordion('#my-accordion', {
			addOns: [ Autoplay, Buttons ],
			width: '100vw',
			...
		});
	});
</script>

Custom build

The files from the packages's build folder, by default, will include all the accordion's features. If you will use only a few of the provided features/add-ons and you want to optimize the files so that they include only what you use, you need to go to entry/bundle.js and entry/style-bundle.js, and comment out/remove the add-ons that you won't use. After that you need to open the terminal, navigate to the grid-accordion-js package and run npm run build.

Detailed usage instructions

1. Core options

Name | Default value | Description ---|---|--- width | 800 | Sets the width of the grid accordion. Can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100%'. It's important to note that percentage values need to be specified inside quotes. For fixed values, the quotes are not necessary. height | 400 | Sets the height of the grid accordion. The same rules available for the 'width' property also apply for the 'height' property. responsive | true | Makes the accordion responsive. The accordion can be responsive even if the 'width' and/or 'height' properties are set to fixed values. In this situation, 'width' and 'height' will act as the maximum width and height of the accordion. responsiveMode | 'auto' | Sets the responsive mode of the accordion. Possible values are 'auto' and 'custom'. 'auto' resizes the accordion and all of its elements (e.g., layers, videos) automatically, while 'custom' resizes only the accordion container and panels, and you are given flexibility over the way inner elements (e.g., layers, videos) will respond to smaller sizes. For example, you could use CSS media queries to define different text sizes or to hide certain elements when the accordion becomes smaller, ensuring that all content remains readable without having to zoom in. It's important to note that, if 'auto' responsiveness is used, the 'width' and 'height' need to be set to fixed values, so that the accordion can calculate correctly how much it needs to scale. aspectRatio | -1 | Sets the aspect ratio of the accordion. The accordion will set its height depending on what value its width has, so that this ratio is maintained. For this reason, the set 'height' might be overridden. This property can be used only when 'responsiveMode' is set to 'custom'. When it's set to 'auto', the 'aspectRatio' needs to remain -1. orientation | 'horizontal' | Sets the orientation of the panels. Possible values are 'horizontal' and 'vertical'. columns | 4 | Sets the number of columns. If it's set to -1, the number of columns will be determined automatically, based on the number of rows. rows | 3 | Sets the number of rows. If it's set to -1, the number of rows will be determined automatically, based on the number of columns. startPanel | -1 | Indicates which panel will be opened when the accordion loads (0 for the first panel, 1 for the second panel, etc.). If set to -1, no panel will be opened. openedPanelWidth | 'max' | Sets the width of the opened panel. Possible values are: 'max', which will open the panel to its maximum width, so that all the inner content is visible, a percentage value, like '50%', which indicates the percentage of the total width of the accordion, a fixed value, or 'auto'. If it's set to 'auto', all panels opened on the vertical axis will have the same width without any of these panels to open more than their size. openedPanelHeight | 'max' | Sets the height of the opened panel. Possible values are: 'max', which will open the panel to its maximum height, so that all the inner content is visible, a percentage value, like '50%', which indicates the percentage of the total height of the accordion, a fixed value, or 'auto'. If it's set to 'auto', all panels opened on the horizontal axis will have the same height without any of these panels to open more than their size. maxOpenedPanelWidth | '70%' | Sets the maximum allowed width of the opened panel. This should be used when the 'openedPanelWidth' is set to 'max', because sometimes the maximum width of the panel might be too big and we want to set a limit. The property can be set to a percentage (of the total width of the accordion) or to a fixed value. maxOpenedPanelHeight | '70%' | Sets the maximum allowed height of the opened panel. This should be used when the 'openedPanelWidth' is set to 'max', because sometimes the maximum height of the panel might be too big and we want to set a limit. The property can be set to a percentage (of the total height of the accordion) or to a fixed value. openPanelOn | 'hover' | If set to 'hover', the panels will be opened by moving the mouse pointer over them; if set to 'click', the panels will open when clicked. Can also be set to 'never' to disable the opening of the panels. closePanelsOnMouseOut | true | Determines whether the opened panel closes or remains open when the mouse pointer is moved away. mouseDelay | 200 | Sets the delay in milliseconds between the movement of the mouse pointer and the opening of the panel. Setting a delay ensures that panels are not opened if the mouse pointer only moves over them without an intent to open the panel. panelDistance | 0 | Sets the distance between consecutive panels. Can be set to a percentage or fixed value. openPanelDuration | 700 | Determines the duration in milliseconds for the opening of a panel. closePanelDuration | 700 | Determines the duration in milliseconds for the closing of a panel. pageScrollDuration | 500 | Indicates the duration of the page scroll. visiblePanels | -1 | Indicates the number of panels visible per page. If set to -1, all the panels will be displayed on one page. startPage | 0 | Indicates which page will be opened when the accordion loads, if the panels are displayed on more than one page. shadow | true | Indicates if the panels will have a drop shadow effect. panelOverlap | true | Indicates if the panels will be overlapped. If set to false, the panels will have their width or height set so that they are next to each other, but not overlapped. shuffle | false | Indicates if the panels will be shuffled/randomized.

2. Add-on options

Name | Default value | Description ---|---|--- addOns | [] | If the add-ons are imported as modules, each module needs to be added to this array. breakpoints | null | Sets specific breakpoints which allow changing the look and behavior of the accordion when the page resizes. autoplay | true | Indicates if the autoplay will be enabled. autoplayDelay | 5000 | Sets the delay, in milliseconds, of the autoplay cycle. autoplayDirection | 'normal' | Sets the direction in which the panels will be opened. Can be set to 'normal' (ascending order) or 'backwards' (descending order). autoplayOnHover | 'pause' | Indicates if the autoplay will be paused or stopped when the accordion is hovered. Can be set to 'pause', 'stop' or 'none'. mouseWheel | true | Indicates if the accordion will respond to mouse wheel input. mouseWheelSensitivity | 50 | Sets how sensitive the accordion will be to mouse wheel input. Lower values indicate stronger sensitivity. mouseWheelTarget | 'panel' | Sets what elements will be targeted by the mouse wheel input. Can be set to 'panel' or 'page'. Setting it to 'panel' will indicate that the panels will be scrolled, while setting it to 'page' indicate that the pages will be scrolled. keyboard | true | Indicates if the accordion will respond to keyboard input. keyboardOnlyOnFocus | false | Indicates if the accordion will respond to keyboard input only if the accordion has focus. keyboardTarget | 'panel' | Sets what elements will be targeted by the keyboard input. Can be set to 'panel' or 'page'. Setting it to 'panel' will indicate that the panels will be scrolled, while setting it to 'page' indicate that the pages will be scrolled. buttons | true | Enables button controls below the accordion. swapBackgroundDuration | 700 | Sets the duration, in milliseconds, of the transition effect. fadeOutBackground | false | Indicates if the main image background will be faded out when the opened/alternative background fades in. touchSwipe | true | Indicates if the touch swipe functionality will be enabled. touchSwipeThreshold | 50 | Sets how many pixels the distance of the swipe gesture needs to be in order to trigger a page change. openPanelVideoAction | 'playVideo' | Sets what the video will do when the panel is opened. Can be set to 'playVideo' or 'none'. closePanelVideoAction | 'pauseVideo' | Sets what the video will do when the panel is closed. Can be set to 'pauseVideo' or 'stopVideo.' playVideoAction | 'stopAutoplay' | Sets what the accordion will do when a video starts playing. Can be set to 'stopAutoplay' or 'none'. pauseVideoAction | 'none' | Sets what the accordion will do when a video is paused. Can be set to 'startAutoplay' or 'none'. endVideoAction | 'none' | Sets what the accordion will do when a video ends. Can be set to 'startAutoplay', 'nextPanel', 'replayVideo' or 'none'.

3. Public methods

Method signature | Description ---|--- getPanelAt(index) | Gets all the data of the panel at the specified index. Returns an object that contains all the data specified for that panel. getCurrentIndex() | Gets the index of the current panel. getTotalPanels() | Gets the total number of panels. nextPanel() | Opens the next panel. previousPanel() | Opens the previous panel. openPanel(index) | Opens the panel at the specified index. closePanels() | Closes all the panels. getVisiblePanels() | Gets the number of visible panels. getTotalPages() | Gets the number of pages. getCurrentPage() | Gets the index of the page currently displayed. gotoPage(index) | Scrolls to the specified page. nextPage() | Goes to the next page. previousPage() | Goes to the previous page. addEventListener(type, handler) | Adds an event listener to the accordion. removeEventListener(type) | Removes an event listener from the accordion. destroy() | Destroys an accordion by removing all the visual elements and functionality added by the plugin. Basically, it leaves the accordion in the state it was before the plugin was instantiated. update() | This is called by the plugin automatically when a property is changed. You can call this manually in order to refresh the accordion after changing its HTML, like removing or adding panels. resize() | This is called by the plugin automatically, when the browser window is resized. You can also call it manually if you find it necessary to have the accordion resize itself.

Example:

// instantiate the accordion and set a few options
const myAccordion = new GridAccordion('#my-accordion', {
	visiblePanels: 3,
	orientation: 'vertical'
});

// the accordion will open the next panel when the document is clicked
document.addEventListener('click', () => {
	myAccordion.nextPanel();
});

4. Events

Event type | Description ---|--- beforeInit | Triggered before the accordion begins its initialization. init | Triggered after the accordion was setup. beforeUpdate | Triggered before the accordion is updates. update | Triggered when the 'update' method is called, either automatically or manually. beforeResize | Triggered before the accordion is resized. resize | Triggered when the 'resize' method is called, either automatically or manually. accordionMouseOver | Triggered when the mouse pointer moves over the accordion. accordionMouseOut | Triggered when the mouse pointer leaves the accordion. panelClick | Triggered when a panel is clicked.Available details:index: the index of the clicked panel panelMouseOver | Triggered when the mouse pointer moves over a panel. Available details:index: the index of the panel over which the mouse pointer has moved panelMouseOut | Triggered when the mouse pointer leaves a panel. Available details:index: the index of panel from which the mouse pointer has moved away panelOpen | Triggered when a panel is opened. Available details:index: the index of the opened panelpreviousIndex: the index of the previously opened panel panelsClose | Triggered when the panels are closed. Available details:previousIndex: the index of the previously opened panel pageScroll | Triggered when the accordion scrolls to another page. Available details:index: the index of the current page panelOpenComplete | Triggered when the opening of a panel is completed. Available details:index: the index of the opened panel panelsCloseComplete | Triggered when the closing of the panels is completed. Available details:previousIndex: the index of the previously opened panel pageScrollComplete | Triggered when the scroll to a page is completed. Available details:index: the index of the current page

Example:

// instantiate the accordion and set a few options
const myAccordion = new GridAccordion('#my-accordion', {
	rows: 3,
	columns: 3
});

// the accordion will open the next panel when the document is clicked
document.addEventListener('click', () => {
	myAccordion.nextPanel();
});

myAccordion.addEventListener('panelOpen', (event) => {
	console.log(event.detail.index, event.detail.previousIndex);
});

Add-ons

Add-ons are optional blocks of code that extend the core functionality, adding more capabilities. This modular architecture makes the code more organized and also allows you to include only the features you will use, resulting in an optimized file size and performance.

1. Breakpoints

The 'breakpoints' property is assigned an object which contains certain browser window widths and the accordion properties that are applied to those specific widths. This is very similar to CSS media queries. However, please note that these custom properties will not be inherited between different breakpoints. The accordion's properties will reset to the original values before applying a new set of properties, so if you want a certain property value to persist, you need to set it for each breakpoint.

Example:

const myAccordion = new GridAccordion('#my-accordion', {
	width: 960, 
	height: 400,
	rows: 4,
	columns: 4
	...
	breakpoints: {
		960: {rows: 3, columns: 3},
		600: {rows: 2, columns: 2}
		400: {rows: 1, columns: 1}
	}
});

2. Swap Background

Allows you to set an alternative background image that will appear when the panel is opened. The alternative image must be added in a separate img element and it must be given the ga-background-opened class.

<div class="ga-panel">
	<img class="ga-background" src="path/to/image1.jpg"/>
	<img class="ga-background-opened" src="path/to/alt_image1.jpg"/>
</div>

<div class="ga-panel">
	<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/[email protected]"/>
	<img class="ga-background-opened" src="path/to/blank.gif" data-src="path/to/alt_image2.jpg" data-retina="path/to/[email protected]"/>
</div>

<div class="ga-panel">
	<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/[email protected]"/>
	<a href="https://bqworks.net">
		<img class="ga-background-opened" src="path/to/blank.gif" data-src="path/to/alt_image3.jpg" data-retina="path/to/[email protected]"/>
	</a>
</div>

As you can see, the alternative image can be lazy loaded and can have a high resolution version as well.

Please note that the size of the 'opened' image should be equal or bigger than the size of the default image, in order to prevent parts of the default image to be visible behind the 'opened' image when the panel is opened.

This module is showcased in example2.html.

Customizable properties: fadeOutBackground, swapBackgroundDuration.

3. Lazy Loading

Enables the accordion to load images only when they are in view. It makes sense to use it when there are multiple pages in the accordion, so that images from other pages are not loaded until the user navigates to that page.

Example:

<div class="ga-panel">
	<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image1.jpg"/>
</div>

<div class="ga-panel">
	<a href="https://bqworks.net">
		<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image2.jpg"/>
	</a>
</div>

<div class="ga-panel">
	<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image3.jpg"/>
</div>

The src attribute of the image will point to a placeholder image, and the actual image will be specified in the data-src attribute. When the panel becomes visible, the placeholder image will be replaced by the actual image. You can use the placeholder image that comes with the accordion, or you can create your own placeholder image. The bundled placeholder image is located in dist/css/images/blank.gif and it's a 1 pixel by 1 pixel blank image.

This module is showcased in example1.html and example3.html.

4. Retina

Allows you to specify an alternative image for screens with high PPI (pixels per inch), like the 'Retina' screens from Apple devices. Please note that this module will work for any screen that has high PPI, not only for the 'Retina' screens.

The high resolution image needs to be specified in the data-retina attribute, as seen below:

<div class="ga-panel">
	<img class="ga-background" src="path/to/image1.jpg" data-retina="path/to/[email protected]"/>
</div>

<div class="ga-panel">
	<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/[email protected]"/>
</div>

<div class="ga-panel">
	<a href="https://bqworks.net">
		<img class="ga-background" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/[email protected]"/>
	</a>
</div>

It's a naming convention to add the '@2x' suffix for the high resolution version of the image.

As you can see, it's possible to use lazy loading and high resolution images at the same time.

This module is showcased in example1.html, example2.html and example3.html.

5. Layers

Adds support for layers, which are blocks of text or HTML content that can easily be positioned, sized or animated.

Layers have several predefined styles and support various settings, all of which define the layers' look and behavior. The following example shows how to create two basic layers inside a panel. These layers will be static and we won't add any styling to them.

<div class="ga-panel">
	<img class="ga-background" src="path/to/image1.jpg"/>
	<h3 class="ga-layer">
		Lorem ipsum dolor sit amet
	</h3>
	<p class="ga-layer">
		consectetur adipisicing elit
	</p>
</div>

As you can see above, the layers need to have the ga-layer class, but they can be any HTML element: paragraphs, headings or just DIV elements.

Here is an example that adds some styling and animates the layers:

<div class="ga-panel">
	<img class="ga-background" src="path/to/image1.jpg"/>
	<h3 class="ga-layer ga-closed ga-black"
		data-position="bottomLeft" data-horizontal="10%"
		data-show-transition="left" data-show-delay="300" data-hide-transition="right">
		Lorem ipsum dolor sit amet
	</h3>
	<p class="ga-layer ga-opened ga-white ga-padding"
		data-width="200" data-horizontal="center" data-vertical="40%"
		data-show-transition="down" data-hide-transition="up">
		consectetur adipisicing elit
	</p>
</div>

There are several predefined classes that can be passed to layers in order to style them. The position, size and animations are set using data attributes. For a better organization of the HTML code, I added the classes, the attributes that set the position and size, and the attributes that set the animation on separate lines, but you can add them in a single line if you want to.

Predefined classes

ga-opened

Sets the layer to be visible only when the panel is opened.

ga-closed

Sets the layer to be visible only when the panel is closed.

ga-black

Adds a black and transparent background and makes the font color white.

ga-white

Adds a white and transparent background and makes the font color black.

ga-padding

Adds a 10 pixel padding to the layer.

ga-rounded

Makes the layer's corners rounded.

ga-vertical

Changes the layer's orientation to vertical.

In the accordion's CSS file, grid-accordion.css, you can edit the properties specified for the above classes. For example, you can set the padding to 5 pixels instead of 10 pixels, or you can change the transparency of the black and white backgrounds. However, it's a best practice to add your custom styling in a separate CSS file instead of modifying the accordion's CSS.

Data attributes

data-width

Sets the width of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's width will adapt to the width of the inner content.

data-height

Sets the height of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's height will adapt to the height of the inner content.

data-depth

Sets the depth (z-index, in CSS terms) of the layer.

data-position

Sets the position of the layer. Can be set to 'topLeft' (which is the default value), 'topRight', 'bottomLeft' or 'bottomRight'.

data-horizontal

Sets the horizontal position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed value, percentage value or to 'center'.

data-vertical

Sets the vertical position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed value, percentage value or to 'center'.

data-show-transition

Sets the transition of the layer when it appears in the panel. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it appears.

data-show-offset

Sets an offset for the position of the layer from which the layer will be animated towards the final position when it appears in the panel. Needs to be set to a fixed value.

data-show-duration

Sets the duration of the show transition.

data-show-delay

Sets a delay for the show transition. This delay starts from the moment when the panel starts opening.

data-hide-transition

Sets the transition of the layer when it disappears from the panel. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it disappears.

data-hide-offset

Sets an offset for the position of the layer towards which the layer will be animated from the original position when it disappears from the panel. Needs to be set to a fixed value.

data-hide-duration

Sets the duration of the hide transition.

data-hide-delay

Sets a delay for the hide transition. This delay starts from the moment when the panel starts closing.

This module is showcased in example1.html, example3.html and example4.html.

6. Deep Linking

Provides the possibility to link to a specific panel in the accordion. You can use this to have the accordion opened at a specific panel when the page loads or to load a specific panel later at a later time.

The hash that needs to be appended to the URL consists of the 'id' attribute of the accordion and the index of the panel separated by a slash character (/). For example, https://domain.com/page#my-accordion/0 will open the first panel (because panel indexes start with 0) in the accordion that has the 'id' set to 'my-accordion'.

It's also possible to specify the 'id' attribute of the panel instead of its index.

Example:

<div id="my-accordion" class="grid-accordion">
	<div class="ga-panels">
		<div class="ga-panel">
			<img class="ga-background" src="path/to/image1.jpg"/>
		</div>
		<div id="my-panel" class="ga-panel">
			<img class="ga-background" src="path/to/image2.jpg"/>
		</div>
		<div class="ga-panel">
			<img class="ga-background" src="path/to/image3.jpg"/>
		</div>
	</div>
</div>

In order to open the second panel, you can use either https://domain.com/page#my-accordion/1 or https://domain.com/page#my-accordion/my-panel.

This module is showcased in example4.html.

7. Autoplay

Adds autoplay functionality.

Customizable properties: autoplay, autoplayDelay, autoplayDirection and autoplayOnHover.

8. Touch Swipe

Although it's an optional module, you will most likely want to include it in all your projects, because it enables touch functionality for touch screen devices. The module also adds mouse drag functionality (on non-touch screen devices) when the accordion has more than one page.

Customizable properties: touchSwipe and touchSwipeThreshold.

9. Buttons

Adds navigation buttons below the accordion.

Customizable properties: buttons.

10. Keyboard

Adds keyboard navigation support. The next panel can be opened by pressing the right arrow key and the previous panel can be opened by pressing the left arrow key. Also, the Enter key will open the link attached to the background or opened background images.

By default, the accordion will respond to keyboard input all the time, not only when the accordion has focus. If you would like it to respond only when the accordion is in focus, you need to add the tabindex=0 attribute to the main accordion div container:

<div id="my-accordion" class="grid-accordion" tabindex="0">
	...
</div>

Also, you can add the tabindex=-1 attribute to all anchor elements that are inside the accordion, in order to not allow these elements to get focus.

Customizable properties: keyboard and keyboardOnlyOnFocus.

11. Mouse Wheel

Enables the accordion to respond to mouse wheel input.

Customizable properties: mouseWheel, mouseWheelTarget and mouseWheelSensitivity.

12. Smart Video

Provides automatic control of the videos loaded inside the panels. For example, the video will pause automatically when the panel closes, or the autoplay, if enabled, will stop when a video starts playing. Inside the accordion, videos can be added in the main panel container or inside layers.

The video types or providers supported by this module are: YouTube, Vimeo, HTML5, Video.js and SublimeVideo.

In order to have a video automatically controlled by the accordion, the video must have the ga-video class. Also, there are some provider-specific requirements for the videos, as presented below.

Customizable properties: openPanelVideoAction, closePanelVideoAction, playVideoAction, pauseVideoAction and endVideoAction.

YouTube

The videos need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by &.

Example:

<iframe class="ga-video" src="https://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1&amp;wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>

Vimeo

The videos need to have the api=1 parameter appended to the URL of the video.

Example:

<iframe class="ga-video" src="https://player.vimeo.com/video/43401199?api=1" width="500" height="350" frameborder="0" allowfullscreen></iframe>

HTML5

Simple HTML5 videos don't need any preparations other than having the ga-video class.

Example:

<video class="ga-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>

Video.js

Videos using Video.js also need the ga-video class, in addition to the other video.js specific requirements, like adding the video-js class or the data-setup={} attribute.

Example:

<video class="ga-video video-js" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none" data-setup="{}">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>

Support

If you found a bug or have a feature suggestion, please submit it in the Issues tracker.

If you need extensive help with implementing the grid accordion in your project, you can contact me.

License

The plugin is available under the MIT license.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Grid Accordion JS

Getting started

1. Get a copy of the plugin

2. Load the required files

3. Create the HTML for the grid accordion

4. Instantiate the grid accordion

Custom build

Detailed usage instructions

1. Core options

2. Add-on options

3. Public methods

4. Events

Add-ons

1. Breakpoints

2. Swap Background

3. Lazy Loading

4. Retina

5. Layers

Predefined classes

Data attributes

6. Deep Linking

7. Autoplay

8. Touch Swipe

9. Buttons

10. Keyboard

11. Mouse Wheel

12. Smart Video

YouTube

Vimeo

HTML5

Video.js

Support

License