Skip to content

Usage

Jump to bottom Edit New page
Mottie edited this page Dec 19, 2013 · 17 revisions

Sections: Update Slider | Update Options | Get/set current slide | External Slideshow Controls | Extending Callback functions Callback Arguments | Formatting Navigation Text

Notes:

  • This documentation will try to show different methods to accomplish the same thing.
    • The built-in shortcut methods allow calling the plugin directly: 
      $('#slider').anythingSlider(1); // go to page 1
    • The API object allows greater customization: 
      // go to page 1, but allow the slideshow to continue playing
$('#slider').data('AnythingSlider').gotoPage(1, true);
    • The above two methods are intermingled in this documentation

Updating the Slider (content added or removed)

  • 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

Updating a slider option

  • Almost all of the options can be modified on the fly using the API. To access the API get the AnythingSlider data object as follows:

    // get the AnythingSlider data object
var api = $('#slider').data('AnythingSlider');

  • To modify an option, target the api options. But note that some options will require an update before they take effect. Sorry, there isn't an extensive list of which options do or don't need AnythingSlider to be updated.

    // change slideshow delay
api.options.delay = 5000;
// the delay runs in a setInterval, so need to stop it, and restart it
// for the new delay setting to take effect
api.clearTimer(); 
api.startStop(true);
// update the slider, if needed (not needed for a delay change)
// api.updateSlider();

  • The api also gives you access to External Slideshow Controls and Callback Arguments.

Getting current slide:

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

Setting current slide:

External link example

<nav>
  <a href="#" data-slide="1">1</a>
  <a href="#" data-slide="2">2</a>
  <a href="#" data-slide="3">3</a>
  <a href="#" data-slide="4">4</a>
</nav>
$("nav a").click(function(){
  $('#slider2').anythingSlider( $(this).attr('data-slide') );
});

External link with callback

<nav>
  <a href="#" data-slide="1">1</a>
  <a href="#" data-slide="2">2</a>
  <a href="#" data-slide="3">3</a>
  <a href="#" data-slide="4">4</a>
</nav>
$("nav a").click(function(){
  $('#slider2').anythingSlider( $(this).attr('data-slide'), function(slider){
    alert('Now on page ' + slider.currentPage);
  });
});

External link with callback using the API

** NOTE: For more details on how to use the gotoPage function, please see the callbacks and events page.

<nav>
  <a href="#" data-slide="1">1</a>
  <a href="#" data-slide="2">2</a>
  <a href="#" data-slide="3">3</a>
  <a href="#" data-slide="4">4</a>
</nav>
$("nav a").click(function(){
  var slider = $('#slider2').data('AnythingSlider');
  // gotoPage( page, autoplay, callback, time )
  // page = $(this).attr('data-slide')
  // autoplay false means stop any slideshow
  // callback shows page in an alert
  // time is -1 to instantly switch pages without triggering any events
  slider.gotoPage( $(this).attr('data-slide'), false, function(slider){
    alert('Now on page ' + slider.currentPage);
  }, -1); // -1 time (instant switch)
});

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

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. Please read the note specific to this callback below.
  • 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 is possible, but may break the slider.

** NOTE: For a more complete list of callback arguments, please refer to the Callbacks and Events page.

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
 }
});
Add a custom footer
Clone this wiki locally