JavaScript callbacks

The callbacks, or events, are useful for detecting when certain actions take place. For example, we can detect when a transition is complete or when a slide was clicked. Below is a list of all the available callbacks.

Callback NameDescription
sliderInit Triggered after the slider was instantiated.
transitionStart Triggered when a transition starts.
transitionComplete Triggered when a transition is complete.
slideClick Triggered when a slide is clicked.
slideMouseOver Triggered when the mouse is rolled over a slide.
slideMouseOut Triggered when the mouse is rolled out of a slide.
thumbnailClick Triggered when a thumbnail is clicked.
thumbnailMouseOver Triggered when the mouse is rolled over a thumbnail.
thumbnailMouseOut Triggered when the mouse is rolled out of a thumbnail.
videoPlay Triggered when a video starts playing.
videoPause Triggered when a video is paused.
videoEnd Triggered when a video ends.
videoFullscreenChange Triggered when the fullscreen state of a video changes.
xmlLoaded Triggered when the XML file is completely loaded.
doSliderLayout Triggered when the layout is modified.

Most of these callback functions will return an object that contains certain information. The slide related callbacks, for example, will contain information about the slide that triggered the event. The information contained is the index of the slide (0, 2, 5, etc.), the type of event (slideClick, transitionComplete, etc.) and a 'data' object that contains all the slide's information that was specified for that slide.

 

The code example below shows you how to detect when a transition is over and when the slider's layout is changed. You can use the first callback to identify which slide is currently visible, and you can also get certain data about that slide. The second callback is useful if you want to keep track of the slider's size.

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var slider = $('#my-slider').advancedSlider({
            width: 840,
            height: 400,
            transitionComplete: onTransitionComplete,
            doSliderLayout: onSliderLayout
}); }); function onTransitionComplete(obj) { console.log('You are viewing slide ' + obj.index); console.log(obj.type, obj.data); } function onSliderLayout() { console.log(slider.getSize()); } </script
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk