Usage

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

##Updating the Slider (content added or removed) - options will be ignored.

• Any options added inside the anythingSlider call will be ignored.
• Note that if you are removing any panels from AnythingSlider, make sure your script ignores the cloned panels (they have a cloned class). See the page source of "index.html" for an example.

 $('#slider1')
  .append('<li><img src="some-image.jpg" alt="" /></li>')
  .anythingSlider(); // update the slider

##Getting current slide:

$('#slider1').data('AnythingSlider').currentPage; // returns page #

##Setting current slide:

###External link example

<a href="#" id="slide-jump">Slide 4</a>

$("#slide-jump").click(function(){
  $('#slider2').anythingSlider(4);
});

###External link with callback

<a href="#" id="slide-jump">Slide 4</a>

$("#slide-jump").click(function(){
  $('#slider2').anythingSlider(4, function(slider){ alert('Now on page ' + slider.currentPage); });
});

###Targeting an object inside the slide

** NOTE: As of version 1.7.9, you can now directly target the element inside the slider

// target #info1 element inside the slider (can be the panel itself or any element inside
$('#slider').anythingSlider('#info1');

// callbacks are allowed
$('#slider').anythingSlider('.info:eq(2)', function(){
  alert('Now showing the third info slide!'); // eq() has zero-based index
});

** Use this method for AnythingSlider versions before 1.7.9.

// This snippet will allow you to navigate to a panel using an ID or
// unique class inside the slider instead of using the page number
// example of a unique class can be ".info:eq(2)", where the number
// inside of eq() is a zero-based index of the class.

    // targetID can be an ID or unique class inside a specific slider
var targetID = '#info1',
    // The actual slider ID
    slider = $('#slider1'),

    // Get the plugin variables
    plugin = slider.data('AnythingSlider'),
    // find target slide
    target = $(targetID).closest('.panel');

// navigate to targeted slide
slider.anythingSlider( plugin.$items.index( target ) );

##External Slideshow Control

$('#slider').data('AnythingSlider').startStop(true);  // start the slideshow
$('#slider').data('AnythingSlider').startStop(false); // stops the slideshow
$('#slider').data('AnythingSlider').goForward();      // go forward one slide & stop the slideshow
$('#slider').data('AnythingSlider').goBack();         // go back one slide & stop the slideshow
$('#slider').data('AnythingSlider').goForward(true);  // go forward one slide & continue the slideshow
$('#slider').data('AnythingSlider').goBack(true);     // go back one slide & continue the slideshow

##Extending - Event Hooks

###Callback Functions

Note: Changed bind function returned arguments to make more straightforward values available, see callback arguments below.

• before_initialize (onBeforeInitialize) - triggered right after creating the anythingSlider object. Read note.
• initialized (onInitialized) - triggered after creating the anythingSlider object.
• slideshow_start (onShowStart) - slideshow started.
• slideshow_stop (onShowStop) - slideshow stopped.
• slideshow_paused (onShowPause) - slideshow paused.
• slideshow_unpaused (onShowUnpause) - slideshow unpaused - may not trigger properly or match a pause event if user clicks play/stop button.
• slide_init (onSlideInit) - triggered when panel slide is initialized (before controls animate).
• slide_begin (onSlideBegin) - triggered before panel slide animation.
• slide_complete (onSlideComplete) - triggered after panel slide animation.

Please note that at when the onBeforeInitialize event triggers/callback is called, almost nothing has been set:

1. The anythingSlider object has been attached to the ul.
2. The class anythingBase was added to the ul.
3. The ul was wrapped in two divs (div.anythingSlider div.anythingWindow).

That's it! If you want to use some anythingSlider functionalities, you probably want to wait for the initialization to be completed (and register to the event initialized or use the onInitialized option).

###Binding to Events and using Callbacks:

You can bind to any of the custom event triggers as follows (see this page source for another example):

$('#slider1').bind('slide_complete', function(e, slider){
 $('#status').text( 'Now on page #' + slider.currentPage );
 // Do something else
});

$('.anythingSlider').bind('slideshow_start slideshow_stop', function(e, slider){
 var msg = (e.type == "slideshow_start") ? 'Someone started the #^&%$! slideshow!' : 'Whew, thanks for stopping the slideshow';
 $('#status').text( msg );
});

or use one of the callback functions:

$('#slider').anythingSlider({
 onSlideComplete : function(slider){
  alert('Welcome to Slide #' + slider.currentPage);
 }
});

###Callback Arguments

Examples are if you use "slider" in the callback function, e.g. function(slider){...}, or in the trigger function, e.g. function(e, slider){...}

• slider.$items - jQuery object of all pages, including cloned pages.
• slider.targetPage - Target page number. Available for all slide events.
• slider.$targetPage - jQuery object of the Target page.
• slider.currentPage - Currently displayed page/slide number. Updated to target page number when the animation completes ("slide_complete" event).
• slider.$currentPage - jQuery object of the current page, it does not update until the "slide_complete" event.
• slider.$lastPage - jQuery object of the previous page - same page as slider.$currentPage until "slide_complete" is called, because it doesn't update.
• 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 is currently being hovered.
• slider.options.{name} - Access any of the options (e.g. slider.options.theme). Trying to set the options this way may break the slider.

##Formatting Navigation Text

To use the navigationFormatter option, you must have a function that accepts two parameters, and returns a string of HTML text. See the navigation wiki page for more examples.

• index = integer index (1 based);
• panel = jQuery wrapped LI item this tab references
• Function must return a string of HTML/Text
• Here is a sample formatter (view index.html page source for another example):

$('#slider').anythingSlider({
 navigationFormatter : function(index, panel){
   return " Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
 }
});

---

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