Added/updated in: All versionsVersion 1.0Version 1.1Version 1.2Version 1.2.1
Public API
Public API lets user control and modify behaviour of the plugin after its initialization.
Methods and variables can be accessed inside every callback function:
this.method(); //For methods this.variable; //For variables
In case there is only one element matching the selector, methods and variables can be accessed anywhere in your code:
$('selector').data('jAccordion').method(); //For methods
$('selector').data('jAccordion').variable; //For variables
In case there are more elements matching the selector, variable can be accessed anywhere in your code (eq(index) specifies index of accordion instace):
$('selector').eq(index).data('jAccordion').method(); //For methods
$('selector').eq(index).data('jAccordion').variable; //For variables
Method opens a slide with specified index - slideIndex (if not out of bounds). Slides are numbered from 0, which means that 1st slide = 0, 2nd slide = 1 etc. This method internally uses jQuery method eq, which means that you can use all of the advantages of this method such as goToSlide(-1) to open the last slide.
Method opens the first slide. This method has the same effect as goToSlide(0).
Method opens the last slide. This method has the same effect as goToSlide(-1).
Method opens the next slide or the first slide if none or the last one is active.
Method opens the previous slide or the last slide if none or the first one is active.
Method closes all slides (i.e. sets the same size for all the slides). Method takes effect only if one of the slide is open and autoplay is disabled.
Method returns boolean value which determines whether a slide is opening or closing.
Method returns active slide (if there is one) as jQuery object or null.
Method returns index of active slide or -1 if none is selected. Slides are numbered from 0, which means that 1st slide = 0, 2nd slide = 1 etc.
Method returns boolean value which specifies whether autoplay is paused.
Callbacks
In the callback function, this always means instance of the accordion, which means that you can access any public variable or call any public API method using:
this.method(); //For methods this.variable; //For variables
Callback function to be executed after the accordion is fully loaded.
Callback execution
- preloadImages enabled - callback function is executed after every image of every slide is loaded (Note: background images are not taken into consideration).
- preloadImages disabled - callback function is executed after the plugin is loaded.
Callback function to be executed after a slide is completely open.
Event properties:
- $slide - jQuery object of the open slide
- index - index of the open slide
Callback function to be executed when a slide starts opening.
Event properties:
- $slide - jQuery object of the opening slide
- index - index of the opening slide
Callback function to be executed when a slide starts closing.
Event properties:
- $slide - jQuery object of the closing slide
- index - index of the closing slide
Callback function to be executed when cursor enters the accordion's direct children .jAccordion-slidesWrapper.
Callback function to be executed when cursor leaves the accordion's direct children .jAccordion-slidesWrapper.
Callback function to be executed when autoplay is paused, i.e. when cursor enters accordion's direct children .jAccordion-slidesWrapper.
Callback function to be executed when autoplay is resumed, i.e. when cursor leaves accordion's direct children .jAccordion-slidesWrapper.
Event properties:
- remainingTime - remaining time (in milliseconds) for which the active slide remains open
Options
Options are used to affect behaviour of jAccordion. Options may depend on others in which case it's mentioned in the description page of the option. Options are placed in configuraiton section of jAccordion and are separated by comma.
Example of configuration section of jAccordion:
$('.accordion').jAccordion({
activeSlideSize : 750,
spacing : 3,
sticky : true,
autoplay : true,
autoplayInterval : 5000,
arrowKeysNav : true,
nextBtn : $('.nextBtn'),
prevBtn : $('.prevBtn')
});
falseSpecifies whether size (width/height) of accordion is automatically adjusted to fit size of content but max size (set via CSS) can't be exceeded.
falseSpecifies whether height of active slide should be determined by its content.
'active_slide'Class which is added to active slide.
falseEnables/disables using of arrow keys to control the active accordion. Accordion can be activated by clicking it (if option event is 'click') or by moving cursor over a slide (if option event is 'mouseenter') so only one instance can be controlled at the moment. Left and top keys are used to activate the previous slide and the right and bottom ones are used to activate the next slide.
3000Amount of time for which a slide is displayed if using autoplay.
nullIndex of slide which is open by default. All slides are closed if no value is set. Slides are numbered from 0. First slide equals 0, second slide equals 1, etc. Plugin internally uses jQuery method eq so you can set -1 to select the last slide.
'swing'Easing function used for animation of slides. jQuery library offers only two functions - 'swing' and 'linear' but you can use jQuery easing plugin to extend list of the functions. This plugin is included in all provided demos.
'mouseenter'Mouse event used to trigger slide opening. Allowed values are 'click' and 'mouseenter'. Value 'click' is automatically used for handheld devices.
nullHTML element which is included in every slide (exactly one header per one slide). Clicking the header causes the slide to open/close.
0Size (width/height) of inactive slide. If set then option activeSlideSize is not used (even if set).
trueSpecifies whether to change height in the same proportion as width when width of the accordion is changed.
nullClicking the element(s) causes opening of the next slide or the first one if none is active.
trueautoplay is paused when cursor enters accordion's direct children .jAccordion-slidesWrapper.
trueSpecifies whether slides remain hidden until all of the images are fully loaded.
500Duration (in milliseconds) of fade-in transition of accordion after all of the images are fully loaded.
nullClicking the element(s) causes opening of the previous slide or the last one if none is active.
trueSpecifies whether to change accordion dimensions according to its parent.
'fit'Specifies which method of scaling is applied to images with class jAccordion-img.
Methods of scaling
- fitWidth - width of images is adjusted so it's same as width of a slide and height is changed in the same proportion
- fitHeight - height of images is adjsuted so it's same as height of a slide and width is changed in the same proportion
- fit - size of images is adjusted to completely fill the whole slide
falseActive slide remains open until another one is selected.
500Duration (in milliseconds) of transition (opening/closing a slide).
falseSpecifies whether slides are stacked vertically or horizontally.
jAccordion by maniacpc, exclusively for CodeCanyon
