Callbacks and Events

Sections: Callback options | API Arguments | API Functions | Examples

Callback options

onBeforeInitialize (null) | before_initialize

• Called at the same time that the before_initialize event triggers which occurs when the plugin initializes.
• The only changes that have occurred at this point are:
  • The anythingSlider object has been attached to the ul (the ul is the target of the anythingSlider code).
  • The class anythingBase was added to the ul.
  • The ul was wrapped in two divs (div.anythingSlider and div.anythingWindow).

onInitialized (null) | initialized

• Called at the same time that the initialized event triggers which occurs when the plugin has completed its initialization.
• This event may occur after the slideshow has initialized (onSlideInit).

onShowStart (null) | slideshow_start

• Called at the same time that the slideshow_start event triggers which occurs when a slideshow has started.

onShowStop (null) | slideshow_stop

• Called at the same time that the slideshow_stop event triggers which occurs when the slideshow has stopped.

onShowPause (null) | slideshow_paused

• Called at the same time that the slideshow_paused event triggers which occurs when the slideshow has paused due to mouseover.
• This callback and event will still occur when the slideshow is paused while a youtube video is playing. The slideshow has paused but not due to mouseover.

onShowUnpause (null) | slideshow_unpaused

• Called at the same time that the slideshow_unpaused event triggers which occurs when the slideshow has resumed because the slider has stopped being hovered over.
• Note: this event will not trigger properly (matching the pause event) if the user clicks on any of the controls (navigation or play/stop link).

onSlideInit (null) | slide_init

• Called at the same time that the slide_init event triggers which occurs when the script has been called to change pages.
• This is triggered before the controls animate (see Navigation toggleControls).
• The callback arguments for currentPage may not be set properly for pages on either end of the slider. The currentPage value for the last page will point to a clone of the first page when scrolling forward and conversely, the currentPage value for the first page will point to the clone of the last page when scrolling backwards. If you need the target page, get it when the slide complete callback has triggered.

onSlideBegin (null) | slide_begin

• Called at the same time that the slide_begin event triggers which occurs immediately before slide animation.

onSlideComplete (null) | slide_complete

• Called at the same time that the slide_complete event triggers which occurs after the slide animation has completed.

onSliderResize (null) | slideshow_resized

• Called at the same time that the slideshow_resized event triggers which occurs whenever the slider has been resized, but only when the expand option is true.

API Arguments

When using any of the above callback functions/triggered events. These callback arguments will be available. If you name the callback argument "slider" as in the simplified examples below, then the listed arguments are available to use (use the callback examples for better examples).

• API access :

  var slider = $('#slider').data('AnythingSlider');

• Callback option (onSlideComplete is the only callback without an event variable):

  onSlideComplete : function(slider){ ... }

• Triggered event (The 'slide_complete' triggered event does have an event variable):

  $('#slider').bind('slide_complete', function(event, slider){ ... });

slider.$el

• jQuery object of the ul targeted when AnythingSlider was initialized.

slider.$items

• jQuery object of all pages (li), including cloned pages.
• To target non-cloned pages, use slider.$items.filter(':not(.cloned)')

slider.$wrapper

• jQuery object of the entire AnythingSlider.
• It contains slider.$el and all the other objects (unless you appended the controls elsewhere, then use slider.$controls).

slider.$controls

• jQuery object of the AnythingSlider controls (includes navigation tabs and slideshow play/stop link).
• This targets the controls even if they are appended elsewhere (see appendControlsTo).

slider.targetPage

• Target page (non-cloned page) set before the slider animates.
• This variable is available during "slide_init", "slide_begin" and "slide_complete" events.

slider.$targetPage

• jQuery object of the target page (non-cloned page).
• This is the same page as defined in slider.targetPage.

slider.currentPage

• Currently displayed page/slide number.
• Updated to the target page when the animation completes.

slider.$currentPage

• jQuery object of the current page, it does not update until the "slide_complete" event.
• This is the same page as slider.currentPage.

slider.$lastPage

• jQuery object of the previous page.
• This is the same page as slider.$currentPage until the slide_complete event occurs, then it truly becomes the last page.

slider.pages

• Number of pages contained in the slider.
• This does not include cloned pages.

slider.playing

• Is true if the slideshow is currently playing.
• Is false when slideshow is paused, but true while videos are playing.

slider.hovered

• Is true if the slider was being hovered when the event occurred.

slider.options.{name}

• Access any of the slider options (e.g. slider.options.theme).
• Trying to set the options this way is possible, but may break the slider.

API Functions

updateSlider

• Call this function to update the slider with new or removed content.

• This internal function is called when you call the plugin with no parameters: $('#slider').anythingSlider();.

• There are no parameters for this function.

• Use it as follows:

  $('#slider').data('AnythingSlider').updateSlider();

goForward

• Call this function to advance the slider one page.

• This internal function is called when clicking on the forward arrow, which is switched when playRtl is true.

• There is one parameter for this function, autoplay. When this option is true, the slider will allow a running slideshow to continue.

• Use it as follows:

  $('#slider').data('AnythingSlider').goForward(); // stop slideshow, if playing
  $('#slider').data('AnythingSlider').goForward(true); // allow a slideshow to continue playing

