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

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

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

提前致谢..

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/

单击AnythingSlider转到特定幻灯片

2 个答案: