Jquery 点击任意滑块，转到特定幻灯片

我有一个图像列表，当点击其中一个时，我会访问fancybox弹出窗口中的anythingslider幻灯片

HTML

这部分工作正常，但我现在需要在单击其中一个图像时查看特定幻灯片（例如，单击第三个图像将打开fancybox窗口，并在anythingSlider中显示第三个幻灯片）

不幸的是，我不能让这部分工作。我正在使用一个CMS动态填充滑块，并将哈希添加到图像URL的末尾。有没有一种方法可以针对这个散列，使滑块在单击的图像上打开

---

提前感谢。

直接从中带来（查找：从静态链接直接链接到幻灯片）

---

直接从中获取（查找：从静态链接直接链接到幻灯片）

---

我没有任何使用任何东西滑块的经验，但根据，您可以在初始化时使用

startPanel

选项。因此，如果您希望它打开到第三张幻灯片，请使用

startPanel:3

我没有任何使用任何东西滑块的经验，但根据，您可以在初始化时使用

startPanel

选项。因此，如果希望打开第三张幻灯片，请使用

startPanel:3

第三张幻灯片不需要打开（取决于单击的图像）。单击幻灯片时，将变量设置为该幻灯片编号，然后使用该变量，而不是

3

+1我认为使用

startPanel

将是实现这一点的方法，但您必须找到一种方法来定位正确的幻灯片，可能使用单击图像的类名或alt名：

startPanel:$（this）.attr（'alt'））

图像alt中有幻灯片的地方

不幸的是，这些方法目前对我不起作用。我认为这可能与fancybox被绑定到点击事件有关，对我来说，anythingslider幻灯片只是在第一张幻灯片上打开，或是在最后一张点击的幻灯片上重新打开。@Mottie一位同事建议了一种稍微不同的方法，效果非常好<代码>$（“.userStep a”）。单击（函数（e）{var slideNumber=$（this）。查找（'img'）。attr（'alt'）；$（'popuplider'）。anythingSlider（slideNumber）；e.preventDefault（）；}）这不是需要打开的第三张幻灯片（取决于单击的图像）。当您单击幻灯片时，将一个变量设置为该幻灯片编号，然后使用该变量而不是

3

+1我认为使用

startPanel

可以做到这一点，但您必须找到一种方法来定位正确的幻灯片，可能使用单击图像的类名或alt名称：

startPanel:$（this）.attr（'alt'）

，其中图像alt具有幻灯片

，不幸的是，这些方法目前不适用于我。我认为这可能与fancybox被绑定到点击事件有关，对我来说，anythingslider幻灯片只是在第一张幻灯片上打开，或是在最后一张点击的幻灯片上重新打开。@Mottie一位同事建议了一种稍微不同的方法，效果非常好<代码>$（“.userStep a”）。单击（函数（e）{var slideNumber=$（this）。查找（'img'）。attr（'alt'）；$（'popuplider'）。anythingSlider（slideNumber）；e.preventDefault（）；}）

<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>

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

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