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.

Will Klein · Answer 1 · 2013-03-08T02:30:30.470

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!

I figured out how to delay running Cycle2 and I think this needs something else to work... I'm playing around and trying to figure it out! — Will Klein, Mar 08 '13 at 01:44
Ok, I figured everything out. That was a bit of work, but kind of fun. I was originally interested in this because of the templating, but it turned out to be a Cycle2/jQuery usage problem. — Will Klein, Mar 08 '13 at 02:33
Ah, clever - thanks for that, very thorough answer. I need the `figure` in the markup as it makes dealing with portrait and landscape images much easier and gives the flexibility to add captions etc at a later date. — CherryFlavourPez, Mar 08 '13 at 10:53

score 2 · Accepted Answer · answered Sep 09 '13 at 14:29

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>

This is indeed simpler. As per the linked page, I'd use `{{children.0.src}}` instead of `{{firstChild.src}}` though, to ensure that changes in the markup don't screw things up. Cheers. — CherryFlavourPez, Sep 10 '13 at 09:26
`{{children.0.src}}` was a life-saver thank you @CherryFlavourPez. I had been struggling to get `{{firstChild.src}}` to work and it was simply rendering as `` This saved me a lot of time. — Luke, Jun 01 '19 at 05:13

jQuery Cycle2 slideshow thumbnail creation

2 Answers2