[Resolvido] Problemas com legenda em slideshow

[marcelo2605 10]

Pessoal, uso o plug-in Cycle para um slideshow com controles e legenda.

 

$(function() {
   $('#slideshow').cycle({
       fx:       'fade',
	speed:     900,
       timeout:   0,
	next:   '#next , #slideshow', 
   	prev:   '#prev',         
	after:     function() {
           $('#caption').html(this.alt);
       }
   });
});

 

A legenda funciona OK com esta marcação:

<div id="slideshow">
                   <img src="../../images/photos/clay01.jpg" alt="Legenda1" />
</div>

 

Mas quando coloco uma <div> entre as tags <img> (para centralizar as imagens), a legenda não aparece mais.

 

Alguém pode me ajudar?

[William Bruno 1501]

não precisa de mais uma div cara.. dá para setar display: block; direto na img, e centralizar ela direto.

[marcelo2605 10]

William, não tá dando. O css tá assim:

 

#slideshow{
width:586px;
height: 357px;
margin:auto;
float:left;
}

#slideshow div{
width:586px; 
height:357px;
}

#slideshow div img{
margin:auto; 
display:block;
}

[William Bruno 1501]

pq ai você precisa dar uma largura definida para cada imagem.

[marcelo2605 10]

O problema é que as imagens são de tamanhos diferentes. Por isso eu pensei em por a div e alterar o script. Não sei como, mas acho que tenho que mudar essa linha:

 

            $('#caption').html(this.alt);

 

O que você acha?

[William Bruno 1501]

não precisa amigo, coloque as larguras aqui:

 

<img src="../../images/photos/clay01.jpg" alt="Legenda1" width="400" />
<img src="../../images/photos/clay02.jpg" alt="Legenda2" width="300" />

 

e assim por diante.

[marcelo2605 10]

William, mesmo assim não rolou.

 

            	<div id="slideshow2">
                   <img src="../../images/photos/clay01.jpg" width="222" alt="David Medalla, Cornwall Gardens, London 1964" />
                   <img src="../../images/photos/clay02.jpg" width="474" alt="Soto with work at Signals Gallery, Wigmore Street, London, mid 1960s" />
           	</div>

 

#slideshow2{
width:586px;
height:357px;
margin:auto;
float:left;
background:green;
}

#slideshow2 img{
margin:auto;
display:block; 
}

[William Bruno 1501]

cara, acabei de testar, e deu certo.

 

poste um link online do seu script. Não vi erro.

[marcelo2605 10]

Link

[William Bruno 1501]

ok, não funciona com o plugin, pq ele sobrescreve o css.

deixe o html assim:

 

                <ul id="slideshow2">
                   <li><img src="../../images/photos/clay01.jpg" width="222" alt="David Medalla, Cornwall Gardens, London 1964" /></li>
                   <li><img src="../../images/photos/clay02.jpg" width="474" alt="Soto with work at Signals Gallery, Wigmore Street, London, mid 1960s" /></li>
               </ul>

não precisa mecher nada no js.

 

e no css, adicione:

#slideshow2 li { width: 100%; }

[marcelo2605 10]

E o css fica como?

 

#slideshow2{
width:586px;
height:357px;
margin:auto;
float:left;
background:green;
}

#slideshow2 li img{
margin:auto;
display:block;
}

 

mesmo assim, a legenda não aparece. O código não deixa eu colocar nada antes de <img>

[William Bruno 1501]

o css fica:

#slideshow2{
       width:586px;
       height:357px;
       margin:auto;
       float:left;
       background:green;
}
#slideshow2 li { width: 100%; }
#slideshow2 li img{
       margin:auto;
       display:block;
}

 

no caso, então, acredito que você terá que alterar o js para:

$('#caption').html( this.getElementsByTagName('img')[0].alt );

[marcelo2605 10]

William, a imagem ficou centralizada, mas os botões não funcionam e a legenda não aparece.

 

Se tiro o [0], os botões funcionam mas a legenda não aparece.

[William Bruno 1501]

atualiza online.

[marcelo2605 10]

William, encontrei uma forma:

 

O html ficou assim:

 

<ul id="slideshow2">
                   <li><img src="../../images/photos/clay01.jpg" width="222" height="335" alt="David Medalla, Cornwall Gardens, London 1964" /></li>
                   <li><img src="../../images/photos/clay02.jpg" width="474" height="335" alt="Soto with work at Signals Gallery, Wigmore Street, London, mid 1960s" /></li>
                   <li><img src="../../images/photos/clay03.jpg" alt="Sérgio de Camargo's studio, Paris 1964" /></li>
           	</ul>

<div id="caption">
               	<p>Legenda 1</p>
                   <p>Legenda 2</p>
                   <p>Legenda 3</p>  
                   </div>

 

O css ficou da forma que você me passou:

 

#slideshow2{
       width:586px;
       height:357px;
       margin:auto;
       float:left;
       background:green;
}
#slideshow2 li { width: 100%; }
#slideshow2 li img{
       margin:auto;
       display:block;
}

 

O script ficou assim:

 

$(function() {
   $('#slideshow2').cycle({
       fx:       'fade',
	speed:     900,
       timeout:   0,
	next:   '#next , #slideshow2', 
   	prev:   '#prev',         
	after:     function(curr,next,opts) {
          var index=opts.currSlide;
           $('#caption p:visible').hide();
           $('#caption p').eq(index).show();
}

   });
});

 

Acrescentei ainda um outro css para esconder as legendas:

 

#slideshow-controls #caption p{ display: none;}

 

 

Mais uma vez obrigado pela ajuda.