Bom, primeiro desculpe o sumiço mas isso é consequência de muito trabalho na Webroom e em um projeto pessoal que em breve vocês irão conhecer. Tenho alguns e-mails para responder e ainda não tive tempo, mas prometo em breve dar um retorno a todos.
Parando um pouco de dar desculpas, vou apresentar hoje uma galeria que fiz onde a utilização dela é muito simples e acredito que ela seja bem útil, pois funciona com e sem JQuery (ou seja com e sem JavaScript habilitado).
Como todos já devem imaginar o primeiro passo e baixar a última versão do JQuery. Depois basta montar a galeria seguindo os passos abaixo. Veja que a estrutura da galeria é bem simples:
- galeria.js
- estilo.css
- galeria.html
- além do jquery-1.3.2.min.js
Gostaria de apresentar um preview para vocês, mas infelizmente estou tendo um pequeno problema para acessar o FTP do meu blog e não consigo disponibilizar a galeria pronta e funcionando (mas nada impede vocês de copiarem o código e utilizar a galeria).
Abaixo segue o código HTML da galeria:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Galeria</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="galeria.js"></script>
<link href="estilo.css" type="text/css" media="all" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="painel_noscript">
<ul class="galeria_noscript" >
<li><a href="#"><img src="imagens/200/foto1.jpg" width="200" height="200" alt="Foto 1" /></a></li>
<li><a href="#"><img src="imagens/200/foto2.jpg" width="200" height="200" alt="Foto 2" /></a></li>
<li><a href="#"><img src="imagens/200/foto3.jpg" width="200" height="200" alt="Foto 3" /></a></li>
</ul>
</div>
<ul class="navegacao" >
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</ul>
</div>
</body>
</html>
Agora segue o código JavaScript da galeria:
var itens = 0; //Serve como o contador de itens realizados até aquele determinado momento.
var limiteItens = 0; //É a quantidade limite de elementos dentro da galeria. Ela é recuperada automaticamente de acordo com a quantidade de LI dentro da UL principal.
var tempo = 6000; //Em milisegundos 5000 = 5 segundos
var widthImagem = 0; //Tamanho da imagem da galeria. Serve para andar o tamanho correto de acordo com o tamanho na tag IMG
var heightImagem = 0; //Tamanho da imagem da galeria. Serve para andar o tamanho correto de acordo com o tamanho na tag IMG
var timer; // Este é o timer da galeria
var tempoEfeito = 1300; //Velecidade da transição
$(document).ready(function(){
startTimer();
if($('.galeria_noscript').length != 0 ){
$('.painel_noscript').removeClass('painel_noscript').addClass('painel');
$('.galeria_noscript').removeClass('galeria_noscript').addClass('galeria');
$(".navegacao a").click(function () {
itens = parseInt($(this).attr("href").replace("#",""));
rodar($(this).attr("href"),false);
clearTimeout(timer);
timer = setTimeout(startTimer,tempo); //Se usuário clicou no numero, então para o timer e inicializa ele novamente aqui.
});
limiteItens = $('.galeria li').length;
widthImagem = $(".galeria li img").attr("width");
heightImagem = $(".galeria li img").attr("height");
$('.container').css({'width' : (widthImagem)+'px','height' : (heightImagem)+'px'});
$('.painel').css({'width' : (widthImagem)+'px','height' : (heightImagem)+'px'});
$('.galeria').css({'width' : (limiteItens * widthImagem)+'px'});
$('.navegacao').css({'display' : 'block'});
}
});
startTimer = function(){
if(itens == limiteItens){itens = 0}
itens= 1 + itens;
rodar(itens,true);
timer = setTimeout(startTimer,tempo);
}
classeAtual = function(elemento){
$('.navegacao li a').removeClass('atual');
$('.navegacao li a[href=#'+ elemento +']').addClass('atual');
}
rodar = function(idBanner,auto) {
if(!auto)
{ idBanner = idBanner.replace(/#/, "");}
classeAtual(idBanner); // Seta a classe atual na numeração
var tam = 0;
if(idBanner != 1)
{ tam = (idBanner - 1) * widthImagem; }
$('.galeria').animate({
left: "-"+ tam+"px"
},tempoEfeito);
}
Agora para deixar funcionando corretamente, coloque este CSS:
@charset "utf-8";
/* Galeria */
.container{ height:218px; }
/* Sem JavaScript Habilitado */
.container .painel_noscript {width: 200px; height: 200px; display:block;overflow:hidden;}
.container .galeria_noscript {width: 220px; height: 200px; display:block; position:absolute; overflow:scroll; list-style:none; margin:0; padding:0; }
.container .galeria_noscript li a {display:block; }
.container .galeria_noscript li a img { border:none; }
/* JavaScript Habilitado */
.container .painel { display:block; overflow:hidden; position:relative;}
.container .galeria {list-style:none; margin:0; padding:0; overflow:hidden; position:absolute;}
.container .galeria li {float:left;}
.container .galeria li a { display:block;}
.container .galeria li a img { border:none; }
.container .navegacao {display:none; overflow:hidden; list-style:none; margin:0; padding:0; }
.container .navegacao li {float:left; border:1px solid #000;}
.container .navegacao li a { width:22px; height:18px; display:block; color:#000; font-weight:bold; text-decoration:none; text-align:center;}
.container .navegacao li a.atual {background-color:#FF0000;}
Para concluir crie uma pasta de imagens e o tamanho das imagens deve ser colocado de forma correta no HTML. Preste atenção nos diretórios e está pronto.
Eu realmente gostaria de disponibilizar para vocês uma prévia da galeria, mas se vocês tiverem problemas deixem seus comentários que irei responder. Assim que resolver meu problema de FTP disponibilizarei essa galeria.
Seja o primeiro! 
Tags: 
