[ Link to a particular slide of a jquery slider ]

So I'm using a very basic jquery slider (see a sample in action on this JSFiddle). I can click on links ("Slide A," "Slide B," "Slide C") on the page with the content slider to slide between the slides. What I would like to be able to do is allow a visitor to click on "Slide B" from another page on the website, which would link to the page containing the slider, and then show Slide B.

Perhaps something like some sort of hash tag or anchor in the link like this could trigger something in the Javascript on the page containing the content slider to make Slide B appear:

<a href='slidepage.php#slide2>Slide B</a>

The content slider script I'm using is incredibly simple & small, so I'm assuming there's something basic I could add to the script that would recognize a click through to pull a slide:

$(document).ready(function (){
$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });
});    

});

Again, see the JSFiddle in action here - feel free to fork and help a guy out!

Thanks in advance... Chris

Answer 1

$(document).ready(function (){
  ...
  your old code
  ...

  if(window.location.hash) {
    // Fragment exists
    var myhash = window.location.hash.substring(1);
    $("a[rel='" + myhash + "']").click();
  }
});

Then use fragments to link to a slide: http://yourhost.com/path/to/page.html#2

Update: Removed # from fragment before using it in the selector.