Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Weikm@n

Galeria de Foto

Por , em Javascript

Recommended Posts

Weikm@n    0

Weikm@n
Postado

Olá galera, tw desenvolvendo uma galeria de foto, parecida cm a do orkut, tenho um scrip mto legal, peguei em uma video aula na net, lah no site Upinsite

 

pois bem, a galeria eh cm um carosel legal, td funcionando beleza, soh que eu queria bota um botao para avanca e retorna igual uma galeria comun, e tbm igual o orkut :), criei ate as imagens para avancar e voltar, pois bem, segue o codigo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>foto</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/principal.css" rel="stylesheet" type="text/css" />
<link href="css/foto.css" rel="stylesheet" type="text/css" />
<link href="css/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$(function(){

$(".carousel").jCarouselLite({
	btnNext: " .next",
	btnPrev: " .prev",
	mouseWheel: true,
	scroll: 7,
	visible: 8,
	speed: 1000,
});

$(".carousel img").click(function () {
	$(".img img").attr("src", $(this).attr("id"));
});

$(".ctrlf #pro").click(function(){

});
});

</script>
</head>

<body>

<div id="carousel">
<button class="prev"></button>
<button class="next"></button>
<div class="carousel">
<ul>
<li><img id="imgs/coberturas/01/Koala.jpg" src="timthumb.php?src=imgs/coberturas/01/Koala.jpg&h=74&zc=0" height="74" border="0" /></li>
<li><img id="imgs/coberturas/01/Desert.jpg" src="timthumb.php?src=imgs/coberturas/01/Desert.jpg&h=74&zc=0" height="74" border="0" /></li>
<li><img id="imgs/coberturas/01/Tulips.jpg"src="timthumb.php?src=imgs/coberturas/01/Tulips.jpg&h=74&zc=0" height="74" border="0" /></li>
<li><img id="imgs/coberturas/01/Jellyfish.jpg" src="timthumb.php?src=imgs/coberturas/01/Jellyfish.jpg&h=74&zc=0" height="74" border="0" /></li>
<li><img id="imgs/coberturas/01/Hydrangeas.jpg" src="timthumb.php?src=imgs/coberturas/01/Hydrangeas2.jpg&h=74&zc=0" height="74" border="0" /></li>
<li><img id="imgs/coberturas/01/Tulips.jpg" src="timthumb.php?src=imgs/coberturas/01/Tulips.jpg&h=74&zc=0" height="74" border="0" /></li>
</ul>
</div>
</div>


<div class="img">
<div align="center">
<img src="imgs/coberturas/01/Koala.jpg" />
</div>
</div>

<div align="center" class="ctrlf">
<img src="imgs/layout/foto/ant.jpg" id="ant" /><img src="imgs/layout/foto/pro.jpg" id="pro" />	
</div>
</body>
</html>

 

bem, a div img mostra a imagem grande qnt você clica nas miniaturas, nao sei se fiz certo em bota o link no id, pq eu tw usando um script pra gerar as miniaturas, entao vcs podem vr q ele pega o id e atribue no src da img dentro da div img, ai criei uma div cm a class ctrlf cm duas imagems pra avancar e retornar, iniciei ate o codigo lah encima, mas nao sei o q fazer depois, rsrsr, jah q as imagens nao seguem ordem numericas,

$(".ctrlf #pro").click(function(){

});

bem, eh isso! ajudem favor! desde jah, Agradeço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

só ver na documentação cara:

 

http://www.gmarwaha.com/jquery/jcarousellite/#doc

 

        btnNext: ".next",
       btnPrev: ".prev"

 

fiz um com o Cycle: http://www.wbruno.com.br/blog/2011/04/15/carousel-jquery-usando-cycle/

 

=) a documentação é a tua melhor amiga.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weikm@n    0

Weikm@n
Postado

só ver na documentação cara:

 

http://www.gmarwaha.com/jquery/jcarousellite/#doc

 

        btnNext: ".next",
       btnPrev: ".prev"

 

fiz um com o Cycle: http://www.wbruno.com.br/blog/2011/04/15/carousel-jquery-usando-cycle/

 

=) a documentação é a tua melhor amiga.

 

certo, mas jah percebeu q no meu script jah tah definido esses botoes? pra ele pular de 7 em 7 o efeito do carosel

$(".carousel").jCarouselLite({
	btnNext: " .next",
	btnPrev: " .prev",
	mouseWheel: true,
	scroll: 7,
	visible: 8,
	speed: 1000,
});

jah tao no meu codigo, eles sao pra passar e voltar as miniaturas de 7 em 7, queria uma nova a baixo pra passar de uma a uma, obrigado,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weikm@n    0

Weikm@n
Postado

só ver na documentação cara:

 

http://www.gmarwaha.com/jquery/jcarousellite/#doc

 

        btnNext: ".next",
       btnPrev: ".prev"

 

fiz um com o Cycle: http://www.wbruno.com.br/blog/2011/04/15/carousel-jquery-usando-cycle/

 

=) a documentação é a tua melhor amiga.

amigo, vw tentar explicar melhor, o carrosel tah funcionando perfeitamente, mas o carrosel eh soh pra mudar as miniaturas, certo?

o q nao consigo eh passar as imagens grandes, tipo.

meu script tah pegando a class carousel e o elento img, q eh a miniatura, qnd eu clica, ele pegar o valor do src e manda pra class .img pra img q tm lah dentro, no caso, eu botei pra pegar do id, pq no src tah o script pra gerar a miniatura, dei uma olhada no seu carosel, mto bacana, esse aki nao tw tendo problema nele, certo, carosel funcionando, os botoes .prev e .next tao funcionando, ele tah pronto, mas ai, precisa mostrar a imagem grande, e usei o metodo explicado acima.

$(".carousel img").click(function () {
               $(".img img").attr("src", $(this).attr("id"));
       });

agora soh q tbm quero passar a imagem pelo botao abaixo da imagem, esse jah nao tm quase nada a vr cm o carousel, vai tr a vr pq vai pegar os valores lah de cima, pq eu jah tw usando o btnNext pra avancar o carousel, e o outro tbm, minha duvida eh nessa interacao da imagem grande cm o carosel, espero ter cido mais claro, obrigado!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito