Deep linking with flexslider

Deep linking is the ability to link directly to content on a page, and deep linking with a slider means you want to open a page and have a specific slide already loaded in your slider. Flexslider has some very useful functions that will allow us to easily update the URL path with the ID of your slide and load your slide in the frame with just a link.

Flexslider has a number of options which you can see here but we are going to focus on the “before” function which runs as each slide is changing and the “startAt” function which tells flexslider which slide to load to start.

To start, you must know that each slide’s containing element must have a unique ID set. For instance, I use an unordered list so I would have something like  <li class="myslide" id="Slide1">......</li> Each slide’s ID should be unique.

First: update the url path every time a slide changes

We are going to update the browser path with the ID of the slide and manipulate the browser history using history.pushState() and since we want to do it every time a slide changes, we will do it using the “before” function.

If you place just this code in your flexslider script you will now see your URLs updating with every slide change and should look like domain.com/#Slide1. We are halfway there!

Next: set the “startAt” point based on the url deep linked from

Since that only updates the current browser’s history, we need to do some extra work for people who are clicking through from one of your URLs to a slide. We want to tell flexslider to open a specific slide based what exists after the #.

This little snippet still needs work, as you can see. It will not work on sliders with more than 9 slides because of how I am getting the index value of the slide. I am completely open to suggestions regarding the best way to query the path to get the slide index. For now, this does work and I felt it worth sharing with you.

 

The_Idiot

About Lindsay

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.

9 thoughts on “Deep linking with flexslider

  1. […] How to update the url path for each slide for deep linking with flexslider […]

  2. Jack

    Hi there,

    Thanks for this code, it has helped a lot.

    The one query I have is that it doesn’t work in IE8 as IE8 doesn’t support history.pushState. Do you happen to have a fix/workaround for this?

    Thanks,

    Jack

  3. Thanks for the code, I can’t seem to get the second part to work though, would that be placed within the flexslider script as well?

    • Lindsay

      Nope the second chunk of code I put at the beginning of my $(document).ready code before I initialize the flexslider. That code basically gets the slide number from the URL (if it exists) and passes that to the flexslider as an arguement for which slide to automatically scroll too.

      Maybe I will put it all together in a download if you’re having issues with it.

  4. Thanks for the reply. Sorry I’m really trying to get this to work… I have my id set to unique ones like this:

    <li id=”family”>PRIVATE FAMILY ESTATES</li>

    but when I add your script it seems to not do anything to my flex slider… this is the original code I am using:

    Here’s the NEW code I am tying to use including the scripts … but it doesn’t seem to make a difference or append the URL…

     

    Can you possibly post a link to an example? I would be greatly interested to get this to work.

     

     

     

    • Idiot_Girl

      I will put together a jsfiddle for you with working code that you can take apart so you can see the code and see it working.

      Until I do that, a couple things:

      Don’t put window.load after document.ready. You need one or the other. What those do is just tell the code when to execute. Window.load will tell it to happen right when the window is loaded and document.ready tells it to execute as soon as all of the HTML elements are loaded, which is typically when you want to initiate any JavaScript that requires a DOM object (HTML element) to manipulate. So do your flexslider inside of a $(document).ready only. Remove the $(window).load all together.

      From there I might need to see your actual markup you are working with. That might help me troubleshoot your issue as well. You are welcome to either copy your HTML markup to a gist or jsfiddle and paste a link to it here OR you can just paste a link to the domain where I can see the issue live online.

  5. Thanks again for the reply  – here’s a dev site of what I’m trying to do… I’ve removed the script call I was trying to do yesterday since it was wrong anyway.

    http://dev.jomotionnetwork.com/7stones/burial-options/

    I’ve changed the jquery load per your suggestion, it was done that old way because I was trying to find a reason why the URL would not append and thought it might have been conflicting scripts.

    I’m very very appreciative that you are willing to take a look.  Please let me know if there is any clarity I can provide…. essentially what I want to do is link to one of the slides, so in that example, it would be http://dev.jomotionnetwork.com/7stones/burial-options/#green (as that’s the id associated with the slide).

    THANKS.

     

  6. Hello!  I’m getting closer (kind of)!…. I fiddled with it a bit tonight, and now I can get # to appear in the browser (but it’s not reflecting the id of what I’ve placed for the slider).

    Example: http://www.discoversevenstones.com/immediate-needs/

    Here’s the new code I’m using:

     

     

    When I add Part 2 from your example, it still breaks the slider though… not sure why.

     

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">