Ir ao conteúdo
  • Cadastre-se
FabianoS

Galeria de Fotos , Sem Plugin ?

Recommended Posts

Ola , galeria estou abrindo este tópico , tinha aberto outro  e nao me satisfez eu quero criar uma galeria de fotos , onde eu possa aprender, não quero depender de um plugin só quero usar CSS e JQUERY , como base. 

 

 

criei os seguintes códigos , e funciona agora quero Só fazer uma coisa, Por exemplo tenho um div com imagens e seria total de 10 imagens por exemplo e mostraria só 5, queria saber como fazer pra que a imagens que ficarem em overflow viessem atona quando clicassem em um botão ou qualquer outra coisa. 

<html lang="pt-br"><head><meta charset="UTF-8"><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">$(function(){$('.galeria img').click(function(){	var QuandoClicar = $(this).attr('src');	$('.box img').attr('src' , QuandoClicar);	$('.box').fadeIn('slow');	$('.black').css({'opacity':'0.8'}).fadeIn();});$('.btn').click(function(){$('.box, .black').fadeOut().close();});});</script><style type="text/css">*{margin: 0; padding: 0; ;}.start{font-size: 22px; color:#B21;}.box{width: 600px; height: 500px; background: #F01;  margin:0 auto; display: none; position: absolute; top:20%; left:40%; z-index: 101;}.box img{width: 580px; height: 480px; margin: 10px;}.btn{float:right; cursor: pointer;}.galeria img{width: 100px; height: 100px; float: left; margin: 20px 5px 5px 5px;}.galeria{position: absolute; top:0; left: 0; z-index: 101;}.black{width: 100%; height: 100%; position: absolute; top:0; z-index: 100; background: #000; display: none;}</style><title>Galeria</title></head><body>	<div class="black"></div><div class="start">start</div><div class="box"><img src=""><div class="btn">X</div></div><div class="galeria"><img src="img/img.jpg"/><img src="img/img2.jpg"/><img src="img/img3.jpg"/><img src="img/img4.jpg"/><img src="img/img5.jpg"/><img src="img/img6.jpg"/></div></body></html>

(deixei tudo junto css com jquery porque e para aprendizado e nao para usar por enquanto algum site.)

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

×