cycle2

cycle2 copied to clipboard

I'm trying to create pager thumbnails like the Advanced Custom Template shows. Here is my code:

$('.selector').cycle({
    // other options
    pagerTemplate : '<a><img src="{{src}}" alt=""></a>'
});

The slide works. But somehow the HTML code of each thumbnail becomes:

<a><img src="src" alt=""></a>

By the way, I'm using Non-Image Slides so the original images are inside <li>s, which are the slides.

This might help:

http://jquery.malsup.com/cycle2/demo/tmpl2.php

Just tried:

$('.selector').cycle({
    // other options
    pagerTemplate : '<a><img src="{{firstChild.src}}" alt=""></a>'
});

The result becomes:

<a><img src="firstChild.src" alt=""></a>

I'm running into this issue now. I'm using Cycle2 to convert an unordered list generated by my CMS to a slideshow. As such, I can't add data-cycle attributes to my markup. I tried the {{firstChild.src}} placeholders in my pagerTemplate option and got the same result as above.

Has anyone solved this or can I get some direction?

Found it.

I used the API.customGetImageSrc method in a mustache template:

pagerTemplate: '<li><a href="#"><img src="{{API.customGetImageSrc}}" width=20 height=20></a></li>'

Then I just used that function to get the image from the slide. Not sure why methods like {{firstChild.src}} aren't working in this case, but this solution should get anyone with this issue off the ground.

Another way around this issue is to use {{children.0.src}} in place of {{firstChild.src}}. I too was having issues with {{firstChild.src}} rendering as <img src="firstChild.src">.

For some reason none of the above is working for me currently. They are all treated as string. I'm using the JS to trigger the slide (not HTML markup).. antyhing I'm missing here?