Slidedeck for WordPress – linking to slides

So after buying Slidedeck Pro for a clients site and shelling out the $99 that they ask I realized, like a lot of other people judging from the support forum, that the WordPress version isn’t nearly as easily customizable as the Slidedeck site leads one to believe. I think it’s really bad form how misleading their advertising is, but that’s another story altogether.

I needed to link to a specific slide on a page from a different page altogether. All the info I could find was on how to do this with the non-WP version and I got no real help on the Slidedeck support forum. I needed to use the WP version because my client will be adding the content and I can’t expect them to add content in the HTML so I needed to make use of WP’s WYSIWYG editor.

I thought I’d share how I managed to get this working since it seemed like a lot of other people have been trying to figure the same thing.

 

What I was trying to achieve

I have custom menus setup in the WP theme I created and I wanted each drop-down menu item to link to the corresponding slide on the correct page.

 

How I got it working

Firstly, I obviously added the slides to Slidedeck for WP.

Next I added the menu items in the WP back-end giving each one an anchor that corresponded to the slide number (ie. …/about/#3)

Then the most difficult part (which turned out not to be that difficult after all) – adding the JavaScript code. I needed to get the anchor from the current page URL, remove the # symbol, and pass the result to the Slidedeck API’s goTo() method and get the code to run when the page loads. You can see the code below:

<script>
$(document).ready(function(){
      jQuery('.slidedeck').slidedeck().goTo(document.location.hash.replace("#",""));
});
</script>
									

I put the code in the head section of my header.php file so it loads on every page. I did try it in an external .js file, but that didn’t work. Remember to use ‘jQuery’ (no quotation marks) instead of the $ symbol because of the way WP calls jQuery.

Linking to the page with the anchor in the URL from an external site will also open Slidedeck to the correct slide which is pretty awesome.

I hope this helps you out if you are trying to do something similar. I have no need to link to vertical slides within horizontal ones yet, but if I do I will post an update or follow-up post. Please note that I am by no means a JavaScript guy so there may well be bad practices employed here and I don’t intend this to be a tutorial of any kind – just merely saying what worked for me. Unfortunately I can’t post a link to the site this is on because it’s not live yet.

13 replies
  1. TDR
    TDR says:

    Shane:
    How timely; I have the same problem. I was planning to contact SlideDeck and did a Google search coming across your article. I would not have come up with your idea. I was stalled after trying the traditional <a href… method. Oddly, a couple of weeks ago I was able to use a link to get to the WordPress page and hitting the back key on my mouse brought me back to the slide. The back button on my browser just brought me back to the page where the SlideDeck slider was at. But I can't do it now. Maybe the SlideDeck update took it away; just a guess. Look forward to getting your idea implemented. Thanks, TDR

  2. TDR
    TDR says:

    Shane:
    FYI, been working on it but right now I’m brought back to the 1st slide on the page where the SlideDeck is at. Must have something to do with my use of vertical slides (i.e. Welcome slide, a group of 5 verticals, and another group of 5 verticals. Maybe you’ll have a chance to consider how to do it. Maybe I’m missing something; can’t say for sure. Anyway, thanks for the effort, TDR

  3. Shane
    Shane says:

    Hey TDR,

    I am busy trying to figure out how to get to vert slides from the menu items so I will let you know here if I get it sorted.
    Shane

  4. Shane
    Shane says:

    Ok, so here is what is working for me in the head of header.php:

    $(document).ready(function(){
    var hash = document.location.hash;
    if(hash){
    hash = hash.split(‘#’)[1];
    var slideIndex = hash.split(‘-‘);
    if(slideIndex.length > 1){
    // horiz & vert
    jQuery(‘.slidedeck’).slidedeck().goToVertical(slideIndex[1],slideIndex[0]);
    }else{
    // horiz only
    jQuery(‘.slidedeck’).slidedeck().goTo(slideIndex[0]);
    }
    }
    });

    Hope this helps!

  5. annalivia
    annalivia says:

    hi shane,
    i’m trying your fix but not getting anywhere i’m afraid. I’m using the Pro version of Slidedeck and I have the script below in the header:

    $(document).ready(function(){
    jQuery(‘.slidedeck’).slidedeck().goTo(document.location.hash.replace(“#”,””));
    });

    And I have this as the link code..

    Go to Slide 2 by clicking slide 3

    But nothing happens… i know i’m doing something wrong. Please help!!!
    Could you have a look? Would really appreciate it. I have a test link at

    http://www.liviah.com/tiger/menus

  6. Shane
    Shane says:

    Hey,

    I took a look and I think the problem is 2 fold. Firstly, your link needs to be an absolute link (ie. http://liviah.com/tiger/menus/#3) instead of just the anchor. Also the fix I used doesn’t work when linking from the same page as the slidedeck, only from another page. It’s not ideal, I know. I have been trying to figure out how to get Javascript to reload the page when the link is clicked, but so far I haven’t found a way.

    If you just want to go to a slide from the page you are on I think this could help you out – http://www.dtelepathy.com/blog/secrets/extending-slidedeck-controlling-the-slide-deck

    Hope that helps!

  7. heidi
    heidi says:

    Hello. Stupid qquestion. Do i have to do something with the code in your example or do i just paste it as it is? That didnt work u see..
    Ill be glad for an answer on this.
    Cheers

  8. heidi
    heidi says:

    Thank you for answer!

    Yes – or i tryed it as a link on a different page then the page the slider accures on. I used the link to the page with the slider and and then i added /#3 (example) So i turned op with “www.domain.com/pagewithslider/#3” as the link

    and i added the code bellow in my header of course. (header.php)

    $(document).ready(function(){
    jQuery(‘.slidedeck’).slidedeck().goTo(document.location.hash.replace(“#”,””));
    });

    Any clues?

  9. Shane
    Shane says:

    Hey, I’m not sure what the problem could be then. Have you put the javascript code inside of script tags? –
    Can I see your page of code somewhere?

  10. Shane
    Shane says:

    I thought you would have it in script tags, but I thought it was worth asking 🙂
    Have you tried changing your wordpress permalinks to something like /%postname% so you don’t have the page ID’s etc in the url? I’m not sure if that will help, but it might be worth trying. Also I see the slidedeck is set to auto scroll through the slides. I’m not sure if that has anything to do with it not working?
    I will try to take a look at the code when I have a chance.

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *