Ajuda em HTML/Javascript

Já está feito e está mesmo como eu queria! Mas não foi preciso mais que uma linha na tabela. Criei-a como disseste e ficou com o texto muito abaixo (se pensares bem até é óbvio isso acontecer). Então eliminei a linha de baixo e fiquei com uma linha com três colunas. Funcionou assim porque as imagens e o texto ficam todas centradas tanto na vertical como na horizontal e assim é desnecessário a segunda linha.

Também tenho outra dúvida. Tenho a seguinte função para pré-carregar as imagens do site:

Código: 
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]}

Mas esta função carrega todas as imagens de uma vez. Como faço para carregar apenas a imagem seguinte e anterior à que está a ser visualizada?

Agora a única adição que queria introduzir eram os comentários individuais para cada foto mas isso se calhar já é complicado ou extenso demais para falar aqui... não faço a mínima ideia. Sei que tenho de criar uma 'form' mas não sei como o fazer de maneira a que os comentários depois apareçam na página (só sei formulários para enviar para e-mails) e individualizados para a respectiva foto que se comentou.

Mas desde já obrigado a todos pela ajuda.
 
Última edição:
_Nikon_ disse:
Já está feito e está mesmo como eu queria! Mas não foi preciso mais que uma linha na tabela. Criei-a como disseste e ficou com o texto muito abaixo (se pensares bem até é óbvio isso acontecer). Então eliminei a linha de baixo e fiquei com uma linha com três colunas. Funcionou assim porque as imagens e o texto ficam todas centradas tanto na vertical como na horizontal e assim é desnecessário a segunda linha.

Também tenho outra dúvida. Tenho a seguinte função para pré-carregar as imagens do site:

Código: 
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]}

Mas esta função carrega todas as imagens de uma vez. Como faço para carregar apenas a imagem seguinte e anterior à que está a ser visualizada?
Clicar para expandir...

bom, eu nao revi o codigo, como já disse usei isto prai a ano e meio, por isso posso estar a mandar uma grande calinada; mas em principio bastará retirares o ciclo for, e em vez disso fazeres o preloadedimages a todas as imagens do ciclo fazeres a imagem que quiseres conforme o caso. crias de uma variavel onde guarda o numero da foto actual e assim podes avançar ou recuar conforme quiseres.

_Nikon_ disse:
Agora a única adição que queria introduzir eram os comentários individuais para cada foto mas isso se calhar já é complicado ou extenso demais para falar aqui... não faço a mínima ideia. Sei que tenho de criar uma 'form' mas não sei como o fazer de maneira a que os comentários depois apareçam na página (só sei formulários para enviar para e-mails) e individualizados para a respectiva foto que se comentou.
_Nikon_ disse:
Comentarios? estilo um utilizador qeu consulte as fotos deixar comentarios? bem, ai vais precisar de uma base de dados para guardar esse comentarios e tudo mais.
Clicar para expandir...
Mas desde já obrigado a todos pela ajuda.
Clicar para expandir...
 
PHaRGoTH disse:
bom, eu nao revi o codigo, como já disse usei isto prai a ano e meio, por isso posso estar a mandar uma grande calinada; mas em principio bastará retirares o ciclo for, e em vez disso fazeres o preloadedimages a todas as imagens do ciclo fazeres a imagem que quiseres conforme o caso. crias de uma variavel onde guarda o numero da foto actual e assim podes avançar ou recuar conforme quiseres.
Clicar para expandir...

Escrevi assim e pelo que se percebe no comportamento da página resulta.

Código: 
var preloadedimages=new Array()
preloadedimages[which]=new Image()
preloadedimages[which].src=photos[which]
if (i==photos.lenght){
preloadedimages[0]=new Image()
preloadedimages[0].src=photos[0]}
else
preloadedimages[which+1]=new Image()
preloadedimages[which+1].src=photos[which]

which = número da array da foto actual
photos.lenght = comprimento da array das fotos

Penso que com isto não é preciso criar uma variável para guardar a foto actual visto que já existia a 'which' e esta não é alterada nesta função mas apenas nas funções 'forward' e 'backward' (quando se carrega em anterior ou próxima).

Agora só faltava a parte dos comentários mas estou a ver que vai ser complicadote.
 
Última edição:
Agora é que tenho um problema sério. O site só funciona no Firefox! No IE não funciona e não sei porquê!

Código: 
<html><head>
<title>Feira da Vinha e do Vinho 2006 @ Anadia - Fotos</title>
<script type="text/javascript">

var photos=new Array()
var photoslink=new Array()
var which=0

photos[0]="imagens/HPIM6205.JPG"
photos[1]="imagens/HPIM6230.JPG"
photos[2]="imagens/HPIM6231.JPG"
photos[3]="imagens/HPIM6229.jpg"
photos[4]="imagens/P6160038.JPG"
photos[5]="imagens/P6160039.JPG"
photos[6]="imagens/P6160037.JPG"
photos[7]="imagens/DSCF0007.JPG"
photos[8]="imagens/DSCF0009.JPG"
photos[9]="imagens/DSCF0012.JPG"
photos[10]="imagens/DSCF0023.JPG"
photos[11]="imagens/DSCF0032.JPG"
photos[12]="imagens/DSCF0034.JPG"
photos[13]="imagens/DSCF0035.JPG"
photos[14]="imagens/DSCF0036.JPG"
photos[15]="imagens/DSCF0038.JPG"
photos[16]="imagens/DSCF0040.JPG"
photos[17]="imagens/DSCF0045.JPG"
photos[18]="imagens/DSCF0048.JPG"
photos[19]="imagens/DSCF0052.JPG"
photos[20]="imagens/DSCF0054.JPG"
photos[21]="imagens/DSCF0056.JPG"
photos[22]="imagens/DSCF0060.JPG"
photos[23]="imagens/DSCF0063.JPG"
photos[24]="imagens/DSCF0064.JPG"
photos[25]="imagens/DSCF0066.JPG"
photos[26]="imagens/DSCF0067.JPG"
photos[27]="imagens/DSCF0070.JPG"
photos[28]="imagens/DSCF0072.JPG"
photos[29]="imagens/DSCF0073.JPG"
photos[30]="imagens/DSCF0074.JPG"

var preloadedimages=new Array()
preloadedimages[which]=new Image()
preloadedimages[which].src=photos[which]
if (i==photos.lenght){
preloadedimages[0]=new Image()
preloadedimages[0].src=photos[which]}
else{
preloadedimages[which+1]=new Image()
preloadedimages[which+1].src=photos[which]}

function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}}

function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}

function backward(){
if (which>1){
which--
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[which-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
else if (which==0){
which=photos.length-1
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-2]
document.images.photosliderpro.src=photos[0]
playeffect()
keeptrack()}
else if (which==1){
which=0
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
}

function forward(){
if (which<photos.length-2){
which++
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[which-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
else if (which==photos.length-1){
which=0
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
else if (which==photos.length-2){
which=photos.length-1
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-2]
document.images.photosliderpro.src=photos[0]
playeffect()
keeptrack()}
}

</script>

<style type="text/css">
a:link {background: rgb(255,165,0); color: rgb(255,255,255); text-decoration:none;}
a:visited {background: rgb(255,165,0); color: rgb(255,255,255); text-decoration:none;}
a:active {background: rgb(255,165,0); color: rgb(255,255,255); text-decoration:none;}
a:hover {background: rgb(255,255,255); color: rgb(255,165,0); text-decoration:none;}
</style>
</head>
<body bgcolor="orange">
<div style="text-align: center">

<!-- <b><font style="family:verdana;size:3;color: rgb(255,255,255);">Imagem "+(which+1)+" de "+photos.length</font></b> -->

<table align="center" border="0">
<tr>
<td align="middle"><script type="text/javascript">document.write('<img src="'+photos[photos.length-1]+'" name="photosliderant" style="border-color: white" align="middle" width="100" height="75" border="10"><br>');document.write('<a style="text-decoration:none" href="#" onClick="backward();return false"><b><font face="Verdana" size="3">anterior<\/font><\/b><\/a>')</script></td>
<td align="middle"><script type="text/javascript">document.write('<img src="'+photos[0]+'" name="photoslider" style="border-color: white" align="middle" width="640" height="480" border="10">')</script></td>
<td align="middle"><script type="text/javascript">document.write('<img src="'+photos[which+1]+'" name="photosliderpro" style="border-color: white" align="middle" width="100" height="75" border="10"><br>');document.write('<a style="text-decoration:none" href="#" onClick="forward();return false"><b><font face="Verdana" size="3">pr&oacute;xima<\/font><\/b><\/a>')</script></td>
</tr>
</table>

<a style="text-decoration:none;font-weight: bold;" href="http://homepages.sapo.pt/guestbooks/feiradavinhaedovinho.com.sapo.pt/guestbook.php"><span style=";font-family:verdana;font-size:110%;">Comentários</span></a>
<p><font face="Arial" size="-2">Site oficial da<br>
<a href="http://www.feiradavinhaedovinho.com/" target="blank_">Feira da Vinha e do Vinho</a></font>

<script type="text/javascript">
var message="Todas as fotos estão protegidas.";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
}}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}}}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;}

document.oncontextmenu=new Function("alert(message);return false")
</script>
</div></body></html>
 
Porque é que não utilizas um iframe para mostrar a imagem que queres... assim sempre que se clicar em "seguinte" fazias esse link ficar a apontar para a iframe que carrega a imagem. Claro que tens de utilizar javascript para ir alterando a qual imagem aponta o link "seguinte" (é só uma ideia...).
 
Em que é que isso ajuda? Estar com uma iframe ou com uma tabela é a mesma coisa além de que a linguagem usada é a mesma. E não me apetecia agora estar a mudar o código só por causa de um carpricho. Não percebo é a razão de não funcionar no Internet Explorer e funcionar no Firefox (que normalmente é ao contrário).
 
nao funciona no IE??

mas a parte de slide ou so a parte dos comentarios??

Sorry, nao tenho tido muito tempo livre para poder aparecer por ca
 
PHaRGoTH disse:
nao funciona no IE??

mas a parte de slide ou so a parte dos comentarios??

Sorry, nao tenho tido muito tempo livre para poder aparecer por ca
Clicar para expandir...

A parte de slide. Vê por ti mesmo:

http://feiradavinhaedovinho.com.sapo.pt/

Esperimenta no IE e no Firefox. Em pelo menos três computadores está como eu digo. Funciona no Firefox e não no IE. Penso que o código serve perfeitamente para os dois browsers.

Código: 
<html><head>
<title>Feira da Vinha e do Vinho 2006 @ Anadia - Fotos</title>
<script type="text/javascript">

var photos=new Array()
var photoslink=new Array()
var which=0

photos[0]="imagens/HPIM6205.JPG"
photos[1]="imagens/HPIM6230.JPG"
photos[2]="imagens/HPIM6231.JPG"
photos[3]="imagens/HPIM6229.jpg"
photos[4]="imagens/P6160038.JPG"
photos[5]="imagens/P6160039.JPG"
photos[6]="imagens/P6160037.JPG"
photos[7]="imagens/DSCF0007.JPG"
photos[8]="imagens/DSCF0009.JPG"
photos[9]="imagens/DSCF0012.JPG"
photos[10]="imagens/DSCF0023.JPG"
photos[11]="imagens/DSCF0032.JPG"
photos[12]="imagens/DSCF0034.JPG"
photos[13]="imagens/DSCF0035.JPG"
photos[14]="imagens/DSCF0036.JPG"
photos[15]="imagens/DSCF0038.JPG"
photos[16]="imagens/DSCF0040.JPG"
photos[17]="imagens/DSCF0045.JPG"
photos[18]="imagens/DSCF0048.JPG"
photos[19]="imagens/DSCF0052.JPG"
photos[20]="imagens/DSCF0054.JPG"
photos[21]="imagens/DSCF0056.JPG"
photos[22]="imagens/DSCF0060.JPG"
photos[23]="imagens/DSCF0063.JPG"
photos[24]="imagens/DSCF0064.JPG"
photos[25]="imagens/DSCF0066.JPG"
photos[26]="imagens/DSCF0067.JPG"
photos[27]="imagens/DSCF0070.JPG"
photos[28]="imagens/DSCF0072.JPG"
photos[29]="imagens/DSCF0073.JPG"
photos[30]="imagens/DSCF0074.JPG"

var preloadedimages=new Array()
preloadedimages[which]=new Image()
preloadedimages[which].src=photos[which]
if (i==photos.lenght){
preloadedimages[0]=new Image()
preloadedimages[0].src=photos[which]}
else{
preloadedimages[which+1]=new Image()
preloadedimages[which+1].src=photos[which]}

function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}}

function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length}

