Go to specific slide on click AnythingSlider

Question

I have a list of images and when one is clicked I access an anythingslider slideshow that is inside a fancybox popup.

HTML

<ul class="threeColGrid">
    <li>
        <div class="slideNumber">1</div>
        <div class="userStep">
            <img src="/upload/smb/support/folder/slide-1/howToStepOneImage.jpg#" onclick="$('a.magnifyStep').trigger('click'); return false;" alt="#" />
                <a class="magnifyStep" href="#userStepPopUp" ></a>
            <p>Downloaded&nbsp;<a title="#" href="/smb/support/how-to" target="_blank">software</a> from the website</p>
        </div>
    </li>
    <li>
        <div class="slideNumber">2</div>
        <div class="userStep">
            <img src="/upload/smb/support/folder/slide-2/howToStepOneImageTwo.jpg#" onclick="$('a.magnifyStep').trigger('click'); return false;" alt="#" />
                <a class="magnifyStep" href="#userStepPopUp" ></a>
            <p>Connect your old device to your PC or laptop using a USB cable</p>
        </div>
    </li>
    <li>
        <div class="slideNumber">3</div>
        <div class="userStep">
            <img src="/upload/smb/support/folder/slide-3/howToStepOneImageThree.jpg#" onclick="$('a.magnifyStep').trigger('click'); return false;" alt="#" />
                <a class="magnifyStep" href="#userStepPopUp" ></a>
            <p>Wait for software to recognise your device</p>
            <ul>
                <li>If your device is locked you may be asked to unlock your device&nbsp;</li>
                <li>If your device has not been registered previously you may need to set up your  options with your old device first</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="slideNumber">4</div>
        <div class="userStep">
            <img src="/upload/smb/support/how-to/folder/slide4/howToStepOneImageFour.jpg#" onclick="$('a.magnifyStep').trigger('click'); return false;" alt="#" />
                <a class="magnifyStep" href="#userStepPopUp" ></a>
            <p>From the device menu select Switch Devices</p>
        </div>
    </li>
    <li>
        <div class="slideNumber">5</div>
        <div class="userStep">
            <img src="/upload/smb/support/how-to/folder/slide5/howToStepOneImageFive.jpg#" onclick="$('a.magnifyStep').trigger('click'); return false;" alt="#" />
                <a class="magnifyStep" href="#userStepPopUp" ></a>
            <p>Select your old device.</p>
        </div>
    </li>
    <li>
        <div class="slideNumber">6</div>
        <div class="userStep">
            <img src="/upload/smb/support/how-to/folder/slide6/howToStepOneImageSix.jpg#" onclick="$('a.magnifyStep').trigger('click'); return false;" alt="#" />
                <a class="magnifyStep" href="#userStepPopUp" ></a>
            <p>Select the data you would like to transfer to the new device and click on next.</p>
        </div>
    </li>
</ul>

jQuery

$('#popUpslider').anythingSlider({
    buildArrows: true,
    buildStartStop: false,
    infiniteSlides: false,
    stopAtEnd: true,
    hashTags: true,
    easing: "swing"
});

This part works fine, but I now need to see a particular slide when one of the images is clicked (for example, clicking the 3rd image would open the fancybox window and show the 3rd slide inside anythingSlider).

Unfortunately I cant get this part to work. I'm using a CMS which dynamically populates the slider and add the hash to end of the image URL. Is there a way of targeting this hash, making the slider open at the clicked image?

Thanks in advance..

Answer 1

Brought to you directly from the documentation (Look for: Linking Directly To Slides from Static Links).

$("#slide-jump").click(function(e){
    $('.anythingSlider').anythingSlider(6);
    e.preventDefault();
});

http://css-tricks.com/examples/AnythingSlider/