Galeria de Fotos , Sem Plugin ?

FabianoS · 22 de junho de 2015

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