Using Cycle2 and "picturefill" together

Question

I created a slideshow responsive using Cycle2. Because the images are very large, I need to upload a smaller file of each image when the page opens on mobile devices.

So I thought I’d use the picturefill. But it is difficult to reconcile the two plugins. O picturefill uses span inside span and Cycle2 seems to identify each span as an independent slide.

Answer 1

By default, the jQuery selector of slides of Cycle2 is > img (selects only images directly from .cycle-slideshow).

You need to change it to match with your marking. picturefill uses spans for each responsive image, then add this attribute to the container cycle2:

data-cycle-slides="> span"

Fiddle ^{(yes, I used the same images twice)}

In this way, all the spanare directly children of .cycle-slideshow will be used as slides. Here is the markup used for the demo:

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-speed="200"
    data-cycle-slides="> span"
    >

    <span data-picture data-alt="Uma foto">
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/small.jpg"></span>
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/medium.jpg" data-media="(min-width: 400px)"></span>
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/large.jpg" data-media="(min-width: 800px)"></span>
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></span>
    </span>

    <span data-picture data-alt="Uma foto">
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/small.jpg"></span>
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/medium.jpg" data-media="(min-width: 400px)"></span>
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/large.jpg" data-media="(min-width: 800px)"></span>
        <span data-src="http://scottjehl.github.io/picturefill/external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></span>
    </span>

</div>

Note: I am not including fallbacks for disabled JS or old IE to make the demo simpler. Add them if necessary.

---

NOTE: this response applies to version 1.2.x of Picturefill, since this was its most recent version when this response was originally written.

Picturefill as of version 2.0 uses the element <picture>, or also <img> with attributes srcset and sizes. In order for Cycle to work with Picturefill 2.x, you will then have to adapt the Cycle slide selector to > picture or > img depending on the syntax adopted.