Callbacks and Events

Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Video, FX , Interactivity & Misc ) Change | Credits

##Callback options

###onBeforeInitialize (null)

• 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)

• 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)

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

###onShowStop (null)

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

###onShowPause (null)

• 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)

• 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)

• 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)

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

###onSlideComplete (null)

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

##Callback 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).

Callback example: onSlideComplete : function(slider){ ... } (onSlideComplete is the only callback without an event variable)

Triggered event : 'slide_complete', function(event, slider){ ... } (The 'slide_complete' triggered event does have an event variable)

###slider.$el

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

###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

• jQuery object of the target page (non-cloned page).
• This variable is available during "slide_init", "slide_begin" and "slide_complete" events.

###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.

###slider.playing

• Is true if the slideshow is currently playing.
• Is false when slideshow is paused, but true while youtube video is 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 may break the slider.

##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;
});

---

Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Video, FX , Interactivity & Misc ) Change | Credits