function backward(){
if (which>1){
which--
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[which-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
else if (which==0){
which=photos.length-1
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-2]
document.images.photosliderpro.src=photos[0]
playeffect()
keeptrack()}
else if (which==1){
which=0
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}}

function forward(){
if (which<photos.length-2){
which++
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[which-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
else if (which==photos.length-1){
which=0
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-1]
document.images.photosliderpro.src=photos[which+1]
playeffect()
keeptrack()}
else if (which==photos.length-2){
which=photos.length-1
applyeffect()
document.images.photoslider.src=photos[which]
document.images.photosliderant.src=photos[photos.length-2]
document.images.photosliderpro.src=photos[0]
playeffect()
keeptrack()}}

</script>

<style type="text/css">
a:link {background: rgb(255,165,0); color: rgb(255,255,255); text-decoration:none;}
a:visited {background: rgb(255,165,0); color: rgb(255,255,255); text-decoration:none;}
a:active {background: rgb(255,165,0); color: rgb(255,255,255); text-decoration:none;}
a:hover {background: rgb(255,255,255); color: rgb(255,165,0); text-decoration:none;}
</style>
</head>

<body bgcolor="orange">
<div style="text-align: center">



<!-- document.write('<b><font style="family:verdana;size:3;color: rgb(255,255,255);">Imagem '+(which+1)+' de '+photos.length+'</font></b><br> -->



<table align="center" border="0">
<tr>
<td align="middle"><script type="text/javascript">document.write('<img src="'+photos[photos.length-1]+'" name="photosliderant" style="border-color: white" align="middle" width="100" height="75" border="10"><br>');document.write('<a style="text-decoration:none" href="#" onClick="backward();return false"><b><font face="Verdana" size="3">anterior<\/font><\/b><\/a>')</script></td>

<td align="middle"><script type="text/javascript">document.write('<img alt="Feira da Vinha e do Vinho 2006 @ Anadia - Fotos" src="'+photos[0]+'" name="photoslider" style="border-color: white" align="middle" width="640" height="480" border="10">')</script></td>

<td align="middle"><script type="text/javascript">document.write('<img src="'+photos[which+1]+'" name="photosliderpro" style="border-color: white" align="middle" width="100" height="75" border="10"><br>');document.write('<a style="text-decoration:none" href="#" onClick="forward();return false"><b><font face="Verdana" size="3">pr&oacute;xima<\/font><\/b><\/a>')</script></td>
</tr>
</table>

<a style="text-decoration:none;font-weight: bold;" href="http://homepages.sapo.pt/guestbooks/feiradavinhaedovinho.com.sapo.pt/guestbook.php"><span style=";font-family:verdana;font-size:110%;">Comentários</span></a>
<p><font face="Arial" size="-2">Site oficial da<br>
<a href="http://www.feiradavinhaedovinho.com/" target="blank_">Feira da Vinha e do Vinho</a></font>

<script type="text/javascript">
var message="Todas as fotos estão protegidas.";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
}}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}}}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;}

document.oncontextmenu=new Function("alert(message);return false")
</script>
</div></body></html>

A única parte que não funciona para os dois browsers é a protecção para não usarem o botão direito do rato. Aí tive de usar um script para cada browser mas penso que isso não afecta em nada...

PS: Vou retirar a protecção caso queiras ver o código no browser. Aliás, vou retirá-la de vez. Não vale a pena fazer isto porque há sempre maneira de sacar as fotos...
 
Última edição:
Bem, nao sei mesmo, o javascript rebenta quando clicas nos "links", portanto deverá ser um erro nas funções de forward e backwards.

Lembraste dos ciclos que retiraste para nao carregar todas as imagens inicialmente? experimenta repo-lo, e refaz os testes. Verifica tb todas as alterações que fizes-te no codigo de javascript.

Neste momento é o conselho que te posso dar.
 
PHaRGoTH disse:
Bem, nao sei mesmo, o javascript rebenta quando clicas nos "links", portanto deverá ser um erro nas funções de forward e backwards.

Lembraste dos ciclos que retiraste para nao carregar todas as imagens inicialmente? experimenta repo-lo, e refaz os testes. Verifica tb todas as alterações que fizes-te no codigo de javascript.

Neste momento é o conselho que te posso dar.
Clicar para expandir...

Já experimentei fazer isso e mesmo assim não deu. As funções dos botões penso que estão certíssimas, fiz cada uma para cada caso (primeira imagem, última imagem e qualquer imagem sem ser a primeira ou a última) e nas duas o código é o mesmo a não ser a condição que tem de ser diferente.

Não percebo porque razão isto acontece...
 
Muito, muito estranho...

eu na altura creio que nao tive de fazer alterações nenhumas para isso funcionar... e como pudes-te ver funciona no IE.

Neste momento estou atolado em trabalho, mas se a noite tiver um tempo livre tento fazer debug ao javascript.

entretanto o qeu te posso dizer é volta a pegar no codigo tal e qual como estava no tal forum e testa-o no firefox e IE, depois vai fazendo as tuas alterações e sempre a testar para validar a partir de quando dá barraca.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo