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