Question

我有一个砌体缩略图库，缩略图链接到jQuery Cycle幻灯片。我想这样做，当你点击缩略图时，它会转到以该缩略图开始的幻灯片。我正在尝试Cycle的“startinslide”选项。此外，该网站是使用Wordpress构建的。

这是在我的缩略图库模板中：

        <div class="m_item">
        <a href="http://paraboladesignstudio.ipage.com/yahaira/fashion/fashion-slideshow/?thumb=2">
            <img src="<?php echo $image['url'];?>" title="<?php echo $image['title'];?>" alt="<?php echo $image['alt']; ?>">
        </a>
        </div>

这在我的幻灯片模板中：

<script>
$(.slideshow).cycle({startingSlide: <?php echo $_GET["thumb"] ?>})
</script>

目前，代码似乎没有做任何事情，而且您在幻灯片中点击的任何缩略图都是从第一张幻灯片开始的。

感谢您的帮助。

Answer 1

最简单的解决方案是使用Cycle2。它允许您在html中的slide元素的数据属性中声明幻灯片选项。您的幻灯片标记看起来如下所示：

<div class="cycle-slideshow"
    data-cycle-starting-slide="<?php echo $_GET["thumb"] ?>"
    data-cycle-timeout="5000">
    <img src="http://placehold.it/480x320/ff0&text=Slide 1" />
    <img src="http://placehold.it/480x320/0f0&text=Slide 2" />
    <img src="http://placehold.it/480x320/0ff&text=Slide 3" />
</div>

请记住，幻灯片索引从零开始，因此可能需要相应地调整您的计数。这是一个小提琴：http://jsfiddle.net/6LAAJ/

还要确保您转义GET变量的输出以防止XSS攻击。我可能会放弃使用GET变量并使用窗口位置哈希。请参阅bookmarkable slides demo以及一些示例代码：

<a href="/slideshow/#slide-3">Link to slide 3</a>

<div class="cycle-slideshow">
    <img src="http://placehold.it/480x320/ff0&text=Slide 1" data-cycle-hash="slide-1" />
    <img src="http://placehold.it/480x320/0f0&text=Slide 2" data-cycle-hash="slide-2" />
    <img src="http://placehold.it/480x320/0ff&text=Slide 3" data-cycle-hash="slide-3" />
</div>

如果您必须使用原始Cycle plugin代替周期2，则使用窗口位置哈希设置永久链接的JavaScript：

$(function() {
var index = 0, hash = window.location.hash;
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1; // slides are zero-based
}

$('#slideshow').cycle({
    startingSlide: index,
    timeout: 3000,
    after: function(curr,next,opts) {
        window.location.hash = opts.currSlide + 1;
    }
});

}）;

在Cycle网站上demo。

jQuery Cycle Slideshow Startingslide

1 个答案: