"append" não funciona
Olá, estou utilizando em uma determinada galeria de fotos o famoso "colorbox", e ele por padrão captura o valor do atributo "title" de cada imagem e printa no box em formato de legenda. Até aí beleza. Porém, eu preciso adicionar antes uma legenda personalizada, cujo valor será o mesmo de um "span" existente no html, e para isso tentei usar a função "append", mas não tá rolando. Abaixo, coloco em detalhes:
<script type="text/javascript">
jQuery(document).ready(function() {
$('#galeria_revestimentos > a[rel="colorbox"]').colorbox({
width: '40%',
height: '70%'
});
var especificacoes = $('#galeria_revestimentos > a').find('span.especificacoes').html();
$('#cboxLoadedContent').append('<div class="captionColorbox">'+ especificacoes +'</div>');
});
</script>
E a marcação:
<div id="galeria_revestimentos">
<a rel="colorbox" href="img/galeria_revestimentos/rev_396.jpg" title="Revestimento 396"><img src="img/galeria_revestimentos/thumb1_galeria_revestimentos.jpg" width="206" height="150" alt=" " /><span class="especificacoes">content 1</span></a>
<a rel="colorbox" href="img/galeria_revestimentos/rev_398.jpg" title="Revestimento 398"><img src="img/galeria_revestimentos/thumb2_galeria_revestimentos.jpg" width="206" height="150" alt=" " /><span class="especificacoes">content 2</span></a>
<a rel="colorbox" href="img/galeria_revestimentos/rev_496.jpg" title="Revestimento 496"><img src="img/galeria_revestimentos/thumb3_galeria_revestimentos.jpg" width="206" height="150" alt=" " /><span class="especificacoes">content 3</span></a>
<a rel="colorbox" href="img/galeria_revestimentos/rev_552.jpg" title="Revestimento 552"><img src="img/galeria_revestimentos/thumb4_galeria_revestimentos.jpg" width="206" height="150" alt=" " /><span class="especificacoes">content 4</span></a>
<a rel="colorbox" href="img/galeria_revestimentos/rev_564.jpg" title="Revestimento 564"><img src="img/galeria_revestimentos/thumb5_galeria_revestimentos.jpg" width="206" height="150" alt=" " /><span class="especificacoes">content 5</span></a>
<a rel="colorbox" href="img/galeria_revestimentos/rev_594.jpg" title="Revestimento 594"><img src="img/galeria_revestimentos/thumb6_galeria_revestimentos.jpg" width="206" height="150" alt=" " /><span class="especificacoes">content 6</span></a>
</div>
TRaduzindo:
-> #galeria_revestimentos = é a div que contém a galeria
-> span.especificacoes = é o span que tem o conteúdo da legenda que preciso adicionar
-> #cboxLoadedContent = é o box do script "colorbox" que contém a img em tamanho grande
A legenda que eu preciso deve vir após essa div #cboxLoadedContent, mas com o meu código não tá aparecendo nada. O que pode estar errado? Com a função "after" até apareceu, mas o conteúdo da legenda não tava entrando no loop que deveria, ou seja, tava se repetindo mesmo a imagem do slideshow sendo alterada.
Alguém pode dar-me um help? Obrigado!
Discussão (4)
Carregando comentários...