jQuery Cycle2 slideshow thumbnail creation

Question

I'm using the brilliant Cycle2 plugin, and I want to automatically create thumbnails of the images in my slideshow as per this example.

However, that example has the img itself as the slide each time. Because of my layout, I need the img to be within a container figure each time. See below or 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 -->

That means that my pager-template cannot access the image source. The docs say that:

Cycle2 uses simple Mustache-style templates by default.

So I am guessing there is a fairly simple way to amend my template to access the img src within the figure each time… I'm just not sure what that is. Thanks in advance.

Answer 1

There is an easier way to get the src of your img without using your jQuery script.

According to the cycle2 documentation regarding Advanced Templates (http://jquery.malsup.com/cycle2/demo/tmpl2.php)

You can use firstChild.src to access the src property of your img element.

Here is another solution for your answer (I kept the cycle-slideshow class for the autoselector of cycle2 to work)

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