goBack

• Call this function to make the slider go back one page.

• This internal function is called when clicking on the back arrow, which is switched when playRtl is true.

• There is one parameter for this function, autoplay. When this option is true, the slider will allow a running slideshow to continue.

• Use it as follows:

  $('#slider').data('AnythingSlider').goBack(); // stop slideshow, if playing
  $('#slider').data('AnythingSlider').goBack(true); // allow a slideshow to continue playing

gotoPage

• Call this function to change the current slide to any page.

• This internal function is called when clicking on the navigation tabs.

• There are four (4) parameters for this function: page, autoplay, callback, time.

  • page sets the desired page
  • autoplay is a flag that tells the plugin to allow a slideshow to keep running. Set it to true to continue a slideshow, or false or undefined to stop it.
  • callback is a callback function that is run after the desired page is in view. Set it to null or {} if no callback is needed.
  • time is the animation time to use for this one time only.
    • Setting this time to -1 will prevent the slide_init, slide_begin and slide_complete events from being triggered.
    • Setting this to 0 will set the animation time to zero, but only in version 1.8.6+. Earlier versions will set a zero time to the default animationTime.

• Use it as follows:

  // gotoPage( page, autoplay, callback, time )
  $('#slider').data('AnythingSlider').gotoPage(1); // go to page 1
  $('#slider').data('AnythingSlider').gotoPage(2, true); // go to page 2 & allow a slideshow to continue playing
  $('#slider').data('AnythingSlider').gotoPage(2, false, function(){ alert('done'); }); // go to page 2, stop slideshow & alert when page 2 is in view
  $('#slider').data('AnythingSlider').gotoPage(3, '', {}, -1); // go to page 3, stop slideshow (use '' or false), no callback and make it instant
  $('#slider').data('AnythingSlider').gotoPage(3, false, null, 0); // go to page 3, stop slideshow, no callback, set animation time of zero (in 1.8.6+) with triggered events

  of course the callback function can do more :P

  $('#slider').data('AnythingSlider').gotoPage(2, false, function(slider){
      slider.$currentPage.find('form')[0].reset(); // reset the form on the current page
  });

startStop

• Call this function to start or stop the slideshow.

• This internal function is called when clicking on the start/stop slideshow button.

• There are two parameters for this function, playing and paused.

  • playing is set to true to start a slideshow. Set to false to stop it.
  • paused is used when hovering over AnythingSlider to allow the internal timer to keep running. This may not be useful, but I've included it here to be complete.

• Use it as follows:

  $('#slider').data('AnythingSlider').startStop(); // stop slideshow
  $('#slider').data('AnythingSlider').startStop(true); // start a slideshow

slideControls

• Call this function to slide the navigation (only if the toggleControls option is true) and arrows (only if the toggleArrows option is true) in and out of view.

• This internal function is called when hovering the slider or changing slides.

• There is one parameter for this function, toggle. When true the elements will become visible, and when false they will hide.

• Use it as follows:

  $('#slider').data('AnythingSlider').slideControls(); // hide controls/arrows (if options allow)
  $('#slider').data('AnythingSlider').slideControls(true); // show controls/arrows (if options allow)

makeActive

• Call this function to make the selected slider active. All it does is adds the class activeSlider to the current slider.

• Only the active slider will change slides when the user presses the keyboard arrow keys, if the enableKeyboard option is true.

• This internal function is called whenever the slider is actively changed (not during a slideshow).

• There are no parameters for this function.

• Use it as follows:

  $('#slider').data('AnythingSlider').makeActive();

Callback Examples

The FX extension essentially binds to the slide_init and slide_complete events to add the animation effects for each panel.

Bind to the slider events as follows:

$('#slider1').bind('slide_complete', function(event, slider){
 console.debug( 'You are on page #' + slider.currentPage );
 // Do something else
});

The main demo page reporter

This code binds to all events to reports them to the display panel and the console (if available). Add spaces between each bound event (not commas!).

// Report Events to console & features list
$('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init
  slide_begin slide_complete',function(event, slider){
  // show object ID + event (e.g. "slider1: slide_begin")
  var txt = slider.$el[0].id + ': ' + event.type + ', now on panel #' + slider.currentPage;
  $('#status').text(txt);
  // added window.console.firebug to make this work in Opera
  if (window.console && window.console.firebug){ console.debug(txt); }
 });

Add a callback function to the AnythingSlider default options as follows:

$('#slider').anythingSlider({
 onSlideBegin : function(event, slider){
  alert('Welcome to Slide #' + slider.currentPage);
 },
 // "onSlideComplete" is the only callback without an "event" variable
 onSlideComplete : function(slider){
  alert('Welcome to Slide #' + slider.currentPage);
 }
});

Callback function added in version 1.5.6.3 to include callbacks in external links

$('#slider').anythingSlider(4, function(slider){ 
  alert('Now on page ' + slider.currentPage);
});

Callback function that updates the windows hash tag with the current panel (this only works for a single slider on the page)

$('#slider2').bind('slide_complete', function(event, slider){
 window.location.hash = '#&panel' + slider.runTimes + '-' + slider.currentPage;
});