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>

Answer 2

UPDATE: I figured out how to do this in the jsFiddle. The examples have been changed a bit since I originally posted.

The problem is that the object passed to the template is the figure HTML element. The templating engine in Cycle2 can only access attributes on the figure element itself. It does not know how to look into the innerHTML property to access the img tag in a way where its src attribute would be accessible.

If you insist on having the HTML structure as you have it (figure contains img), then I suggest dynamically copying the img src attribute onto the figure tag. You can leave your HTML as is and do this dynamically with some jQuery for convenience. You will also need to delay running the Cycle2 plugin until after we have done this. Here is an example that should do the trick.

HTML (this is the same, just removed the cycle-slideshow class from the 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();
        }
    });
});

You also need to add some CSS to limit the height/width of the thumbnail images. I put a quick example in my jsFiddle, they don't scale proportionally, but you get the idea. I'll let you take care of the style issue.

Link: jsFiddle to demonstrate img src copied to figure

Try that in your own script, and let me know if it works!