Using Cycle2 and picturefill together

Question

Using Cycle2 and picturefill together

Navigation

#1 by (1 votes)

3

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

So I thought about using picturefill. But it's difficult to reconcile the two plugins. The picturefill uses span within span and Cycle2 seems to identify every span as a separate slide.

jquery imagem cycle2

asked by anonymous 04.02.2014 / 02:21

1 answer

Specifying an EJB-client with Maven How to pass parameters by URL in WordPress?

score 1 · Accepted Answer

By default, Cycle2's Cyclo2% jQuery selector is slides ( only selects directly daisy images from > img ).

You need to change it to match your markup. The picturefill uses .cycle-slideshow s for each responsive image, so add this attribute to the container of Cycle2:

data-cycle-slides="> span"

Fiddle (yes, I used the same images twice)

In this way, all span s directly children of span 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><spandata-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><spandata-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'm not including fallbacks for disabled JS or old IE to make the demo simpler. Add them if necessary.

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

Picturefill starting with version 2.0 uses the element .cycle-slideshow , or also <picture> with attributes <img> and srcset . For Cycle to work with Picturefill 2.x, you will then have to adapt the Cycle slider to sizes or > picture depending on the syntax adopted.