FOLLOW US

Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

Extending SlideDeck – Part 1: Controlling The Deck

By On March 19, 201025 Comments

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.
Example SlideDeck Controls

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:

Go to Slide 4 by clicking Here

Go to Slide 2 by clicking Here

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

Reblog this post [with Zemanta]

Leave a Reply

Comments (25) Responses

  1.  

    Ken

    So far i’ve figured out little on how to use the custom CSS and have the basic design of what i’d like. I’m trying to get a post slider that shows an image in the left 35% of the deck and the caption filling the other 65% of the slide. I’ve achieved 50/50 caption/image using:

    .slidedeck dd .sd2-slide-background { right: 50%;}
    .sd2-light .slidedeck dd {background: #d8f3dc}
    .sd2-title-light .sd-node-title-box { background: #d8f3dc; }

    and have changed the background color to match my site. The first line effects the image but I need to shift the caption left to the 65% mark. Anyone know the CSS for this?

  2.  

    James

    “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.”

    This link to the Algebraix page is not leading to a current page. I would like to know more about buttons inside of slides. Do you have anything else on that?

    Thank you.

  3.  

    Shan Bahadur Khan

    Hi,
    Its very nice menu bar option to use on website.
    I have just a small questions that if i dont want to active the “CLICK” option on all decks, is it possible ?. For example if mouseover to Deck1, it should open the correspondence slide instead if click on it and then it would open.

    I hope, anybody will help me.
    Appreciate it.
    Thanks.

    •  

      Jamie

      You can do this, however we don’t recommend making the slides animate on hover as it’s a strange user interaction. It can also be a lot of work to disable the clicking.

  4.  

    max hodges

    can’t get this to work in WordPress after 6 solid hours of trying. can i pay someone to help with this?

  5.  

    Adam

    Guys, nice plugin. Doing the research now as proof of concept for a client. I haven’t been able to get the ‘go to slide’ function working. here’s what I’ve got:

    In the ‘head’

    $('a.goToSlide').click(function(event){
    event.preventDefault();
    myDeck.goTo(this.href.replace(/.+#/,''));
    });

    and the HTML:


    Go to Slide 4 by clicking Here

    Go to Slide 2 by clicking Here

    Of course I have it initialized, as it works in its default mode.

    So, what am I missing here? Is it the myDeck portion? Do I need to name mine something else? And if so, where?

    •  

      Jamie

      Hi Adam,
      We can’t tell much without seeing your code, but the myDeck part is important. The real trick happens in code samples #1 and #2 in the post. Where we assign the deck to a variable so we can run commands on it later. The best thing to do is to download the example file to your computer and try it out there.

      For further discussion/help the Support Forum is really the best place to get a conversation going.

  6.  

    KD

    For controlling slidedeck in wordpress, did a small modification to slidedeck.php:

    $slidedeck_footer_scripts .= ‘var slidedeck_’.$slidedeck[‘id’].’ = jQuery( \’#’ . $slidedeck_uid . ‘\’ ).slidedeck( ‘ . $slidedeck_options_json . ‘ );Powered by SlideDeck WordPress Slider‘;

    Notice the slidedeck_ being set.

    Added a previous and next text and added an onclick handler as slidedeck_.prev() and slidedeck_.next()

    Works like a charm.

    — KD

  7. Pingback: The SlideDeck Survival Guide | Web Slider | SlideDeck Web Slider

  8. Pingback: SlideDeck how-to tutorial paginated slide loop code snippet | SlideDeck Web Slider

  9.  

    James

    alright thanks a lot! =)

  10.  

    Chuck

    Hi James. If you would like to remove the SD bug, please purchase the Pro version here.

    You wouldn’t want to link the titles on the slide spine titles since they navigate to each slide. However, you can link any content within your slides.

  11.  

    James

    Hi, Can I take out the small button “SD” at the bottom right of this plugin?

    and, Is that possible that the title of each Slide Title link to my pages.

    For example, for Page 1, when I click it I can get directed to my Abous Me page.

    Anyway I can do for this?

    Thanks

  12.  

    Jamie

    Hi Jon,
    I’d need to see an example page to troubleshoot that issue further.
    You should create a topic in GetSatisfaction http://getsatisfaction.com/slidedeck and we can examine it further from there.

  13.  

    Jon

    Very many thanks for sharing this, it looks fantastic and I’m trying to implement it into one of my sites.

    The only problem is that for me in IE, it completely messes up the Slide Deck when I have your code in. I even tried copying and pasting directly, it works fine on all other browsers except IE.

    Any suggestions as to why this is happening? I have tried commenting out the code you supplied and then whey I refresh, everything is fine again.

    It would be a real shame.

    Thanks again.

  14.  

    Jamie Hamel-Smith

    Hi Cassandra, Carsten & Henrique,
    For specific bug reports and feature requests, the best place to post is in our feedback forum: http://getsatisfaction.com/slidedeck

    Questions and bug reports tend to get lost in the comments of these posts and if the question is posted in the forum, it’s more likely to get the attention it deserves.

    Cassandra & Henrique:
    For now, this tutorial is really intended for use on the standard version of SlideDeck. The WordPress Plugin version is not an idea environment for adding these sorts of code-extensions, but we do have plans to improve this in the future.

  15.  

    Henrique

    Hi Jamie,

    I have the same issue as Carsten: SlideDeck expands my pages up to 10.000 px! I wonder if the Pro version also has this problem. And I’d apreciate to know if there is a (rather simple) way of building a slide controler into a wordpress page. I’d need that. Can it be done? Are you working on it? Shall I wait? Thanks a lot!

  16.  

    Carsten

    Hi Jamie

    I will try this out and see how it goes, but sofar thank you for the response.

    Now that I am already here I have another question.

    It is my experience that the tiny Icon that is found in the freeware version creates a problem in the css, in such sense that it expands the actual page in the vertical axis.
    When it does this is positions it self at the very bottom of my page.

    I have no link for yoy to see this but will try to provide this during the upcoming week.

    But have you heard of this problem from ofter users ?

    //Carsten – Denmark

  17.  

    Cassandra

    Thanks for the feedback Jamie. I’ve found the necessary script, but I’m not sure what file within the plugin to place it in.

    Appreciate the help.

  18.  

    Jamie Hamel-Smith

    Hi Carsten & Cassandra,
    I appreciate the feedback and I’ll try to help as best as I can.

    Carsten,
    What you need is the start slide option. When creating a SlideDeck, there are several options you can pass into the command to alter the behavior of the deck. What it sounds like you need is for your SlideDeck to start on slide #4 when your visitors get to the second page of your site. The documentation to do this is located here: http://www.slidedeck.com/usage-documentation#usage_available_options
    Third down in the list is the start parameter. You can pass {start: 4} to the slidedeck function to have your deck start on slide #4.

    Cassandra,
    To add the previous and next buttons does require some knowledge of code, and there’s a link to a working example here: http://www.slidedeck.com/demo/deck_control.html
    If you view the source of the code on that page, everything you need is right there. The necessary code to make this work exists from line 71 to line 89 in the example. For WordPress however, we have not yet created a way to do this.

  19.  

    Cassandra

    What would I Have to go about editing in terms of code if I’d like to add the Previous/Next Slide buttons when working with the WordPress plugin?
    Appreciate the help!

  20.  

    Carsten

    Hi there

    This is very nice indeed, but I need to know if it is possible to do the following:

    I my upcoming website, I would like to use SlideDeck but when I click the a href tag on index.html I would like to jump to page2.html and here set deck 4 as the active state upon entering page2.html.

    Can this be done in some way?

    //Carsten – Denmark

  21. Pingback: Extending SlideDeck – Part 2: Remembering The Current Slide Using JavaScript