Galeria Fotografias

[klasss]

Boa tarde,

Preciso de uma pequena ajuda para saber qual a melhor maneira de fazer uma galeria de fotografias.

São apenas 4 ou 5 fotografias a passarem com os seus respectivos links

e ter uns círculos para poder andar para a frente e para trás nas imagens.

Se alguem conhecer algum tutorial ou assim agradecia.

[bioshock]

http://www.jssor.com/

http://amazingslider.com/

http://www.webmaster.pt/sliders-jquery-8747.html

[I-NOZex]

http://dev7studios.com/plugins/nivo-slider/

o plugin jquery é free em licença MIT

[taviroquai]

Entreti-me a fazer um slider destes... 😄 minimalista claro... com jquery...

Dá para colocar N imagens e escolher uma largura para o slide... usa-se assim em javascript:

var galeria = new Galeria($, 'galeria', 700);

HTML

<div id="galeria">
<ul>
	<li><div class="item"><img src="imagem1.jpg" /></div><div class="caption">item1</div>
	<li><div class="item"><img src="imagem2.jpg" /></div><div class="caption">item2</div>
</ul>
<div class="nav">
	<a href="#" class="previous">anterior</a>
	<a href="#" class="next">seguinte</a>
</div>
</div>

CSS

#galeria {
width: 500px;
overflow: hidden;
position: relative
}

#galeria ul {
padding: 0;
margin: 0;
height: 100%;
list-style-type: none;
text-align: center;
position: relative;
left: 0;
overflow: hidden;
}

#galeria li {
position: relative;
float: left;
}

#galeria .item {
width: 500px;
}

#galeria .item img {
width: 100%;
}

#galeria .caption {
position: relative;
top: -23px;
background-color: black;
color: white;
opacity: 0.7;
}

#galeria .nav {
clear: both;
text-align: center;
}

Javascript

// objecto galeria
function Galeria($, id, width) {

	this.id = id;
	this.n = $('#'+this.id+' li').length;
	if (parseInt(width) > 0) {
		$('#'+this.id).css('width', width+'px');
		$('#'+this.id+' li').css('width', width+'px');
		$('#'+this.id+' .item').css('width', width+'px');
	}
	this.width = $('#'+this.id+' ul li').css('width');
	this.current = 0;
	var self = this;

	// inicializar slider
	$('#'+this.id+' ul').css('width', this.n+'00%');

	// adicionar eventos
	$('#'+this.id+' .next').on('click', function(e) {
		e.preventDefault();
		self.seguinte();
	});
	$('#'+this.id+' .previous').on('click', function(e) {
		e.preventDefault();
		self.anterior();
	});
}
Galeria.prototype.seguinte = function() {
	if (this.current+1 >= this.n) return;
	$('#'+this.id+' li').animate({left: "-="+this.width}, 500);
	this.current++;
}
Galeria.prototype.anterior = function() {
	if (this.current-1 < 0) return;
	$('#'+this.id+' li').animate({left: "+="+this.width}, 500);
	this.current--;
}

// fazer o favor de incluir jquery antes...	
new Galeria($, 'galeria', 700);

Edited May 15, 2014 at 04:16 PM by taviroquai