Ajuda em HTML/Javascript

[_Nikon_]

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.

 

[Fric]

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

 

[_Nikon_]

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.

 

[Fric]

Cria um fotoblog

 

[_Nikon_]

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 para isto ou isto 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.

 

[Fric]

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

 

[_Nikon_]

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]

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]

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..

 

[_Nikon_]

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]

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]

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.

 

[_Nikon_]

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.

 

[_Nikon_]

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.

 

[Lagaffe]

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.

 

[_Nikon_]

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]

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

 

[_Nikon_]

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 para isto ou isto na melhor das hipóteses.

 

[PHaRGoTH]

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.

 

[_Nikon_]

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.