Skip to content

Navigation options

Jump to bottom Edit New page
Mottie edited this page Dec 13, 2012 · 19 revisions

Sections: Enable Functions | Navigation ( startPanel | changeBy | hashTags | infiniteSlides | navigationFormatter | navigationSize )

Enable Functions

enableArrows (true)

  • New in Version 1.7.
  • When true, the forward and back arrows will work as they should. Clicking on an arrow will change the slideshow position as set by the changeBy value.
  • When false, the arrow buttons will be visible, but not clickable. Adjust the CSS as desired to change the hover/active color of the link.
  • Added in case you are striving to be an evil genius and you like teasing the monkeys.

enableNavigation (true)

  • When true, the navigation links will work as they should and clicking on an enabled navigaiton link will stop a running slideshow.
  • If false, the navigation links will be visible, but not clickable. Adjust the CSS as desired to change the hover/active color of the link.
  • This option was added to allow users to see the navigation links and see which panel the slider is currently on, but not allow the user to click and change the panel.

enableStartStop (true)

  • Renamed from enablePlay in Version 1.7.
  • If true, the play/stop link will function normally. Clicking on it will toggle the slideshow on or off.
  • If false, the play/stop link will still be visible, but not clickable. Adjust the CSS as desired to change the link behaviour when disabled.
  • Added in case you want to have a slider set up to auto play it's contents but disallow user interaction.

enableKeyboard (true)

  • When this option is true, the active slider (highlighted in color) will change panels when using left and right arrow keys.
  • When false, the keyboard is ignored for this slider - this does not apply to all AnythingSliders on a page, only the one with which you set this option.
  • This option was added in case you want your AnythingSlider to just play slides without interruption - pressing an arrow key will stop the automatic slideshow.

Navigation

startPanel (1)

  • Set this value to the starting panel shown after the slider has initialized.
  • This value must be a number (without quotes around it) to work properly.
  • This value is on a one-based index - the first panel is 1, second is 2, etc.
  • If the value is not in the range of the number of panels, it will default to 1.

changeBy (1)

  • Set this value to the amount to go forward or backward when changing panels.
  • This value is applied to the forward and back arrows as well as the slideshow.
  • This value must be a number (without quotes around it) to work properly.
  • This value is on a one-based index - the first panel is 1, second is 2, etc.
  • Any non-integer values will be rounded down

hashTags (true)

  • This option is a flag that either enables (when true) the script to recognize and add hash tags in the browser URL. If false, the script ignores the hash tags and does not update the browser URL.
  • A browser hash tag is basically anything after the hash mark in the browser location window (e.g. in "http://css-tricks.github.com/AnythingSlider/#&panel1-2&panel2-3" the hash from this URL is "&panel1-2&panel2-3"). You can translate this into the first slider will show the second panel and the second slider will show the third panel.
  • These hash values are set when clicking on any of the navigation links.
  • The hash values are not set when clicking on the navigation arrows or using keyboard controls to change slides. This was done intentionally.
  • The resulting url is kept in the browser history, but using the brower forward and back button will not update the slider until the page is reloaded.
  • Hash tags are also useful for bookmarking.
  • New in version 1.7.6
    • If the hash points to an ID that is inside the slider, that slide will now be visible on page load, this will work even without the hashTags option enabled. For example, the following link demos.html#quote2 will go to the FX demo page with the Quote#2 panel inside of Demo #2 in view and at the top of the page.
    • The ID hash will work when other panels are included in the hash (demos.html#quote2&panel3-3), but the page will not scroll that slider into view; the browser will not bring it into view because the hash is not an ID.
    • The "panelx-#" hash will override the above id hash, so this link demos.html#quote2&panel2-2 will show the first quote panel in demo 2, but the page will not scroll the slider into view.

infiniteSlides (true)

  • When this option is true, the Anythingslider acts like an infinite slider.
  • When false, the slides stop at the first and last panel, even the slideshow.
  • The first and last panels are no longer cloned when this option is false. Hidden blank panels were added instead.
  • When the slider is on the first or last panel, the slider will display a "rewind" effect if the stopAtEnd option is false.
  • When the slider is on the first or last panel and the stopAtEnd option is true, the back and forward arrow keys (respectively) will have a "disabled" class applied - modified in the css. This allows you to hide or fade out the back arrow when on the first panel and the forward arrow when on the last panel.

navigationFormatter (null)

  • If the script finds a function in place of null it will use this function to determine what text to add to a link.
  • The function will fit these specifications:
    • index contain an integer index (one based index; first panel = 1, second panel = 2) of the panel.
    • panel contains the jQuery object (LI item) of this panel.
    • The function must return a string of HTML/Text.
  • Here are a few examples:

    • Just return "Panel #" plus the panel number:

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

    • Return the tab name from an indexed array:

      ```javascript
$('#slider2').anythingSlider({
  navigationFormatter : function(index, panel){ // Format navigation labels with text
    return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
  }
});
```

    • Return thumbnail image HTML:

      ```javascript
$('#slider1').anythingSlider({
  navigationFormatter : function(i, panel){
    return '<img src="images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg">';
  }
});
```

    • Return the text from a header inside the panel. Given this HTML:

      ```html
<ul id="slider1">
  <li><h2>Title1</h2><div class="text">Put anything you want here</div></li>
  <li><h2>Image</h2><img src="image1.jpg" /></li>
  <li>
    <div class="list">
      <h2>Title2</h2>
      <ul>
        <li>List item #1</li>
        <li>List item #2</li>
      </ul>
    </div>
  </li>
</ul>
```

This is the navigationFormatter to match it. The formatter will return the text from inside the H2 tag and add it as the link text:

```javascript
$('#slider1').anythingSlider({
  navigationFormatter : function(i, panel){
    return panel.find('h2').text();
  }
});
```

    • Apply formatting to the tab (LI) directly. This functionality was added in version 1.7.26. Notice that using this method, the default HTML ('<a class="panel' + i + '" href="#"><span>' + i + '</span></a>') needs to be manually added. Of course, you can add whatever custom HTML you want in there instead. Replace 'html' with 'text' if you only want to add text.

      ```javascript
$('#slider1').anythingSlider({
  navigationFormatter : function(i, panel){
    return {
      'class'  : 'imatab',
      'data-x' : 'Header: ' + panel.find('h2').text(), // "Title#" is in the h2
      'title'  : 'This text will end up in a tooltip',
      'html'   : '<a class="panel' + i + '" href="#"><span>' + i + '</span></a>'
    };
  }
});
```

You'll end up with this HTML (comments added for clarity)

```html
<ul class="thumbNav">
  <!-- "tooltip" (from tooltipClass option) and "first" automatically added to the first tab -->
  <li class="imatab tooltip first" data-x="Header: Title1" title="This text will end up in a tooltip">
    <!-- added as HTML -->
    <a class="panel1 cur" href="#"><span>1</span></a>
  </li>
  <li class="imatab tooltip" data-x="Header: Title2" title="This text will end up in a tooltip">
    <a class="panel2" href="#"><span>2</span></a>
  </li>
  <li class="imatab tooltip" data-x="Header: Title3" title="This text will end up in a tooltip">
    <a class="panel3" href="#"><span>3</span></a>
  </li>
  <!-- "last" is automatically added to the last tab -->
  <li class="imatab tooltip last" data-x="Header: Title4" title="This text will end up in a tooltip">
    <a class="panel4" href="#"><span>4</span></a>
  </li>
</ul>
```

    • Second example of applying formatting to the tab (LI) directly. If you are familiar with how jQuery creates an object $('<li/>', { class : 'imatab' }); then you know you can apply even functions as well:

      ```javascript
$('#slider1').anythingSlider({
  navigationFormatter : function(i, panel){
    return {
      'text'  : 'panel #' + i,
      'click' : function(){ alert("AHHH I've been clicked"); }
    };
  }
});
```

You'll end up with this HTML (comments added for clarity)

```html
<ul class="thumbNav">
  <li class="tooltip first">panel #1</li>
  <li class="tooltip">panel #2</li>
  <li class="tooltip">panel #3</li>
  <li class="tooltip last">panel #4</li>
</ul>
```

navigationSize (false)

  • New in version 1.7.5.

  • Set this to the maximum number of visible navigation tabs.

  • Set it to false to disable this option.

  • This value must be a number (without quotes around it) to work properly.

  • Clicking on the left and right arrows surrounding the navigation tabs will scroll the navigation window by this number.

  • The text added to the left and right arrows is from the forwardText and backText option.

  • Arrow styling is found in the css as .anythingNavWindow

  • To scroll the navigation window to a specific navigation tab (set to the left side of the window), use this function:

    Scroll Navigation tabs AT ANY time

    // Change the # to make that navigation tab viewable (left side of the window)
$('#slider').data('AnythingSlider').navWindow(4);

    Scroll Navigation tabs WHILE slide animates

    $('#slider').anythingSlider({
  navigationSize : 5, // number of tabs to show
  onSlideBegin: function(e, slider) {
    slider.navWindow( slider.targetPage );
  }
});

    Scroll Navigation tabs AFTER slide completes

    $('#slider').anythingSlider({
  navigationSize : 5, // number of tabs to show
  onSlideComplete: function(slider) {
    slider.navWindow( slider.currentPage );
  }
});
Add a custom footer
Clone this wiki locally