3

Tenho este código:

<script>
$(function(){
  $(".flipster").flipster({style: 'carousel', enableTouch: true, start: 0,
    onItemSwitch: function(){
      var nomeAlbum = $(this).attr("data-title");
      console.log(nomeAlbum);
    }
  }); 
});
</script>

A função onItemSwitch() me permite fazer qualquer coisa quando a imagem for trocada.
O problema é que eu estou tentando pegar o data-titulo de cada uma das imagens, e colocá-lo abaixo da foto do álbum.

HTML

<ul>
  <li>
    <img src="img/californication.jpg" data-title="Californication" class="imgCarousel"/>
    <p class="mostra-titulo"></p>
  </li>
  <li>
    <img src="img/greatest-hits.jpg" data-title="Greatest Hits" class="imgCarousel" />
    <p class="mostra-titulo"></p>
  </li>
  <li>
    <img src="img/stadium-arcadium.jpg" data-title="Stadium Arcadium" class="imgCarousel" />
    <p class="mostra-titulo"></p>
  </li>
  <li>
    <img src="img/the-uplift-mofo-party-plan.jpg" data-title="The Upflit Mofo Party Plan" class="imgCarousel"/>
    <p class="mostra-titulo"></p>
  </li>
</ul>

Aqui está o repositório do plugin, caso ajude em algo.

1 Resposta 1

3

Tente assim:

// iterar todos os li
$('li').each(function() {

    // fazer cache do objecto para evitar funções a mais a correr 
    // como o @Zuul referiu nos comentários
    var $this = $(this); 

    // dentro de cada li, procurar o elemento img e
    // capturar o titulo unsando o método data() do jQuery
    var titulo = $this.find('img').data('title'); 

    // procurar elementos com a classe 'mostra-titulo' e inserir o titulo no seu HTML
    $this.find('.mostra-titulo').html(titulo); 
});

Exemplo

2
  • 1
    Funcionou perfeitamente Sergio!! Muito obrigado! :D
    – Luan
    Commented 2/03/2014 às 20:17
  • @LuanDavi, de nada. Bom que pude ajudar.
    – Sergio
    Commented 2/03/2014 às 20:18

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 .