Detectar fim da div com jQuery

[xnando 0]

Boa tarde galera, estou com uma dúvida, fiz uma galeria de imagens simples em jQuery, e na navegação da galeria (onde ficam os thumbs), eu coloquei duas spans que fazem o direcionamento para esquerda ou direita. O HTML tá assim:

	<span id="divThumbsDir">-></span> // Navega pra direita
	<span id="divThumbsEsq"><-</span> // Navega pra esquerda

	<div id="divThumbs">

		<div id="divThumbsChild"> // Essa div vai para esquerda e para direita com jQuery, nela ficam todas as thumbs da galeria.
			<a href="#" rel="img/slider/slider-1.jpg" class="image"><img src="galeria/thumb1.jpg" class="thumb" border="0"/> </a>
			<a href="#" rel="img/slider/slider-1.jpg" class="image"><img src="galeria/thumb1.jpg" class="thumb" border="0"/> </a>
			<a href="#" rel="img/slider/slider-1.jpg" class="image"><img src="galeria/thumb1.jpg" class="thumb" border="0"/> </a>
	</div>

 

O jQuery que faz a ação está assim:

	$("#divThumbsDir").click(function() {
		$("#divThumbsChild").animate({
			"left" : "-=100px"
		}, "slow");
	});

	$("#divThumbsEsq").click(function() {
		$("#divThumbsChild").animate({
			"left" : "+=100px"
		}, "slow");
	}); 

 

E o CSS:

#divThumbs {
	width: 900px;
	height: 90px;
	overflow: hidden;
	white-space: nowrap;
	padding-bottom: 35px;
	margin: 0 auto;
}

#divThumbsChild {
	width: 10px;
	position: relative;
}

 

 

Tá tudo funcionamento perfeitamente, o único problema é que se eu for clicando na span que move pra direita (por exemplo), quando acabarem os elementos, ela vai continuar, infinitamente, por conta da propriedade overflow que eu coloquei na div, que permite que as imagens fiquem uma ao lado da outra sem um limite de imagens.

 

Ou seja, teria que detectar quando acabasse essas imagens, e automaticamente, não mover mais elementos, alguém sabe como posso fazer isso? Uma luz?

Ah, não precisa necessariamente ser com jQuery, se puder fazer isso de outras maneiras, são bem-vindas.

[Ricardoo Lima 0]

HEY!

 

seria interessante contar quantos elementos <a> existem na DIV que contem as fotos, através do JQuery. Aí você vai iterando até chegar no numero de imagens, daí volta pra primeira.

 

ou melhor:

http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider/

aí vc nao se preocupa com isso hehehe

[xnando 0]

Mais alguma sugestão? O problema dessa solução pronta é que ela não se encaixa na minha necessidade, mas desde já agradeço.

[Tiago Sabadini 3]

A ideia do Ricardo é boa. Contar a quantidade de elementos

var size_thumbs = $('#divThumbsEsq a').size();

 

E vc vai subtraindo a cada clique. Quando size_thumbs for igual a 1, você faz um

$("#divThumbsEsq").trigger('click')

[rodrigopa 7]

Esse seu código html tá certo?

[xnando 0]

Valeu Tiago, vou tentar desse modo e posto aqui a solução se conseguir.