Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Carregando comentários...