Vou ser rápido e prático...
Segue o link com o que eu estou trabalhando
LINK
Quando se clica nas imagens "pequenas" abre uma imagem "grande", com um efeito e tal...
Eu não estou conseguindo fazer com que quando clicar na imagem "media" também abra a imagem "grande"
Abaixo segue o código da HTML
<div id="papeis"> <div id="paptv"> <img src="imagens/tv1/med_01.jpg" /> <!-- isso não precisa estar aqui --> </div> <a class="img" href="imagens/tv1/big_01.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto"> <img id="tvp1" src="imagens/tv1/mini_01.jpg" class="opac" onMouseOver="tvch_p(1,1)" onMouseOut="tvch_p(1,0)" title="Clique aqui para ampliar" /></a> <a class="img" href="imagens/tv1/big_02.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto"> <img id="tvp2" src="imagens/tv1/mini_02.jpg" class="transp" onMouseOver="tvch_p(2,1)" onMouseOut="tvch_p(2,0)" title="Clique aqui para ampliar" /></a> <a class="img" href="imagens/tv1/big_03.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto"> <img id="tvp3" src="imagens/tv1/mini_03.jpg" class="transp" onMouseOver="tvch_p(3,1)" onMouseOut="tvch_p(3,0)" title="Clique aqui para ampliar" /></a> <a class="img" href="imagens/tv1/big_04.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto"> <img id="tvp4" src="imagens/tv1/mini_04.jpg" class="transp" onMouseOver="tvch_p(4,1)" onMouseOut="tvch_p(4,0)" title="Clique aqui para ampliar" /></a> <a class="img" href="imagens/tv1/big_05.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto"> <img id="tvp5" src="imagens/tv1/mini_05.jpg" class="transp" onMouseOver="tvch_p(5,1)" onMouseOut="tvch_p(5,0)" title="Clique aqui para ampliar" /></a> <ul id="hid"> <li id="ptv1"><img src="imagens/tv1/med_01.jpg" title="Aqui vai o nome da foto (2)" /></li> <li id="ptv2"><img src="imagens/tv1/med_02.jpg" title="Aqui vai o nome da foto (2)" /></li> <li id="ptv3"><img src="imagens/tv1/med_03.jpg" title="Aqui vai o nome da foto (2)" /></li> <li id="ptv4"><img src="imagens/tv1/med_04.jpg" title="Aqui vai o nome da foto (2)" /></li> <li id="ptv5"><img src="imagens/tv1/med_05.jpg" title="Aqui vai o nome da foto (2)" /></li> </ul> <script type="text/javascript">channel_p(1);</script> </div>
A alteração que eu ja fiz mas não adiantou foi assim:
<li id="ptv1"><a class="img" href="imagens/tv1/big_01.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto">
<img src="imagens/tv1/med_01.jpg" title="Aqui vai o nome da foto (2)" /></li>
<li id="ptv2"><a class="img" href="imagens/tv1/big_02.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto">
<img src="imagens/tv1/med_02.jpg" title="Aqui vai o nome da foto (2)" /></li>
<li id="ptv3"><a class="img" href="imagens/tv1/big_03.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto">
<img src="imagens/tv1/med_03.jpg" title="Aqui vai o nome da foto (2)" /></li>
<li id="ptv4"><a class="img" href="imagens/tv1/big_04.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto">
<img src="imagens/tv1/med_04.jpg" title="Aqui vai o nome da foto (2)" /></li>
<li id="ptv5"><a class="img" href="imagens/tv1/big_05.jpg" rel="lytebox[vacation]" title="Aqui vai o nome da foto">
<img src="imagens/tv1/med_05.jpg" title="Aqui vai o nome da foto (2)" /></li>
Só pra definir os termos
- Imagem pequena: mini
- Imagem média: med
- Imagem grande: big
Se precisar que eu poste os .js ou .css é só falar
Vlw gente
Edição feita por: Guilherme Texa, 07/04/2010, 17:02.
