Imagens ampliada

[kingrox]

Olha não sei o nome disso mas queria saber como se faz equele sistema de img q o aprendiz usa vc clica na imagem e ela amplia na tela, quem souber da uma força vlw

[GhostMutante]

Manda uma url de exemplo, o endereço do site que tem o efeito que vc deseja.
Acho que postar url não é permitido, me mande por MP.

[GhostMutante]

Isso se chama LightBox.
Uma UI em JavaScript.

Uma breve dica de como utilizá-lo:

Faça o download do arquivo: [Somente usuários registrados podem vem os links. ]


Adicione o CSS e o JS contidos no arquivo acima, em sua página.

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>

Para a imagem ser aberta com o efeito de modal, adicione no link a tag rel="lightbox", assim:

<a href="GhostMutante.jpg" rel="lightbox" title="GhostMutante"><img src="GhostMutante_thumb.jpg" /></a>

Pronto.


Espero ter ajudado, abraços!

[kingrox]

quando eu clico de vez ela ampliar ela abre em outra janela =/

[GhostMutante]

quando eu clico de vez ela ampliar ela abre em outra janela =/

Isso não é difícil, se você tiver uma noção de javascript entenderá.

Vamos lá.


Certifique-se de que os arquivos lightbox.css e lightbox.js
estejam na mesma pasta que a pagina o utilizará. As imagens que acompanham o arquivo também. Pode trocar a estrutura, mas lembre-se de respeitar isso quando adicionar o link do css e o scripit do js.


Dentro da TAG Head adicione as linhas:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>

E, em toda TAG A (link) adicione a propriedade rel="lightbox", como no exemplo:

<a href="Temple_of_Love___Updated_by_Timmetrius.jpg" rel="lightbox" title="GhostMutante"><img src="180px-ArthasLichKingMerge.jpg" border="0"

Fiz um teste enquanto postava:

[CRASHADM]

kingrox Como eu nao vi ele falar nada.
se vocer quizer montar tipo uma galeria.
vc tem que por o rel igual nas fotos da galeria.

exemplo.

Foto 1<a href="Temple_of_Love___Updated_by_Timmetrius.jpg" rel="lightbox" title="GhostMutante"><img src="180px-ArthasLichKingMerge.jpg" border="0"></a>

Foto 2<a href="Temple_of_Love___Updated_by_Timmetrius02.jpg " rel="lightbox" title="GhostMutante"><img src="180px-ArthasLichKingMerge02.jpg" border="0"></a>
Isso server quando vc tem uma foto é em vez de fechar a janela pra abrir outra e so aperta Next.

<a href="Temple_of_Love___Updated_by_Timmetrius.jpg" rel="lightbox1" title="GhostMutante"><img src="180px-ArthasLichKingMerge.jpg" border="0"></a>
as imagem poderao estar na mesma pagina mais nao irar parra da lightbox para lightbox1

Espero que tenha ajudado e que tenha entendido.