Jump to content
Daniel Alves

[Resolvido] Como criar Pré visualização de Imagens HTML?

Recommended Posts

Daniel Alves

Boas Tarde Pessoal

Antes demais peço já desculpa se a pergunta é "parva" mas a verdade é que é algo tão simples que quero fazer e ando aqui às aranhas...

Tenho um site simples com uma galeria de imagens e a única coisa que quero é ao clicar numa das imagens que ela seja pré visualizada ou seja abrir em grande. Se possivel com setas para ir passando de umas para as outras...

Já pesquisei e vi que existem umas ferramentas para esse efeito como o lightbox e o fancybox, só que mesmo seguindo os tutoriais deles não consigo por a funcionar, e quando consigo a imagem amplia mas fica toda desformatada...

Alguem me pode dar uma ajuda?

Muito Obrigado desde já

Share this post


Link to post
Share on other sites
KTachyon

Aquilo que queres é uma lightbox como galeria:

http://lokeshdhakar.com/projects/lightbox2/

Vê o "Four image set" que a página tem como exemplo. Depois podes seguir o código no "How to use".

  • Vote 1

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
Daniel Alves

Sim eu já fiz isso, mas o problema é que as imagens aparecem deformadas... Por exemplo uma imagem horizontal o visualizador encolhe-me a imagem...

Não entendo porquê.

Alguma ideia do que possa ser?!

E muito obrigao pela ajuda KTachyon

Edited by Daniel Alves

Share this post


Link to post
Share on other sites
KTachyon

Só vendo. Podem ser problemas de CSS, mas isso deverias ser capaz de apurar abrindo o inspector do teu browser e verificando se tens algum conflito de CSS que possa estar a causar isso.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
Daniel Alves

MUITO OBRIGADO por toda a ajuda uma vez mais...

Solucionei o problema com isto: https://css-tricks.com/expanding-images-html5/

E penso que tens razao, eram mesmo conflitos no CSS porque estava a usar um template que já continha muito CSS e com o outro que estava a carregar do lightbox deformava todas as imagens.

Mas pronto consegui resolver de forma simples com este tutorial.

Muito obrigado

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.