Extending SlideDeck – Part 1: Controlling The Deck

SlideDeck is an awesome tool for displaying information on a web page, but there are times when you might want to exercise additional control over your deck. Our lead developer Dave has done a great job with the more technical side of SlideDeck by providing hooks that allow you to control the behavior of the decks on the page. In my next few posts, I’ll be outlining some of the cool tricks that can be done using SlideDeck’s built in controls and some auxiliary jQuery code.

Controlling Your SlideDecks

The main three functions that control SlideDeck are the “prev”, “next” and “goTo” commands. These functions allow you to add external controls to your SlideDeck, and command the deck to reveal a specific page of information on your command.

Typically when initializing your SlideDeck, you’ll run a command like this:

$('#slidedeck').slidedeck();

That’s fine for a default implementation, but if we need to access the properties of a deck once it has been created, we’ll need to store it in a variable for later. The easiest way to do this is to create a variable when creating the SlideDeck and assign the deck to the variable in one fell swoop!

var myDeck = $('#slidedeck').slidedeck();

Once the SlideDeck has been shoved into the ‘myDeck’ variable, we can pass commands to it. Writing some simple JavaScript that sends commands to ‘myDeck’ or asks it for information (such as the index of the current slide) is extremely simple and powerful.

I’ve put together a simple example page that shows how you can add Previous and Next buttons to a regular SlideDeck. In this example I have also added a command that will take you straight to a slide based on a clickable link.

Previous/Next Slide Buttons

The Previous/Next slide buttons are simply <span> elements in my example, but they could be images, links or even standard HTML buttons. I started by creating a DOM ready function in jQuery (This makes sure that the page has done its stuff before we do ours.) and adding a click event to each of the spans. When using jQuery, you do that like this:

$('#navigation .prev').click(function(event){
// Stuff to do when "Prev" is clicked.
myDeck.prev();
});
$('#navigation .next').click(function(event){
// Stuff to do when "Next" is clicked.
myDeck.next();
});

Note that we are invoking the prev() and next() methods of the myDeck variable (Which now has access to all of the options that a SlideDeck has.) This would not have done anything if we had not assigned the SlideDeck to “myDeck” in the previous section.

Just like that, your SlideDeck can be controlled by other elements on the page! These buttons could even be inside of each slide, creating a more familiar user experience for those who are used to clicking “Next” when they are done reading. The Algebraix Data SlideDeck uses this method.

Going To a Specific Slide Number

You’ll notice on the example page above that I’ve got two other links below the Prev/Next buttons. These are specially formed links that allow the deck to be commanded to instantly open that particular slide. Creating this interaction is a bit more complicated, but the concept is similar. To get started, we’ll need to create some HTML for the links to live in:

<p>Go to Slide 4 by clicking <a class="goToSlide" href="#4">Here</a></p>
<p>Go to Slide 2 by clicking <a class="goToSlide" href="#2">Here</a></p>

These links have a class of ‘goToSlide’ and that will allow us to target them. They also have a href value of ‘#[and the slide number we want them to go to]‘. The challenge here is two fold: we need to get the links that are responsible for handling SlideDeck “goTo navigation” and then figure out what slide they should go to.

The first step is to grab the links that have the ‘goToSlide’ class and make them clickable, while ignoring the fact that they are a link and their default behavior is to take you somewhere:

$('a.goToSlide').click(function(event){
// ignore the <a> tag's default behavior
event.preventDefault();
// Code to be executed when the link is clicked.
});

Then we need to add the goTo() command along with the index of the slide we would like to go to passed inside of the parentheses. To accomplish this, we use a regular expression or ‘Regex’ to take the link and strip away everything except the number at the end. The Regex below (which is part of a text replacement function) basically says “Find any character up to the ‘#’ symbol and replace it with nothing”. This logic will strip the link’s href value and leave just the slide number we are interested in.

$('a.goToSlide').click(function(event){
// ignore the <a> tag's default behavior
event.preventDefault();
// the regular expression below matches anything up to '#slide-', leaving just the number.
myDeck.goTo(this.href.replace(/.+#/,''));
});

Therefore, clicking a link that looks like this:

http://www.slidedeck.localhost/demo/deck_control.html#4

Communicates this to the myDeck variable:

myDeck.goTo(4);

Which makes the deck slide to the fourth slide.

The Significance Of All This

Although SlideDeck’s default interface of vertical spines is very intuitive and easy to use, there are a few users who would like to eliminate them altogether. We’ve added a new option to SlideDeck Pro in the latest release that adds the ‘hideSpines’ option and once the spines are gone, the above options become a great convenience and a bit of a necessity as well.

Related Reading:

• A full list of SlideDeck’s options and functions
• Release notes for version 1.1