Class: Slideshow

Responsiville. Slideshow

A responsive slideshow for the Responsiville framework. A slideshow consists of a container for elements that iterate, ie the slides, the slies themselves and some elements for controlling its behaviour, moving it back and forth and to next and previous slide. It works with the Responsiville framework. It hides when necessary, re-appears when there is enough space, according to the given breakpoints configuration. People have been known to use it even for creating other functionalities, like tabs, etc.

new Responsiville.Slideshow(options)

responsiville.slideshow.js, line 121
Creates and initialises the slideshow.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
enter string Comma separated list of breakpoints in which the slideshow enters, which means it is enabled.
leave string Comma separated list of breakpoints in which the slideshow leaves, which means it is disabled.
container string The slideshow container element selector.
slides string The slideshow slides elements selector. If null given then the container's direct children are taken into account.
navigation string The slideshow navigation element, the one that holds the slide bullets and the next and previous buttons. If null given then the module searches for a nav element inside the container.
bullets string The selector of the element that holds the slideshow navigation bullets.
bullet string The selector of the actual slideshow bullets.
next string The next slide button element selector.
previous string The previous slide button element selector.
loading string Class added to a the container before the first slide loads, while the user is under the impression that the slideshow itself is loading.
loaded string Class added to a the container after the first slide has loaded. "First" means the first selected slide, not the first in the row.
selecting string Class added to slides while transitioning from non selectred to selected.
selected string Class added to a slide when it is selected. Only one slide can be selected.
bulletsPos string The position of the navigation bullets, eg "bc" stands for "bottom center", etc.
bulletOn string The class of the selected bullet at each time.
nextText string The text inside the slideshow next button.
previousText string The text inside the slideshow previous button.
bulletText string The text inside the slideshow bullets.
resizeMode string How to resize the container, "none" means do not resize it at all, "slide" means give it the height of the current slide, "maxSlide" means resize it in the beginning to the height of the biggest slide.
first int Slide to start from, counting from zero.
direction int Whether the slide advances forwards (a positive value) or goes backwards (a negative value).
start boolean Whether to start the automatic slide iteration in the beginning.
effect string The visual effect to use when transitioning from one slide to the next, "none" means no effect simply appear and disappear, "fade" means a fading effect, "slide" means a sliding effect.
speed int The speed of the slideshow or how much the each slide stays visible before transitioning to the next.
transition int The speed of each slide transition visual effect.
hover boolean Whether to pause the slideshow when the user hovers their mouse over it.
wait boolean Whether to wait for the images of the first selected slide to fully load before beginning the slideshow. Useful to provide a loading indicator to the user while they wait.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Slideshow.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Slideshow.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Slideshow.autoRun(){void}

responsiville.slideshow.js, line 369
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

adjustContainer(){void}

responsiville.slideshow.js, line 778
Adjusts the slideshow container to the correct height.
Fires:
Returns:
Type Description
void

afterSlideShown(index){void}

responsiville.slideshow.js, line 1080
Runs when the process of showing a slide is complete, thus the slide is fully shown, no matter what the effect was or whether the process took zero or more time.
Name Type Description
index int The index of the slide that was shown.
Returns:
Type Description
void

bulletMouseClick(){void}

responsiville.slideshow.js, line 1416
Event handler for when a user clicks on a slideshow navigation bullet.
Returns:
Type Description
void

calculateNext(){int}

responsiville.slideshow.js, line 1308
Calculates the index of the next slide to be shown based on the current slide and the slideshow direction.
Returns:
Type Description
int The index of the next slide to be shown.

containerMouseEnter(){void}

responsiville.slideshow.js, line 1509
Event handler for when a user's mouse enters their mouse inside the area of the slideshow container.
Returns:
Type Description
void

containerMouseLeave(){void}

responsiville.slideshow.js, line 1548
Event handler for when a user's mouse leaves the area of the slideshow container.
Returns:
Type Description
void

disable(){void}

responsiville.slideshow.js, line 599
Disable slideshow. Means it completely invalidates the slideshow behaviour trying to restore things to their previous state, before the slideshow was enabled in the first place. Particularly useful when one wants to enable and disable the slideshow at certain responsive breakpoints.
Fires:
Returns:
Type Description
void

enable(){void}

responsiville.slideshow.js, line 509
Enables the slideshow. Means it creates the slideshow functionality on the selected containers and slides from scratch. Particularly useful when one wants to enable and disable the slideshow at certain responsive breakpoints.
Fires:
Returns:
Type Description
void

enableOnFirstSlideLoad(){void}

responsiville.slideshow.js, line 472
Enable the slideshow when the images of the first slide have loaded.
Returns:
Type Description
void

hide(index, next, immediately){void}

responsiville.slideshow.js, line 1112
Hides the given slide.
Name Type Description
index int The index of the slide to hide.
next int The index of the slide to be shown while this slide is being hidden. Useful for cases where the transition from one slide to the other depends on the position of both slides.
immediately boolean Whether to hide the slide immediately, without using any transition effects, or not.
Fires:
Returns:
Type Description
void

hideAll(immediately){void}

responsiville.slideshow.js, line 1243
Hides all slides simultaneously.
Name Type Description
immediately boolean Whether to hide the slides immediately, without using any transition effects, or not.
Returns:
Type Description
void

imageLoaded(){void}

responsiville.slideshow.js, line 877
Runs when an image -any image- inside a slide has loaded.
Returns:
Type Description
void

next(){void}

responsiville.slideshow.js, line 1353
Selects and shows the next slide in the literal sense, the one on the right of the current slide.
Returns:
Type Description
void

nextMouseClick(){void}

responsiville.slideshow.js, line 1454
Event handler for when a user clicks on a slideshow next link.
Returns:
Type Description
void

pause(){void}

responsiville.slideshow.js, line 734
Pauses the slideshow.
Fires:
Returns:
Type Description
void

previous(){void}

responsiville.slideshow.js, line 1385
Selects and shows the previous slide in the literal sense, the one on the left of the current slide.
Returns:
Type Description
void

previousMouseClick(){void}

responsiville.slideshow.js, line 1482
Event handler for when a user clicks on a slideshow previous link.
Returns:
Type Description
void

select(index){void}

responsiville.slideshow.js, line 1265
Sets the given slide as selected and triggers the command to show it.
Name Type Description
index int The index of the slide to set as selected.
Returns:
Type Description
void

selectNext(){void}

responsiville.slideshow.js, line 1291
Selects and shows the next slide in row.
Returns:
Type Description
void

setupEvents(){void}

responsiville.slideshow.js, line 391
Sets up slideshow events when the slideshow is initialised. Gets called automatically by the constructor.
Returns:
Type Description
void

show(index, previous){void}

responsiville.slideshow.js, line 899
Shows the given slide.
Name Type Description
index int The index of the slide to show.
previous int The index of the slide previously shown.
Fires:
Returns:
Type Description
void

start(){void}

responsiville.slideshow.js, line 681
Starts the slideshow.
Fires:
Returns:
Type Description
void

Events

containerAdjusted

responsiville.slideshow.js, line 901
Called before the slide begins to show.

containerAdjusted

responsiville.slideshow.js, line 857
Called after the slideshow container has been adjusted.

containerAdjusted

responsiville.slideshow.js, line 824
Called after the slideshow container has been adjusted.

disabled

responsiville.slideshow.js, line 660
Called after the slideshow has been disabled.

enabled

responsiville.slideshow.js, line 576
Called after the slideshow has been enabled.

init

responsiville.slideshow.js, line 287
Called after the module has been initialised.

paused

responsiville.slideshow.js, line 758
Called after the slideshow has paused.

slideHidden

responsiville.slideshow.js, line 1156
Called after the slide has been hidden.

slideHidden

responsiville.slideshow.js, line 1206
Called after the slide has been hidden.

slideHidden

responsiville.slideshow.js, line 1137
Called after the slide has been hidden.

slideHidden

responsiville.slideshow.js, line 1220
Called after the slide has been hidden.

slideHiding

responsiville.slideshow.js, line 1120
Called before the slide starts hiding.

slideShown

responsiville.slideshow.js, line 959
Called after the slide has been shown.

slideShown

responsiville.slideshow.js, line 990
Called after the slide has been shown.

slideShown

responsiville.slideshow.js, line 1052
Called after the slide has been shown.

started

responsiville.slideshow.js, line 714
Called after the slideshow has started.

starting

responsiville.slideshow.js, line 683
Called when the slideshow is starting.