3

Criei um slideshow responsivo usando o Cycle2. Como as imagens são muito grandes, preciso carregar um arquivo menor de cada imagem quando a página for aberta em dispositivos móveis.

Por isso, pensei em utilizar o picturefill. Mas está difícil conciliar os dois plugins. O picturefill utiliza span dentro de span e o Cycle2 parece identificar cada span como um slide independente.

1 Resposta 1

1

Por padrão, o seletor jQuery de slides do Cycle2 é > img (seleciona apenas imagens diretamente filhas do .cycle-slideshow).

Você precisa alterá-lo para corresponder com a sua marcação. O picturefill utiliza spans para cada imagem responsiva, então adicione este atributo ao container do Cycle2:

data-cycle-slides="> span"

Fiddle (sim, utilizei as mesmas imagens duas vezes)

Desta forma, todos os spans diretamente filhos do .cycle-slideshow serão utilizados como slides. Aqui está a marcação utilizada para a 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>

Obs.: não estou incluindo fallbacks para JS desabilitado nem IE antigo para deixar a demo mais simples. Adicione-os caso necessário.


NOTA: esta resposta se aplica à versão 1.2.x do Picturefill, visto que esta era sua versão mais recente quando esta resposta foi originalmente escrita.

O Picturefill a partir da versão 2.0 utiliza o elemento <picture>, ou também <img> com atributos srcset e sizes. Para que o Cycle funcione com o Picturefill 2.x, você terá então que adaptar o seletor de slides do Cycle para > picture ou > img dependendo da sintaxe adotada.

5
  • Obrigado @Havenard, meu spellchecker anda falhando. =] Commented 4/02/2014 às 3:36
  • Pelo jeito falhou de novo
    – Havenard
    Commented 4/02/2014 às 3:57
  • @Havenard poderias sugerir um edit no caso? Não estou vendo typos. Commented 4/02/2014 às 4:03
  • ata-media -> data-media
    – Havenard
    Commented 4/02/2014 às 4:37
  • @Havenard ops, erro de cópia. Obrigado pelo fiddle atualizado também. Commented 4/02/2014 às 4:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .