jQuery Cycle2 幻灯片缩略图创建

Question

我正在使用出色的Cycle2 插件，并且我想按照this example 自动在我的幻灯片中创建图像的缩略图。

但是，该示例每次都将img 本身作为幻灯片。由于我的布局，我需要 img 每次都在容器 figure 内。见下文或this fiddle：

<div class="slideshow-listing cycle-slideshow"
     data-cycle-slides="figure"
     data-cycle-auto-height="4:3"
     data-cycle-pager-template="<span><img src='{{src}}' /></span>"
     data-pause-on-hover="true">

    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/450x370"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>

    <div class="cycle-pager"></div>
</div><!-- /slideshow-listing -->

这意味着我的 pager-template 无法访问图像源。文档说：

Cycle2 默认使用简单的 Mustache 样式模板。

所以我猜有一种相当简单的方法可以修改我的模板以每次访问figure 内的img src……我只是不确定那是什么。提前致谢。

Answer 1

有一种更简单的方法可以在不使用 jQuery 脚本的情况下获取 img 的 src。

根据关于高级模板的 cycle2 文档 (http://jquery.malsup.com/cycle2/demo/tmpl2.php)

您可以使用 firstChild.src 来访问您的 img 元素的 src 属性。

这是您回答的另一种解决方案（我保留了循环幻灯片类，以便循环 2 的自动选择器工作）

<div class="slideshow-listing cycle-slideshow"
 data-cycle-slides="figure"
 data-cycle-auto-height="4:3"
 data-cycle-pager-template="<span><img src='{{firstChild.src}}' /></span>"
 data-pause-on-hover="true">

<figure><img src="http://placehold.it/250x570"></figure>
<figure><img src="http://placehold.it/250x570"></figure>
<figure><img src="http://placehold.it/450x370"></figure>
<figure><img src="http://placehold.it/250x570"></figure>
<figure><img src="http://placehold.it/250x570"></figure>
<div class="cycle-pager"></div>

Answer 2

更新：我想出了如何在 jsFiddle 中执行此操作。自从我最初发布以来，这些示例已经发生了一些变化。

问题在于传递给模板的对象是figure HTML 元素。 Cycle2 中的模板引擎只能访问图形元素本身的属性。它不知道如何查看innerHTML 属性以访问img 标记，使其src 属性可以访问。

如果您坚持使用现有的 HTML 结构（figure 包含img），那么我建议将img src 属性动态复制到figure 标记上。为了方便，您可以保留 HTML 并使用一些 jQuery 动态执行此操作。您还需要延迟运行 Cycle2 插件，直到我们完成此操作。这是一个应该可以解决问题的示例。

HTML（这个也一样，只是把div中的cycle-slideshow类去掉了）：

<div class="slideshow-listing"
     data-cycle-slides="figure"
     data-cycle-auto-height="4:3"
     data-cycle-pager-template="<span><img src='{{src}}' /></span>"
     data-pause-on-hover="true">

    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/450x370"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <div class="cycle-pager"></div>
</div><!-- /slideshow-listing -->

JavaScript：

$(function() {
    var $slideshow = $(".slideshow-listing");
    var $figures = $slideshow.find("figure");
    var length = $figures.length;

    $figures.each(function() {
        var $this = $(this);
        var src = $this.find("img").attr("src");
        $this.prop("src", src);
        length--;

        if (!length) {
            $slideshow.cycle();
        }
    });
});

您还需要添加一些 CSS 来限制缩略图的高度/宽度。我在我的 jsFiddle 中放了一个简单的例子，它们不会按比例缩放，但你明白了。我会让你处理样式问题。

链接：jsFiddle to demonstrate img src copied to figure

在您自己的脚本中尝试一下，如果可行，请告诉我！