JavaScript API - Properties

Grid Accordion can be customized using several properties which are described below. These properties must be passed to the accordion when the accordion is instantiated.

Example:

$('#my-accordion').gridAccordion({
    width: 960, 
    height: 800,
    responsiveMode: 'custom',
    columns: 3,
    rows: 3,
    startPanel: 3,
    closePanelsOnMouseOut: false,
    shadow: false,
    panelDistance: 10,
    autoplay: false,
    mouseWheel: false
});

width

Sets the width of the 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. Also, please note that, in order to make the accordion responsive, it's not necessary to use percentage values. More about this in the description of the 'responsive' property.

Default value: 800

height

Sets the height of the accordion. The same rules available for the 'width' property also apply for the 'height' property.

Default value: 400

responsive

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.

Default value: true

responsiveMode

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' only resizes 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.

Default value: 'auto'

aspectRatio

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.

Default value: -1 (determined by the ratio of the set 'width' and 'height')

orientation

Sets the orientation of the panels. Possible values are 'horizontal' and 'vertical'.

Default value: 'horizontal'

columns

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.

Default value: 4

rows

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.

Default value: 3

Note: The 'columns' the 'rows' can't be set to -1 at the same time; one must have a specific value. Also, when either is set to -1, all the panels will be contained in a single page.

startPanel

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.

Default value: -1

openedPanelWidth

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.

Default value: 'max'

openedPanelHeight

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.

Default value: 'max'

maxOpenedPanelWidth

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.

Default value: '70%'

maxOpenedPanelHeight

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.

Default value: '70%'

openPanelOn

If set to 'hover', the panels will be opened by moving the mouse pointer over them; if set to 'click', the panels will only open when clicked.

Default value: 'hover'

closePanelsOnMouseOut

Determines whether the opened panel closes or remains open when the mouse pointer is moved away.

Default value: true

mouseDelay

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.

Default value: 200

panelDistance

Sets the distance between consecutive panels. Can be set to a percentage or fixed value.

Default value: 10

openPanelDuration

Determines the duration in milliseconds for the opening of a panel.

Default value: 700

closePanelDuration

Determines the duration in milliseconds for the closing of a panel.

Default value: 700

pageScrollDuration

Indicates the duration of the page scroll.

Default value: 500

pageScrollEasing

Indicates the easing type of the page scroll. Setting a custom value requires the use of a jQuery easing plugin.

Default value: 500

breakpoints

Sets specific breakpoints which allow changing the look and behavior of the accordion (decreasing the number of panels visible per page, shifting the orientation of the panels, etc.) when the page resizes.

Example:

$('#my-accordion').gridAccordion({
    width: 960, 
    height: 800,
    ...
    breakpoints: {
        960: {columns: 5, rows: 4},
        800: {columns: 4, rows: 2, orientation: 'vertical', width: 600, height: 500},
        650: {columns: 3, rows: 2},
        500: {columns: 2, rows: 2, orientation: 'vertical', aspectRatio: 1.2}
    }
});

As you can see, 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.

startPage

Indicates which page will be opened when the accordion loads, if the panels are displayed on more than one page.

Default value: 0

shadow

Indicates if the panels will have a drop shadow effect.

Default value: false

autoplay

Indicates if the autoplay will be enabled.

Default value: true

autoplayDelay

Sets the delay, in milliseconds, of the autoplay cycle.

Default value: 5000

autoplayDirection

Sets the direction in which the panels will be opened. Can be set to 'normal' (ascending order) or 'backwards' (descending order).

Default value: 'normal'

autoplayOnHover

Indicates if the autoplay will be paused when the accordion is hovered.

Default value: 'pause'

mouseWheel

Indicates if the accordion will respond to mouse wheel input.

Default value: true

mouseWheelSensitivity

Sets how sensitive the accordion will be to mouse wheel input. Lower values indicate stronger sensitivity.

Default value: 10

mouseWheelTarget

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.

Default value: 'panel'

keyboard

Indicates if the accordion will respond to keyboard input.

Default value: true

keyboardOnlyOnFocus

Indicates if the accordion will respond to keyboard input only if the accordion has focus.

Default value: false

swapBackgroundDuration

Sets the duration, in milliseconds, of the transition effect.

Default value: 700

fadeOutBackground

Indicates if the main image background will be faded out when the opened/alternative background fades in.

Default value: false

touchSwipe

Indicates if the touch swipe functionality will be enabled.

Default value: true

touchSwipeThreshold

Sets how many pixels the distance of the swipe gesture needs to be in order to trigger a page change.

Default value: 50

openPanelVideoAction

Sets what the video will do when the panel is opened. Can be set to 'playVideo' or 'none'.

Default value: 'playVideo'

closePanelVideoAction

Sets what the video will do when the panel is closed. Can be set to 'pauseVideo' or 'stopVideo.'

Default value: 'pauseVideo'

playVideoAction

Sets what the accordion will do when a video starts playing. Can be set to 'stopAutoplay' or 'none'.

Default value: 'stopAutoplay'

pauseVideoAction

Sets what the accordion will do when a video is paused. Can be set to 'startAutoplay' or 'none'.

Default value: 'none'

endVideoAction

Sets what the accordion will do when a video ends. Can be set to 'startAutoplay', 'nextPanel', 'replayVideo' or 'none'.

Default value: 'none'

XMLSource

Sets the XML source for the accordion. Can be set to a path to an XML file or to an XML string.

JSONSource

Sets the JSON source for the accordion. Can be set to a path to a JSON file or to a JSON string.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk