Hash URL navigation with a Flexslider

Question

I'm building a website that makes use of a flexslider, but I want to implement some URL hash navigation. Based on the hash of the URL, i plan on getting the index of the slide that i want to display and the closest I came is by looking at the code for the manual navigation, where the index of the clicked element equals the index of the slide:

slider.controlNav.live(eventType, function(event) {
   event.preventDefault();
   var $this = $(this),
   target = slider.controlNav.index($this);

   if (!$this.hasClass(namespace + 'active')) {
      (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
      slider.flexAnimate(target, vars.pauseOnAction);
    }
});

So I tried adjusting the principle and putting it in the start property of the Flexslider:

$('.flexslider').flexslider({   
     start: function(slider) {
         var target = 2; // Set to test integer

          (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
          slider.flexAnimate(target);
     }
});

Getting the corresponding integer based on the hash in the URL shouldn't be a problem, but i cant seem to get the slide i need with a test integer.

Does anyone have any experience with URL hash's and the Flexslider?

Answer 1

I was searching for the same answer, and figured it out, so here it is in case you, or someone else, needs it. As long as we're just talking number values, it's pretty simple.

$(window).load(function(){

    //set some variables for calculating the hash

    var index = 0, hash = window.location.hash;

    //via malsup (Cycle plugin), calculates the hash value

    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1;
    }

    $(".flexslider").flexslider({
        startAt: index, //now foo.html#3 will load item 3
        after:function(slider){
            window.location.hash = slider.currentSlide+1;
            //now when you navigate, your location updates in the URL
        }
    })
})

That should do the trick

Answer 2

I came across this question when looking for a solution to jump to a slide in FlexSlider using the anchor part (hash) of a URL. However, Andrew's answer did not work for me, possibly because at the time of writing this, FlexSlider is now version 2.6.4 and requires jQuery version 1.7.0+.

My solution borrows the first part of Andrew's answer, for getting the number out of the URL, and then uses a built-in helper string from FlexSlider 2.6.4 for the rest:

$(window).on('load', function () {

  // Get number from hash part of URL
  var index = 0, hash = window.location.hash;
  if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1;
  }

  // Initialise a basic FlexSlider
  $('.flexslider').flexslider({
  animation: "slide"
  });

  // Pass index into helper string to jump to specific slide
  $('.flexslider').flexslider(index); 
}

Hope this helps anyone looking for a solution on later versions of FlexSlider :)