[Resolvido] scroll de imagens com legenda

[marcelo2605 10]

Como posso usar o jquery para que o atributo title de cada img apareça em uma div?

 

Uso a seguinte lista de imagens e gostaria de, ao passar o mouse por cada uma delas, aparecesse em outro local a respectiva legenda:

 

<ul class="sc_menu">
<li>
<a href="#"><img src="../images/g01t.jpg" title="foto1"/></a>
</li>
<li>
<a href="#"><img src="../images/g02t.jpg" title="foto2"/></a>
</li>
<li>
<a href="#"><img src="../images/g03t.jpg" title="foto3"/></a>
</li>
</ul>

[JCMais 75]

Estude os seguintes metódos:

 

.each()

.attr()

.text()

 

Você pode criar elementos da seguinte forma:

   var $imgLi = $('li.gallery-item');
   $('<div class="elementoCriado">').appendTo($imgLi);

 

 

Basicamente, você percorre a lista que contém as imagens no each, adiciona a div que vai conter o texto ao fim da li atual, através do metódo appendTo, e define o texto contido nessa div como o attr title da img contida no item atual.

[marcelo2605 10]

JCMais, obrigado pela ajuda.

 

Estava tentando uma coisa assim:

 

$(document).ready(function() {

 $('.sc_menu li').hover (function(){
  var title = $("img").attr("title");	
 	 $("#caption").show().text(title);
 });

 $('.sc_menu li').mouseleave (function(){
$("#caption").hide();	
 });


});

 

A legenda fica armazenada no atributo title de cada imagem. O problema é que dessa forma só mostra a legenda da primeira imagem.

[JCMais 75]

Use o objeto this.

 

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

[marcelo2605 10]

Onde?

[JCMais 75]

var title = $(this).find('img').attr('title');

[marcelo2605 10]

Deu certo. Valeu!