View Full Version : Ajuda em HTML/Javascript
Ajudem aqui um 'cromo da bola'.
Eu queria fazer um site para mostrar as fotos de um festival que houve na minha terra. E queria fazer de maneira a que ao carregar em seguinte ou anterior o url da imagem mudasse e a imagem se alterasse sozinha. O problema é que não sei como se faz. Estive a espreitar uns códigos de sites com métodos iguais mas há coisas que estão omitidas ou em outros ficheiros externos ao código e não dá para entender tudo.
O que queria saber era o que fazer para arranjar uma maneira de, por exemplo, ao carregar em "próxima", o url da imagem - imaginemos www.blablabla.com/img1.jpg - mudasse para www.blablabla.com/img2.jpg e assim alterasse a imagem.
Como faço para mexer no url e alterá-lo 'on the fly'?
Já agora, e como curiosidade, se me ensinassem a fazer uma zona para deixar comentários individuais para cada imagem também era bom porque o guestbook do SAPO........
EDIT: Tenho a leve impressão que não era bem aqui que devia ter posto isto. :D
Se quiseres uma maneira facil criar um html para cada imagem, algo do tipo.
pic1.html
pic2.html
pic3.html
Depois, dentro de cada html, crias referencias para o proximo e anterior.
Por exemplo, no pic2.html crias referencia no link anterior para o pic1.html e no proximo para o pic3.html
Quanto aos comentarios... penso q seja necessário criar uma ligacao com uma base de dados para eles ficarem registados.
Fica bem
Se quiseres uma maneira facil criar um html para cada imagem, algo do tipo.
pic1.html
pic2.html
pic3.html
Depois, dentro de cada html, crias referencias para o proximo e anterior.
Por exemplo, no pic2.html crias referencia no link anterior para o pic1.html e no proximo para o pic3.html
Quanto aos comentarios... penso q seja necessário criar uma ligacao com uma base de dados para eles ficarem registados.
Fica bem
Isso é precisamente o que não quero fazer. Porque não é uma ou duas imagens mas sim dezenas delas. Teria de criar dezenas de páginas.
Cria um fotoblog
Se é para dizer isso mais vale nem responderes...
EDIT: Já agora. Queria fazer de maneira a que as miniaturas das imagens (que serão a anterior e a próxima. Apenas uso esta para testar) tivessem por baixo delas o texto "anterior" e "próxima". Até aqui tudo bem e não haveria problema se ao tentar por o texto por baixo, a imagem com o tamanho grande não descesse também.
Passa disto (http://img137.imageshack.us/img137/2586/semttulo7ng.jpg) para isto (http://img137.imageshack.us/img137/998/semttulo26fs.jpg) ou isto (http://img49.imageshack.us/img49/3789/semttulo32cq.jpg) na melhor das hipóteses. Como faço para deixar tudo centrado e com o texto por baixo das miniaturas? Também reparei agora que as miniaturas não estão alinhadas na vertical com o centro da imagem grande mas sim um pouco acima. Mais uma dúvida. :D
Pobre e mal agradecido ainda por cima...
Ta descansado q n ponho aqui mais nenhum post... fica la com a tua thread q certamente teras muitas ajudas...
Fica bem
Pobre e mal agradecido ainda por cima...
Ta descansado q n ponho aqui mais nenhum post... fica la com a tua thread q certamente teras muitas ajudas...
Fica bem
Pobre e mal agradecido? Se quisesse fazer um fotoblog fazia um mas eu disse que quero fazer um SITE. Aqui falasse de html e javascript. Se não sabes não me digas para fazer outra coisa qualquer. Isto é com cada uma...
Benjamim 18-06-2006, 22:00 Isso é precisamente o que não quero fazer. Porque não é uma ou duas imagens mas sim dezenas delas. Teria de criar dezenas de páginas.
Se o problema é teres de fazer as dezenas de páginas, porque não usas uma ferramenta de geração automatica de albuns?...eu uso o "Web Album generator" (acho que o nome é este). Ele gera as dezenas de paginas e se houver algo que nao gosto edito-as...sempre custa menos do que faze-las todas. Mas também podes fazer uma, usar o copy paste e depois alterares apenas os links (se bem que dá mais trabalho que o gerador automatico :) )
PHaRGoTH 18-06-2006, 22:32 por acaso oq ue queres fazer é algo deste genero?
http://www.jular.pt/inspiration.asp
encontras a resposta neste site:
http://www.dynamicdrive.com/forums/showthread.php?p=5215
e sim é tudo javascript e html. :)
eu depois so criei foi o slideshow automatico... acho... já lá vai um ano, ano e meio quando fiz isso..
por acaso oq ue queres fazer é algo deste genero?
http://www.jular.pt/inspiration.asp
encontras a resposta neste site:
http://www.dynamicdrive.com/forums/showthread.php?p=5215
e sim é tudo javascript e html. :)
eu depois so criei foi o slideshow automatico... acho... já lá vai um ano, ano e meio quando fiz isso..
Precisamente. A parte do aspecto já é problema meu mas já é fácil. E quanto àquilo do texto e das miniaturas? Não sabes como resolver isso. Também não sei se me expliquei bem...
EDIT: Já está feito. Agora só falta definir as imagens das miniaturas e meter o tal texto...
Na amostragem das imagens tenho assim:
<script>
document.write('<a href="#" onClick="backward();return false"><img src="'+photos[which-1]+'" name="photoslider" style="border-color: white" align="middle" width="100" height="75" border="10"></a>')
document.write('<img src="'+photos[0]+'" name="photoslider" style="border-color: white" align="middle" width="640" height="480" border="10">')
document.write('<a href="#" onClick="forward();return false"><img src="'+photos[which+1]+'" name="photoslider" style="border-color: white" align="middle" width="100" height="75" border="10"></a>')
</script>
Mas assim apenas muda a imagem do primeiro bloco 'document.write'. Como faço para mudar também os outros dois? O primeiro bloco corresponde à miniatura da imagem anterior, o segundo da imagem actual (e mostrada grande portanto) e o terceiro da miniatura da imagem seguinte.
lfdesign 19-06-2006, 02:54 Podias criar um slideshow em flash... Há dezenas de tutorials sobre como fazer isso...
Além de que iria ficar de certeza com muito melhor aspecto...
iznougud 19-06-2006, 11:19 O melhor é fazeres isso em ASP ou PHP e de preferencia com um abase de dados. Pelo que percebi não sabes nenhuma destas, mas não é dificil aprenderes a fazer isso e depois nao vais querer outra coisa.
O melhor é fazeres isso em ASP ou PHP e de preferencia com um abase de dados. Pelo que percebi não sabes nenhuma destas, mas não é dificil aprenderes a fazer isso e depois nao vais querer outra coisa.
Mas o tempo de aprender nem que seja o mínimo indispensável é muito tempo perdido. Quero ter isto pronto no máximo amanhã. Hoje já tenho as fotos e são à volta de 60 fotos. Da maneira que está agora apenas tenho de introduzir os links no array o resto é feito sozinho.
Já resolvi todas as minhas dúvidas. Algumas eram apenas problemas de código que dizia para não alterar (naquele link que o PHaRGoTH deu) mas era preciso alterar. Agora a única dúvida está em como pôr o texto "anterior" e "próxima" por baixo das respectivas imagens miniaturas. De momento o site tem as miniaturas com o texto ao lado e por cima da imagem maior mas queria pôr tanto o texto como as miniaturas cada uma de cada lado da imagem grande para poupar espaço vertical e como o horizontal chega e sobra... (isto para 1024x768). Para uma melhor compreensão do problema vejam o site em http://feiradavinhaedovinho.com.sapo.pt/. Tem as miniaturas em cima com o texto ao lado e quero por o texto e a respectiva miniatura ao lado da imagem grande.
Uma maneira muito fácil e sem grande trabalho é usares uma ferramenta do frontpage, que é o esquema de apresentação de diapositivos. Cria-te todo o slideshow em segundos. Só tens que seleccionar as fotos.
É claro que não aprendes como é que se faz, mas ficas com o problema resolvido.
Uma maneira muito fácil e sem grande trabalho é usares uma ferramenta do frontpage, que é o esquema de apresentação de diapositivos. Cria-te todo o slideshow em segundos. Só tens que seleccionar as fotos.
É claro que não aprendes como é que se faz, mas ficas com o problema resolvido.
Vê um exemplo aqui: http://www.lxselecta.com/design.htm
Mas a questão aqui é aprender como se faz... eu já disse que aqui o problema é HTML/Javascript.
PHaRGoTH 19-06-2006, 21:03 Já resolvi todas as minhas dúvidas. Algumas eram apenas problemas de código que dizia para não alterar (naquele link que o PHaRGoTH deu) mas era preciso alterar. Agora a única dúvida está em como pôr o texto "anterior" e "próxima" por baixo das respectivas imagens miniaturas. De momento o site tem as miniaturas com o texto ao lado e por cima da imagem maior mas queria pôr tanto o texto como as miniaturas cada uma de cada lado da imagem grande para poupar espaço vertical e como o horizontal chega e sobra... (isto para 1024x768). Para uma melhor compreensão do problema vejam o site em http://feiradavinhaedovinho.com.sapo.pt/. Tem as miniaturas em cima com o texto ao lado e quero por o texto e a respectiva miniatura ao lado da imagem grande.
bom antes demais conselho, quando fizeres paginas optimiza para 800 X 600, por qualquer razão pode haver utilizadores que nao queiram, ou nao possam ver uma pagina tão "grande".
quanto a tua duvida, bem não estou bem a perceber o problema. Vamos recapitular:
queres ter uma miniatura da imagem anterior a que esta maximizada (do lado esquerdo desta ultima), do lado direito uma miniatura da imagem seguinte. e queres que por baixo das miniaturas esteja ANTERIOR (na miniatura da imagem anterior) e SEGUINTE(na miniatura da imagem seguinte).
mas tas com problemas em colocar esses "links". é isso??
bem se for esse o caso, acho que seja um problema na implementação da table de HTML.
Se nao tem nada a ver com isto desculpa nao leves a mal, mas é qeu nao estou a perceber mesmo.
:S
bom antes demais conselho, quando fizeres paginas optimiza para 800 X 600, por qualquer razão pode haver utilizadores que nao queiram, ou nao possam ver uma pagina tão "grande".
quanto a tua duvida, bem não estou bem a perceber o problema. Vamos recapitular:
queres ter uma miniatura da imagem anterior a que esta maximizada (do lado esquerdo desta ultima), do lado direito uma miniatura da imagem seguinte. e queres que por baixo das miniaturas esteja ANTERIOR (na miniatura da imagem anterior) e SEGUINTE(na miniatura da imagem seguinte).
mas tas com problemas em colocar esses "links". é isso??
bem se for esse o caso, acho que seja um problema na implementação da table de HTML.
Se nao tem nada a ver com isto desculpa nao leves a mal, mas é qeu nao estou a perceber mesmo.
:S
O problema não é em colocar os destinos dos links (se percebi que era essa a dúvida da dúvida) mas sim em colocar o texto por baixo da imagem sem afectar o posicionamento dos resto dos componentes da página. Quanto à resolução, mais tarde ponho o tamanho conforme a resolução do monitor. Já vi uns scripts para fazer isso algures...
Passa disto (http://img137.imageshack.us/img137/2586/semttulo7ng.jpg) para isto (http://img137.imageshack.us/img137/998/semttulo26fs.jpg) ou isto (http://img49.imageshack.us/img49/3789/semttulo32cq.jpg) na melhor das hipóteses.
PHaRGoTH 19-06-2006, 22:08 O problema não é em colocar os destinos dos links (se percebi que era essa a dúvida da dúvida) mas sim em colocar o texto por baixo da imagem sem afectar o posicionamento dos resto dos componentes da página.
entao o teu problema é memso o tabelamento da página.
Uma tabela com duas linhas e 3 colunas, e na coluna do meio fazes merge ficando essa coluna com uma unica linha.
em seguida nas outras coluna na celula de cima colocas a imagem e na debaixo a palavra, ou o contrario conforme preferires..
ficas ocm qq coisa do genero
imageAnt IMAGEM ImageSeg
anterior MAXIMIZADA seguinte
Bom, agora vou ter de sair, mas de quiseres mais tarde posso dar-te o codigo HTML dessa table.
entao o teu problema é memso o tabelamento da página.
Uma tabela com duas linhas e 3 colunas, e na coluna do meio fazes merge ficando essa coluna com uma unica linha.
em seguida nas outras coluna na celula de cima colocas a imagem e na debaixo a palavra, ou o contrario conforme preferires..
ficas ocm qq coisa do genero
imageAnt IMAGEM ImageSeg
anterior MAXIMIZADA seguinte
Bom, agora vou ter de sair, mas de quiseres mais tarde posso dar-te o codigo HTML dessa table.
Penso que consigo fazer sem problemas mas no entanto mais tarde coloco aqui o código para optimização se não te importares.
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:
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.
PHaRGoTH 20-06-2006, 01:50 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:
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?
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.
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.
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.
Mas desde já obrigado a todos pela ajuda.
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.
Escrevi assim e pelo que se percebe no comportamento da página resulta.
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.
Agora é que tenho um problema sério. O site só funciona no Firefox! No IE não funciona e não sei porquê!
<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.fl oor(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ó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>
virtualpraxis 21-06-2006, 17:11 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).
PHaRGoTH 23-06-2006, 00:46 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
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
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.
<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.fl oor(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ó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...
PHaRGoTH 23-06-2006, 11:44 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.
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.
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...
PHaRGoTH 26-06-2006, 16:27 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.
|
|