Galeria de Foto
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!
Discussão (3)
Carregando comentários...