Ir ao conteúdo
  • Cadastre-se
FabianoS

Criando uma galeria de imagem, como exibir a imagem;

Recommended Posts

Ola, queria muito aprender e resolver esse problema , criei uma galeria simples mais ou menos igual a  W3C , eles usa o target="_blank" pra exibir no tamanho original, tem como eu exibir ele com css3 como se fosse a lightbox ? ou um plugin jquery ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pra ver a imagem em tamanho real é assim:

<style type="text/css">.img{	background-image:url(http://www.w3schools.com/CSS/klematis_big.jpg);	width:550px;	height:550px;	background-position:center;	background-repeat:no-repeat;	background-size:contain;}</style><div class="img"></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Arley Fellipe

 

Essa técnica só serve se você quer deixar uma imagem de fundo tornando ela mais leve para ser carregada... não tem muito haver com galeria de fotos.

 

@FabianoS

Tem sim como fazer em CSS3 dá uma olhada neste exemplo:

 

http://codepen.io/dimsemenov/pen/GAIkt

 

Clique nos links do image-based.

 

Com tudo com lightbox é mais fácil.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Arley Fellipe

 

Essa técnica só serve se você quer deixar uma imagem de fundo tornando ela mais leve para ser carregada... não tem muito haver com galeria de fotos.

 

@FabianoS

Tem sim como fazer em CSS3 dá uma olhada neste exemplo:

 

http://codepen.io/dimsemenov/pen/GAIkt

 

Clique nos links do image-based.

 

Com tudo com lightbox é mais fácil.

 

Gostei muito do exemplo , mais não conseguir usar, ele usa a classe pra aplicar o efeito nao entendi muito bem.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@FabianoS

 

Não tem nada de difícil de entender ali.  No lado esquerdo os códigos... o css é bem limpo e intuitivo..  O jquery ali também é simples  ele usa o plugin jquery Magnific-Popup que ali mesmo tem o o link do site.

 

Em sumo, ali só tem um plugin externo, em jquery o resto é CSS3 e html.

 

O ideal é você estudar linha por linha e tentar compreender o que ela faz...  

Compartilhar este post


Link para o post
Compartilhar em outros sites

@FabianoS

 

Não tem nada de difícil de entender ali.  No lado esquerdo os códigos... o css é bem limpo e intuitivo..  O jquery ali também é simples  ele usa o plugin jquery Magnific-Popup que ali mesmo tempo o link do site.

 

Em sumo, ali só tem um plugin externo, em jquery o resto é CSS3 e html.

 

O ideal é você estudar linha por linha e tentar compreender o que ela faz...  

Sim eu quero fazer esse slide pra aprender, vou ver o que consigo , valeu pela resposta. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@FabianoS

Perfeito. aguardo o retorno.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×