Foundation - Media JavaScript Reference

Description

Foundation provides JavaScript components for the orbit as listed below.

Initializing

To use the orbit plugin, foundation.core.js, foundation.orbit.js files should be included in your JavaScript. This plugin requires the following utility libraries −

  • foundation.util.keyboard.js

  • foundation.util.motion.js

  • foundation.util.timerAndImageLoader.js

  • foundation.util.touch.js

Foundation.Orbit

It is used to create new instance of a carousel of the orbit.

var elem = new Foundation.Orbit(element);

Sr.No. Name & Description Type
1

element

It is a jQuery object to make into an carousel.

 jQuery
2

options

It overrides the default settings of the plugin.

 Object

Plugin Options

You can use these to customize an orbit's instance. It can be set as separate data attributes, one merged data-options attribute or as an object passed to the constructor of the plugin. The following table lists the plugin options used in Foundation.

Sr.No. Name & Description Example
1

bullets

It tells the JS to load bullets.

 true
2

navButtons

It tells the JS to add event listeners to nav buttons.

 true
3

animInFromRight

motion-ui animation class to be applied.

 'slide-in-right'
4

animOutToRight

motion-ui animation class to be applied.

 'slide-out-right'
5

animInFromLeft

motion-ui animation class to be applied.

 'slide-in-left'
6

animOutToLeft

motion-ui animation class to be applied.

 'slide-out-left'
7

autoPlay

It automatically allows orbit to animate on page load.

 true
8

timerDelay

It represents time in ms which will be applied for slide transition.

 5000
9

infiniteWrap

It infinitely loops via slides

 true
10

swipe

It allows orbit slides to bind the swipe events for mobile.

 true
11

pauseOnHover

It allows the timing functions to pause the animation on hovering on it.

 true
12

accessible

It binds the keyboard events to the slider.

 true
13

containerClass

Class applied to the orbit's container.

 'orbit-container'
14

slideClass

Class applied to individual slides of the orbit.

 'orbit-slide'
15

boxOfBullets

Class applied to the container of the bullet.

 'orbit-bullets'
16

nextClass

Class applied to the next button.

 'orbit-next'
17

prevClass

Class applied to the previous button

 'orbit-previous'
18

useMUI

It sets Boolean to flag the JS to use motion ui classes or not. For backwards compatibility defaults to true.

 true

Events

These events will trigger from any element with a plugin attached. The slidechange.zf.orbit will fire when the animation is finished by the slide.

Functions

The .geoSync sets a timer object and starts the counter for the next slide.

.changeSlide

It changes the slide into a new one. It triggers Orbit#event events for slide change. The following table lists the events, which will be triggered.

Sr.No. Name & Description Type
1

isLTR

It flags when the slide must move from left to right.

 Boolean
2

chosenSlide

jQuery elements of the slide to display next, when one is selected.

 jQuery
3

idx

It represents the new slide index in its collection, when one is chosen.

 Number

The .destroy destroys the carousel and hides the element.

foundation_media.htm
Advertisements