jquery - jQuery Cycle2幻灯片缩略图创建

我正在使用出色的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 ...我只是不确定那是什么。提前致谢。

最佳答案

有一种更简单的方法，无需使用jQuery脚本即可获取img的src。

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

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