3

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

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

<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每次访问...我只是不确定那是什么。提前致谢。

4

2 回答 2

2

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

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

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

这是您回答的另一种解决方案（我保留了 cycle-slideshow 类以供 cycle2 的自动选择器工作）

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

于 2013-09-09T14:29:29.593 回答
2

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

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

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

HTML（这是相同的，只是从 中删除了 cycle-slideshow 类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演示img src复制到图

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

于 2013-03-08T01:36:29.357 回答