30 replies to this topic

[Maykel Esser]

Existe alguma galeria semelhante, que eu possa fazer isto em JQUERY, sem precisar usar flash?

Pois talvez venham dados dinâmicos de banco de dados, gostaria de saber isso!

Attached Files

•  jqueryExemplo.jpg   130.81KB   47 downloads

[Édipo Costa Rebouças]

http://malsup.com/jquery/cycle/ (já usei)

veja os exemplos mais avançados.


EDITADO:

Putz, é um carrosel, e não um botão de nex e previous certo...

bem, dá para juntar com um outro plugin, mas talves fique meio gambistico...

pesquisa rapida...

http://www.gmarwaha..../jcarousellite/


nunca usei.

Edição feita por: Édipo Costa Rebouças, 04/06/2009, 13:34.

[Maykel Esser]

Pois é Edipo, esse ultimo exemplo talvez dê certo. Já é meio caminho andado, mas não sei como fazer pra ajogar a foto selecionada alí. Não manjo NADA de JS, kkk

[Édipo Costa Rebouças]

o jquery foi feito pra vc... rs... para de preguiça e lê um pouco da documentação rapaz...

pelo que sei do cycle, vc vai ter que dar um parametro(um seletor indicando onde estão as fotos "#nav" por exemplo) a ele que ele vai colocando e tirando uma classe activeSlide nas fotos.

talvez o problema seja dar o scroll no carrosel quando vc passar as fotos visiveis.

Edição feita por: Édipo Costa Rebouças, 04/06/2009, 15:56.

[Maykel Esser]

até certo ponto eu consegui montar... a parte de baixo alí onde estão as Thumbs...

agora o que tenho que fazer, é através de um parâmetro, fazer aparecer a imagem grande. Ela nao precisa mudar quando aperta o next, nem o previous, somente quando clica na própria imagem!

como posso fazer?

[Alex Hiroshi]

É só adicionar um evento click nas imagens menores. Pegando como exemplo o html que está no site que o Édipo passou, temos a lista (ul) dentro de uma div com a class anyClass.

$(".anyClass img").click(function(){
				$("#tamReal").attr("src", $(this).attr("src"));
			});

Adicionado o evento em todas as imagens que dispara uma função que pega o src da miniatura e adiciona no src de uma imagem com id #tamReal.
Isso é só um exemplo básico. No seu caso, talvez isso não funcione direito, porque ele vai pegar a url da miniatura e adicionar na imagem maior. Se você tiver duas imagens (thumb e real), esse script terá que ser melhor formulado. Coisa simples também, qualquer coisa posta aí.

[Édipo Costa Rebouças]

http://malsup.com/jq...cle/pager2.html

[Maykel Esser]

esse exemplo é legal Édipo, porém não tem a navegação para ver mais imagens... acho que vou tentar seguir a recomendação do Alex, porém não faço a minima idéia de como adaptar neste:

[codebox]
<style>
/**** Slideshow ****/

#slideshow{
width:840px;
}
#boxNav{
margin-top:14px;
background-color:#12101b;
padding-top:6px;
padding-bottom:6px;
margin-bottom:14px;
}
#imgMaior img{
border: 1px solid #a1a0a5;
}
.thumbs img{
margin: 0 6px 0 6px;
_margin: 0 5px 0 5px; /* Hack IE6 */
}
.prev, .next{
background-color:#23212b;
padding: 33px 7px 33px 7px;
}
#slideshow #anterior{
float:left;
}
#slideshow .thumbs{
float:left;
}
.next{
margin-left:4px;
_margin-left:7px;
}
</style>
<script src="../libs/jquery/jquery.js" type="text/javascript"></script>
<script src="../libs/jquery/jcarousellite_1.0.1.js" type="text/javascript"></script>
<script>
$(function() {
$(".thumbs").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
<div id="slideshow">
<div id="imgMaior"><img src="../imagens/img1.jpg"></div>
<div id="boxNav">
<div id="anterior">
<button class="prev"><img src="../imagens/setaEsq.jpg" width="17" height="17" /></button>
</div>
<div class="thumbs">
<ul>
<li><img src="../imagens/img1_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img2_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img3_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img4_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img5_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img6_peq.jpg" alt="" width="115" height="85" ></li>
</ul>
</div>
<div id="proximo">
<button class="next"><img src="../imagens/setadir.jpg" width="17" height="17"/></button>
</div>
</div>
</div>
[/codebox]

Tenho já as imagens no thumb, mas não sei que tipo de parâmetro posso passar, e como fazer para a div "imgMaior" trazer a imagem selecionada. Sou muito leigo no javascript, mal sei fazer history.back nessa joça kkkkkkkk não precisa obrigatóriamente ter uma imagem só, posso recortar as 2, já que o sistema não é dinâmico por enquanto, não há necessidade de um thumb dinâmico!

[Édipo Costa Rebouças]

é ai que você vai ter que integrar com o carousel, ou fica como ideia, você pode usar uma div com overflow:hidden para os thumbs, criar os botões, e toda vez que forem apertados, você usa a função toSCroll para a div das thumbs, nunca fiz isso, mas seria uma alternativa(eliminando o carousel).

o bom desse script é que ele gera os thumbs a partir das imagem maiores, eliminando assim ter que criar thumbs....

se for seguir o exemplo do alex, você pode por exemplo colocar outro atributo tag img com a url da imagem real.

Talvez o jquery.cylcle seja disnecessario para o neu caso.

$(".anyClass img").click(function(){
				$("#tamReal").attr("src", $(this).attr("realsrc"));
			});

mas o cycle é bem util, tem bastante efeito, fica como dica para um proximo projeto.

Edição feita por: Édipo Costa Rebouças, 05/06/2009, 10:04.

[Maykel Esser]

certo, mas eu consigo passar por exemplo, qual imagem eu cliquei através de um evento, para substituir o conteúdo da div "imgMaior"? É no link que eu passo um parâmetro?

[Édipo Costa Rebouças]

é atraves desse seletor css que esta no código do alex:
$(".anyClass img")

ai você esta selecionando todas as imagens que estajam por exemplo, nessa estrutura html:
<div>

<div class="anyClass">
< img src... />
< img src... />
< img src... />
</div>

Aqui estamos atribuindo uma acão para o click nas imagem

$(".anyClass img").click(function(){ 
//código
});

assumindo que os images tenham o atriibuto src, e realsrc

<div id="imgMaior">
 <img src="primeiraImagem.jpg" />
<div>
<div class="anyClass">
<img src="thumb.jpg" realsrc="imagemreal.jpg" />
<img src="thumb.jpg" realsrc="imagemreal.jpg" />
<img src="thumb.jpg" realsrc="imagemreal.jpg" />
<img src="thumb.jpg" realsrc="imagemreal.jpg" />
<img src="thumb.jpg" realsrc="imagemreal.jpg" />
</div>

$(".anyClass img").click(function(){ 
	//this é a imagem que foi clicada em qualquer momento
	$("#imgMaior img").attr("src", $(this).attr("realsrc"));
});

só lembrando, tem que colocar o js dentro do $(document).ready()

$(document).ready(function(){
	$(".anyClass img").click(function(){ 
		//this é a imagem que foi clicada em qualquer momento
		$("#imgMaior img").attr("src", $(this).attr("realsrc"));
	});
})

seria bom você colocar de fundo no #imgMaior um gif de loading , pois a imagem pode demorar a carregar um poquinho.


no caso , para integrar com o carousel, você teria que selecionar a div onde as imagens estão no carousel.
$(".divCarousel img")

Edição feita por: Édipo Costa Rebouças, 05/06/2009, 10:35.

[Kahor]

Aqui tem uns carrosel muito loko

http://alfinet.wordp...t-2/#comment-28

[Maykel Esser]

Perfeito édipo!

[codebox]<script>
$(function() {
$(".thumbs").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
$(document).ready(function(){
$(".thumbs img").click(function(){
$("#imgMaior img").attr("src", $(this).attr("realsrc")); // faz com que, ao clicar, troque a img grande
});
})
</script>
[/codebox]

Consegui entender um pouco mais... realmente essas coisas facilitam nossa vida, hein?!

Valeu mesmo!!!!!

OBS: Alguns dos scripts desse Kahor são interessantes, hein!

[Édipo Costa Rebouças]

dando uma olhada nos scripts que o kahor passou... vi esse:

http://www.dhteumeul...deshow-img.html

é quase o que vc quer...

[Maykel Esser]

bom, agora que esse já está 80% montado, vou prosseguir nesse que está funfando

esse aí é esquisito oO, enfim...

Agora quero só enfeitar o negócio. Quero colocar um fadeout e um fadein quando trocar a imagem... fiz assim, deu certo, mas ficou esquisito:

[codebox]<script>
$(function() {
$(".thumbs").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
$(document).ready(function(){
$(".thumbs img").click(function(){
$("#imgMaior img").fadeOut("slow"); // apaga o fade
$("#imgMaior img").attr("src", $(this).attr("realsrc")); // faz com que, ao clicar, troque a img grande
$("#imgMaior img").fadeIn("slow"); // aparece o fade
});
})
</script>
[/codebox]

Tem hora que dá certo, porém depende do carregamento da imagem, ele troca a imagem antes do fade terminar, mesmo se eu acelerar o processo colocando ("fast") nos negócios acho que estou fazendo na ordem errada, ahahah, alguma dica?