单击AnythingSlider转到特定幻灯片

Question

我有一个图像列表，当单击其中一个时，我会访问位于花式框弹出窗口内的任何幻灯片。

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"
});

这部分工作正常，但我现在需要在单击其中一张图片时查看特定幻灯片（例如，单击第三张图片会打开 fancybox 窗口并在任何滑动条中显示第三张幻灯片）。

很遗憾，我无法让这部分工作。我正在使用动态填充滑块并将哈希添加到图像 URL 的末尾的 CMS。有没有办法针对这个哈希值，使滑块在点击的图像处打开？

提前谢谢..

Answer 1

我没有任何使用AnythingSlider 的经验，但是根据the documentation，您可以在初始化时使用startPanel 选项。因此，如果您希望它打开到第三张幻灯片，请使用startPanel:3。

Answer 2

直接从documentation 带给您（查找：从静态链接直接链接到幻灯片）。

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

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