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.

SlideDeck.com Home Page SlideDeck Code Example

By On December 27, 20108 Comments

Hey guys, we’ve received a lot of requests about how we did some of the things we did on the SlideDeck that sits on the home page of SlideDeck.com, namely the custom navigation for the vertical slides. We’ve been packaging this code example with SlideDeck PRO for a while now, but its been a point of confusion for a lot of people on how to get this navigation working in anything but the second slide – until now.

With our recent release of the SlideDeck PRO JavaScript Library v1.2.0 we can now take advantage of the new vertical slide before() and complete() callback functions so the custom navigation can be used on any slide with no code changes from what we’ve already written. I’m going to show the whole initiation script here first and then break it apart piece by piece. If you want to follow along, I have the file ZIPped up and ready for download at the end of the post.

With a small tweak to the CSS, taking advantage of the :hover pseudo-selector we are able to show the buttons only when the mouse cursor is hovering over the slide:

.skin-slidedeck dl.slidedeck dd.slide:hover a.vertical-prev-next { display: block; }

This line of CSS of course should go below the .skin-slidedeck dl.slidedeck a.vertical-prev-next CSS definition (around line 383 in the CSS file that comes with the ZIP at the end of this article).

A bulk of the changes to make all this magic work though happen in the JavaScript. Here’s what we did to make the buttons work:

$('.skin-slidedeck dl.slidedeck').slidedeck({
    scroll: 'stop'
}).loaded(function(){
    $('.skin-slidedeck .slide .verticalSlideNav').each(function(){
        $(this).parents('dd.slide').prevAll('dt.spine:first').append(this);
    });
}).vertical({
    before: function(deck){
        if(deck.current == 0){
            $(deck.navChildren.context).find('a.vertical-prev-next.previous').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.previous')[0].style.display = "";
        }
        if(deck.current == (deck.slides.length - 1)){
            $(deck.navChildren.context).find('a.vertical-prev-next.next').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.next')[0].style.display = "";
        }
    },
    complete: function(deck){
        if(deck.current == 0){
            $(deck.navChildren.context).find('a.vertical-prev-next.previous').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.previous')[0].style.display = "";
        }
        if(deck.current == (deck.slides.length - 1)){
            $(deck.navChildren.context).find('a.vertical-prev-next.next').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.next')[0].style.display = "";
        }
    }
});

$('.skin-slidedeck a.vertical-prev-next').bind('click', function(event){
    event.preventDefault();
    switch(this.href.split('#')[1]){
        case "previous":
            $('.skin-slidedeck .slidedeck').slidedeck().vertical().prev();
        break;
        case "next":
            $('.skin-slidedeck .slidedeck').slidedeck().vertical().next();
        break;
    }
});

$('.skin-slidedeck dl.slidedeck a.vertical-prev-next.previous').hide();

Make the SlideDeck

$('.skin-slidedeck dl.slidedeck').slidedeck({
    scroll: 'stop'
})

This command here just initiates the SlideDeck and sets the scroll option to ‘stop’ meaning that when the user uses the mouse scroll wheel to navigate the SlideDeck it will stop the page from scrolling.

Move the vertical navigation from inside the slide to on top of the spine

.loaded(function(){
    $('.skin-slidedeck .slide .verticalSlideNav').each(function(){
        $(this).parents('dd.slide').prevAll('dt.spine:first').append(this);
    });
})

Here we take advantage of the loaded() command which runs after a SlideDeck is finished loading. This command will find any vertical slide navigation elements and move them out of the slides they were in and into the spine elements of the slide they belong to.

Setup the previous/next vertical slide show/hide button interaction

vertical({
    before: function(deck){
        if(deck.current == 0){
            $(deck.navChildren.context).find('a.vertical-prev-next.previous').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.previous')[0].style.display = "";
        }
        if(deck.current == (deck.slides.length - 1)){
            $(deck.navChildren.context).find('a.vertical-prev-next.next').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.next')[0].style.display = "";
        }
    },
    complete: function(deck){
        if(deck.current == 0){
            $(deck.navChildren.context).find('a.vertical-prev-next.previous').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.previous')[0].style.display = "";
        }
        if(deck.current == (deck.slides.length - 1)){
            $(deck.navChildren.context).find('a.vertical-prev-next.next').hide();
        } else {
            $(deck.navChildren.context).find('a.vertical-prev-next.next')[0].style.display = "";
        }
    }
});

By taking advantage of the before() and complete() callback functions on vertical slides we can have the interface react to the user after they have moved from one vertical slide to the other. The callback functions for vertical slides are implemented just like the callback functions for horizontal slides – passed in to the vertical() command as an anonymous object when you initiate the SlideDeck. This whole script here will setup any previous/next buttons that we have added to a horizontal slide containing vertical slides to show or hide the appropriate buttons depending on which vertical slide you are seeing. Basically, the previous button will be hidden if you are on the first vertical slide (since there is no slide to go previous to) and correspondingly the next button will be hidden if you are on the last vertical slide since there is no next vertical slide to go to. Lets break this down a little more:

if(deck.current == 0){
    $(deck.navChildren.context).find('a.vertical-prev-next.previous').hide();
} else {
    $(deck.navChildren.context).find('a.vertical-prev-next.previous')[0].style.display = "";
}

Here we run a conditional to see if the current vertical slide being shown is the first vertical slide –deck.current == 0. If we are on the first vertical slide, there is no need to display the previous button, so we tell the SlideDeck to find the previous button on the current slide being shown and hide it – $(deck.navChildren.context).find('a.vertical-prev-next.previous').hide();.

If however the conditional fails, this means that we are not on the first vertical slide and should of course show the previous button. Because of the way that we are showing the buttons via the CSS snippet mentioned earlier, we need to just remove the display definition that was hiding the button (as opposed to just telling the element to show() via jQuery’s methods). This will allow the CSS in the stylesheet to control the visibility.

if(deck.current == (deck.slides.length - 1)){
    $(deck.navChildren.context).find('a.vertical-prev-next.next').hide();
} else {
    $(deck.navChildren.context).find('a.vertical-prev-next.next')[0].style.display = "";
}

This second conditional is almost exactly like the first, but here we are checking for the conditions that relate to the next button instead of the previous. Here we look for the current vertical slide being shown as the last vertical slide – deck.current = (deck.slides.length - 1). The deck.slides JavaScript object is an Array of all the vertical slides, so we just find out how many there are and subtract one (since the length is 1 based and the index we’re trying to match is 0 based). If the conditional passes, we hide the next button because we don’t have a “next” vertical slide to go to, otherwise we remove the display definition so it will be visible.

Make those buttons do something!

$('.skin-slidedeck a.vertical-prev-next').bind('click', function(event){
    event.preventDefault();
    switch(this.href.split('#')[1]){
        case "previous":
            $('.skin-slidedeck .slidedeck').slidedeck().vertical().prev();
        break;
        case "next":
            $('.skin-slidedeck .slidedeck').slidedeck().vertical().next();
        break;
    }
});

OK, so now that we’ve initiated the SlideDeck, we need to get those previous and next buttons doing something besides sitting there looking pretty. We’re doing a basic jQuery bind() command to bind the click event. This can also just be written with the click() command too if you want some more brevity, I prefer bind() though since click() is just an unnecessary, middleman shortcut to the bind() command.

We assign the click event to the previous and the next button at the same time and then in the event we do a simple check to see if we’re looking at the previous or the next button. The switch() command looks at the href attribute of the previous and next buttons. We run a split() command on the value of the href attribute because even though we write it out as href="#previous", it always returns as the entire URL – i.e. http://www.slidedeck.com/#previous. We only want that last chunk there, so we split it in two and take the second of the two – previous or next and run either the prev() command or the next() commands on the current slide’s vertical SlideDeck. The SlideDeck library was programmed to intelligently run the next() and prev() commands on the current slide’s vertical SlideDeck only, so you’ll only need to write this code once, even if you have a vertical SlideDeck on every slide of your SlideDeck!

Hide the previous buttons!

$('.skin-slidedeck dl.slidedeck a.vertical-prev-next.previous').hide();

Since we’re going to be starting on slide 1 of all the vertical slides, we don’t want the previous buttons to show up, so we run a jQuery hide() command on them.

Want to implement this and play around with the code on your own? Grab the packaged up demo in the ZIP file listed below. To run the example code, remember that you will need to copy your slidedeck.jquery.js file from your copy of SlideDeck PRO into the same folder as the HTML file contained in the download or it won’t work. This demo only works with SlideDeck PRO.

Download the Home Page SlideDeck code example

Leave a Reply

Comments (8) Responses

  1.  

    Kurt

    I tried getting this all to work in my WordPress site with the developer version. No Dice. I said screw it, since you say there is a skin that will match exactly what I want I went ahead and purchased the plugin. There is no such skin available that I can see. This shouldn’t be so difficult to manage.

    •  

      Jason

      Hey Kurt

      Thanks for the heads-up – we should be getting to your support ticket today. As for the SlideDeck Classic Lens in the WordPress plugin, that’s included at the Professional and Developer tiers. Now that you’ve upgraded to the Professional tier, you should have access to it. If you have any other questions, just shoot ’em over to us in the support forum, and one of our friendly Web-hobbits will take a look – http://dtelepathy.zendesk.com/

  2.  

    karthik

    I want to know, the button’s which is showing the number of items in a particular verticular slider from where it is displaying. In the above image for 2nd slider it has 5 items which you are showing through that buttons ,similarly i want to show if it has one item then it should show one button.

    •  

      Jamie

      You should be able to accomplish this effect by creating a single vertical slide in each horizontal slide. It’s a bit of extra markup, but it’s worth experimenting with.

  3.  

    Sammet

    Hi Jaime,

    What do you mean by “The code above is just HTML/CSS/JavaScript and isn’t specific to WordPress”

    I do not understand…

    Does it work or not with WordPress, or does it only work with external html editor such as Dreamweaver?

    Anxious for answer,

    Sammet

    •  

      Jamie

      What do you mean by “The code above is just HTML/CSS/JavaScript and isn’t specific to WordPress”

      I do not understand…

      Does it work or not with WordPress, or does it only work with external html editor such as Dreamweaver?

      Anxious for answer,

      Sammet

      The code above does not work with WordPress, however we do have a skin for the WordPress Plugin that looks just like the above example.

  4.  

    RK

    How do I get my customization of this file into my wordpress installation

    •  

      Jamie

      Hi RK,
      The code above is just HTML/CSS/JavaScript and isn’t specific to WordPress. Having said that, the latest version of the WordPress plugin does actually have access to this style of deck via a skin called SlideDeck.com Classic