Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

( ((phabyo)) )

Album de fotos

Por , em Desenvolvimento frontend

Recommended Posts

( ((phabyo)) )    0

( ((phabyo)) )
Postado

Pessoal,

 

Estava pensando em fazer uma galeria de fotos em slide-show com legenda,

e o codigo que achei aqui no forum do Micox de um painel do destaques como do Imasters deu uma ideia boa.

 

Tentei mudar o codigo e tal, mais está faltando uma coisa,

posicionar as setas de 'anterior' e 'proximo' na mesma linha e altura da legenda que fica em baixo da imagem,

se alguém puder dar uma olhada e concertar, ficará de grande ajuda ou indicar outro.

 

Segue o cod é só copiar e colar em um bloco de notas, salvar como html que funciona.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Fotos e legendas</title><!--Original: Micox/Náiron JCG - Imasters--><style>* { /*ESPAÇAMENTO DO CONTEúDO NO BROWSER*/	margin:0; 	padding:0;}#destaques { /*TODO O DESTAQUE*/	width:300px; 	height:210px; 	border:1px solid black; 	overflow: hidden;}#destaques ul { /*ÁREA DOS BOTÕES ANTERIOR E PRÓXIMO*/	float:right;	height:30px; 	list-style:none; 	text-align:center;}#destaques ul li{ /*ÁREA DOS BOTÕES ANTERIOR E PRÓXIMO*/	float:left;	width:20px; 	height:20px;	border:1px solid red; 	margin:2px; 	cursor:pointer;}#destaques div { /*OUTRAS IMAGENS ficarão todas escondidas por default. O JS que irá exibi-las.*/	clear:both; 	height:170px; 	display:none;}#destaques div img { /*AREA DA IMAGEM*/	float:left; 	width: 285px; 	height:140px; 	border:1px 	solid black; 	margin:5px; }#destaques .exibe { /*classe .exibe*/	display:block;}/**/#destaques div h1,#destaques div h2, #destaques div h3 {/*Titulo do destaque em baixo da foto*/	font:bold 12px 'Trebuchet MS', Arial, Helvetica, sans-serif; 	margin:5px;	border:1px solid black;	width:235px;}/**/</style><script>var atual=1; //esta var guarda o valor que tá sendo exibido agora.var timeloop; //guardará o setIntervalfunction muda(qual){    /*** função que altera a div que é exibida ***/    //divs que estão dentro do destaques colocadas num array    var divs = document.getElementById("destaques").getElementsByTagName("div");    //formatando o qual    var qual_num = Number(qual);    if (qual_num<1){ qual_num = divs.length;}    else if (qual_num>divs.length) { qual_num = 1;}    //colocando o zero antes se for necessário    if (qual_num<10) {qual = "0" + qual_num} else { qual = qual_num };    //voltando a classe de todas para o padrão que é vazio (resetando)    for (var i=0;i<divs.length;i++){ divs[i].className = "";}    //aplicando a classe '.exibe' na que for pra exibir    document.getElementById("dest_"+qual).className = "exibe";    atual = qual_num; //setando o atual}function iniciaAutomatico(){    timeloop = setInterval("muda(Number(atual)+1)",6000);}</script></head><body onload="iniciaAutomatico()"><div id="destaques">  <div id="dest_01" class="exibe">    <img src="http://www.alteregos.blogger.com.br/seu%20madruga%20sorrindo.JPG" />    <h3>Frase 1 - 1234567891011121314151617</h3>  </div>  <div id="dest_02">    <img src="http://chbr.manchete.net/madruga.jpg" />    <h3>Frase 2 - 1234567891011121314151617</h3>  </div>  <div id="dest_03">    <img src="http://i.esmas.com/image/0/000/003/850/quico20.jpg" />    <h3>Frase 3 - 1234567891011121314151617</h3>  </div>  <ul>    <li onclick="muda(Number(atual)-1); clearInterval(timeloop); iniciaAutomatico();"><</li>    <li onclick="muda(Number(atual)+1); clearInterval(timeloop); iniciaAutomatico();">></li>  </ul></div></body></html>

 

Valeuuuuu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

( ((phabyo)) )    0

( ((phabyo)) )
Postado

Boaaa Masters!!

 

Valeuuuu, já resolveu meu problema.

 

 

Pessoal, surgiu outro probleminha.

 

<li onclick="muda(Number(atual)-1); clearInterval(timeloop); iniciaAutomatico();"><</li>

 

Teoricamente, limpa o intervalo de tempo de 6 segundo, e na sequencia deveria iniciar a contagem de novo (essa parte coloquei pois sem ela não teria mais a passagem de uma foto para outra), só que a soma de tempo as vzs dá errado, em vez de ficar 6 segundos mostrando a foto fica 2 seg ou 3 ou 4, pq ela não zera (acho eu).

 

Se alguém puder ver pq acontece isso, ou se passar o topico pra JS, acho que ali que está o problema.

 

 

Valeuuuu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Isso ja é problema de seu codigo em JavaScript, poste sua duvida na secçao correspondente.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito