0

我有一个图像列表，当单击一个图像时，我会访问一个位于fancybox 弹出窗口内的anyslider 幻灯片。

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 窗口并在anythingSlider 中显示第三个幻灯片）。

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

提前致谢..

4

2 回答 2

2

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

于 2012-08-30T15:40:28.890 回答
1

直接从文档中提供给您（查找：从静态链接直接链接到幻灯片）。

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

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

于 2012-08-30T15:39:06.893 回答