Criando uma galeria de imagem, como exibir a imagem;

FabianoS · 16 de junho de 2015

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 ?

Arley Fellipe · 16 de junho de 2015

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>

DiF · 16 de junho de 2015

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

FabianoS · 17 de junho de 2015

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

DiF · 17 de junho de 2015

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

FabianoS · 18 de junho de 2015

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