Logo Hardware.com.br
mrbean
mrbean Super Participante Registrado
654 Mensagens 14 Curtidas

Clicar na miniatura da foto e aparecer em tamanho real-JS

#1 Por mrbean 10/11/2010 - 08:36
Eai pessoal, to fazendo um site para o meu TCC, e gostaria de saber se é possível eu fazer algum script (pode ser usando bibliotecas prontas) que quando eu clicar em uma minitura de uma imagem, apareça outra imagem em tamanho real numa determinada div do site.

E se não for pedir muito, tabém quero saber se é possível fazer a imagem em tamanho real desaparecer caso eu dê um duplo clique ou ter um `X` no canto da imagem e clicar nesse X
Phenom II X4 955 3,2 GHz BE;
8 GB DDR3 Kingston/Corsair;
1 TB Seagate Barracuda;
Placa Mãe Gigabyte GA 880GM UD2H;
Monitor 23" Full HD LG M237WAze_bonitinho.png

Notebook Samsung 305E4A - AMD A6 - 4GB - 500 GB.
6 anos de guia do hardware!


chamuska
chamuska Veterano Registrado
1.4K Mensagens 16 Curtidas
#3 Por chamuska
10/11/2010 - 14:27
Como o Thunder falo, tem o jquery e tbm tem esse site: http://www.dynamicdrive.com/style/ já usei muito os exemplo dele!
Tem bastante coisa legal pra faze efeitos e galerias de imagen!

Mas sobre fazer a miniatura da imagem abrir em uma div acho que da pra faze usando css e javascript, na mao mesmo!

Tipo, tem a miniatura da imagem, coloque um onclick na miniatura que chama uma função passando por parametro o endereço da imagem.
Dai na função JS que foi chamada vc pode habilitar para aparecer a div no centro da tela e inserir o endereço da imagem que foi passada por parametro usando comandos JS ( aqueles comandos JS usados para definir estilo ).
Na div que abre com a imagem, vc pode colocar o comando JS 'ondblclick' pra fica com duplo click, que chama uma função para esconder a div!


Só nao sei de uma coisa, vc entende de css e javascript?? pelo menos o basico ?!

Tenta faze ai, qq coisa eu tento faze um modelo e posta ai!
Nunca fiz o que escrevi ai (uhsausah) mas acho que funciona!

Falou!
André Krebs - programador web
krebscode.eti.br
tpcvasco
tpcvasco General de Pijama Registrado
2.9K Mensagens 330 Curtidas
#4 Por tpcvasco
10/11/2010 - 16:37
Talvez isso te ajude
http://vikjavev.no/highslide/
http://www.google.com.br/search?source=ig&hl=pt-BR&q=LightBox&btnG=Pesquisa+Google&meta=
"Milhouse: - Médicos e bombeiros são heróis.
Bart Simpson: - Olha, as casas continuam pegando fogo e as pessoas continuam doentes. Os verdadeiros heróis são os Schwarzenegger's, os Stallone's, e, em menores proporções, os Vandame's..."
mrbean
mrbean Super Participante Registrado
654 Mensagens 14 Curtidas
#5 Por mrbean
10/11/2010 - 19:10
chamuska disse:
Como o Thunder falo, tem o jquery e tbm tem esse site: http://www.dynamicdrive.com/style/ já usei muito os exemplo dele!
Tem bastante coisa legal pra faze efeitos e galerias de imagen!

Mas sobre fazer a miniatura da imagem abrir em uma div acho que da pra faze usando css e javascript, na mao mesmo!

Tipo, tem a miniatura da imagem, coloque um onclick na miniatura que chama uma função passando por parametro o endereço da imagem.
Dai na função JS que foi chamada vc pode habilitar para aparecer a div no centro da tela e inserir o endereço da imagem que foi passada por parametro usando comandos JS ( aqueles comandos JS usados para definir estilo ).
Na div que abre com a imagem, vc pode colocar o comando JS 'ondblclick' pra fica com duplo click, que chama uma função para esconder a div!


Só nao sei de uma coisa, vc entende de css e javascript?? pelo menos o basico ?!

Tenta faze ai, qq coisa eu tento faze um modelo e posta ai!
Nunca fiz o que escrevi ai (uhsausah) mas acho que funciona!

Falou!

Então, manjar eu manjo um básico quase intermediário, a primeira função agora que entendi mais ou menos, mas última de fechar não tenho idéia, só sei substituir por outra imagem(que seria um branco) , e no caso não pode ter cor, por o fundo da página vai mudar de cor ....

tpcvasco disse:
Talvez isso te ajude
http://vikjavev.no/highslide/
http://www.google.com.br/search?source=ig&hl=pt-BR&q=LightBox&btnG=Pesquisa+Google&meta=

Vou dar um checada agora!
Vlw a todos!
Phenom II X4 955 3,2 GHz BE;
8 GB DDR3 Kingston/Corsair;
1 TB Seagate Barracuda;
Placa Mãe Gigabyte GA 880GM UD2H;
Monitor 23" Full HD LG M237WAze_bonitinho.png

Notebook Samsung 305E4A - AMD A6 - 4GB - 500 GB.
6 anos de guia do hardware!


mrbean
mrbean Super Participante Registrado
654 Mensagens 14 Curtidas
#6 Por mrbean
12/11/2010 - 11:30
Consegui fazer através de um jeito bem simples

getElementById(´XXX´).style.visibility=`hidden`

e

getElementById(´XXX´).style.visibility=`visible`

e já era! , vlw aí pessoal!
Phenom II X4 955 3,2 GHz BE;
8 GB DDR3 Kingston/Corsair;
1 TB Seagate Barracuda;
Placa Mãe Gigabyte GA 880GM UD2H;
Monitor 23" Full HD LG M237WAze_bonitinho.png

Notebook Samsung 305E4A - AMD A6 - 4GB - 500 GB.
6 anos de guia do hardware!


© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal