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

这意味着我的寻呼机模板无法访问图像源。文档说：

默认情况下，Cycle2使用简单的Mustache样式模板。

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

Answer 1

更新：我想出了如何在jsFiddle中做到这一点。自从我最初发布以来，这些示例已经有所改变。

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

如果您坚持使用HTML结构（figure包含img），那么我建议将img src属性动态复制到figure标记。您可以保留HTML原样，并使用一些jQuery动态执行此操作以方便使用。在完成此操作之后，您还需要延迟运行Cycle2插件。这是一个应该做的伎俩。

HTML（这是相同的，只是从div删除了循环幻灯片课程）：

<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

在您自己的脚本中尝试，并告诉我它是否有效！

Answer 2

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

根据有关高级模板（http://jquery.malsup.com/cycle2/demo/tmpl2.php）

的cycle2文档

您可以使用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>

jQuery Cycle2幻灯片缩略图创建

2 个答案: