Oct/090
jQuery Lightbox Clone
Imagem do Lightbox
Script que chama o pretty photo.
$(document).ready(function(){
$(".class-galeria a[rel^='lightbox']").prettyPhoto({theme:"dark_rounded"});
});
Mais antes exite o arquivo que completa a janela: jquery.pretty-photo.js
O script completo fica assim:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
</script>
<script type="text/javascript" src="js/pretty-photo/jquery.pretty-photo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".class-galeria a[rel^='lightbox']").prettyPhoto({theme:"dark_rounded"});
});
</script>
Existe ainda o arquivo de configuração do css que é indispensável para a jenela.
Script demo para visualização: CLIQUE AQUI
Script completo: CLIQUE AQUI
Oct/091
z-index com jQuery Galeria funcional
Script:
$(document).ready(function(){
var z = 0;
var inAnimation = false;
$("#fotos img").each(function(){
z++;
$(this).css("z-index", z);
});
function swapFirstLast(isFirst){
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst){
processZindex = z; direction = "-"; newZindex = 1; inDeCrease = 1;
}
else {
processZindex = 1; direction = "-"; newZindex = z; inDeCrease = -1;
}
$("#fotos img").each(function(){
if($(this).css("z-index") == processZindex){
$(this).animate({"top" : direction + $(this).height() + "px"}, "slow", function(){
$(this).css("z-index", newZindex)
.animate({"top" : "0"}, "slow", function(){
inAnimation = false;
});
});
} else {
$(this).animate({"top" : "0"}, "slow", function(){
$(this).css("z-index", parseInt($(this).css("z-index")) + inDeCrease);
});
}
});
return false;
}
$("#proximo a").click(function(){
return swapFirstLast(true);
});
$("#anterior a").click(function(){
return swapFirstLast(false);
});
});
Script Completo CLIQUE AQUI
Oct/092
Carregando o jQuery das APIs AJAX do Google.
Para suas aplicações ficarem sempre atualizadas utilize as APIs AJAX do Google para isso! E como fazer da maneira mais fácil e ainda deixar o código limpo?
Vamos lá para a resposta.
Primeiro vamos para a definição do Google para isso!
A API AJAX de bibliotecas é uma rede de distribuição de conteúdo e arquitetura de carregamento das bibliotecas JavaScript de código aberto mais populares.
As APIs AJAX do Google trabalham com variadas bibliotecas como citado acima, segue uma delas:
Dentre outras...
Para a nossa aplicação vamos usar o jQuery.
Primeiro carregamos o jQuery e logo em seguida a função google.load() com o nome do jQuery e a versão.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
Logo depois você joga a função ou script de jQuery que deseja chamar
Para o jQuery temos as seguintes versões:
versões: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2
Para cada versão você também pode usar a uncompressed fazendo assim no script
<script type="text/javascript">
google.load("jquery", "1.3.2", {uncompressed:true});
</script>
O google dar a seguinte informações para os usuários do jQuery:
Nas versões 1.2.5 e 1.2.4 não são hospedadas devido aos seus curtos e instáveis ciclos de vida.
Mais informações acesse o site do jQuery Google para isso:
Uma observação para isso bem interessante e fundamental:
Se os servidores do Google sair do ar, o pior acontece hehe!
Abraços a todos!
Oct/096
Trocando o texto quando dar foco em campo
Script simples:
<script type="text/javascript">
function limpar(campo){
if (campo.value == campo.defaultValue){
campo.value = "";
}
}
function escrever(campo){
if (campo.value == ""){
campo.value = campo.defaultValue;
}
}
</script>
Como ficará no campo de texto:
<input type="text" name="nome_campo" id="nome_campo" value="Clique Aqui para o texto sair!" onfocus="limpar(this);" onblur="escrever(this);" />
Veja o Script rodando: CLIQUE AQUI
Nov/080
Comparando Datas com JavaScript
<script language="javascript">
function checarDatas(){
var NomeForm = document.Formulario;
var data_1 = NomeForm.data_01.value;
var data_2 = NomeForm.data_02.value;
var Compara01 = parseInt(data_1.split("/")[2].toString() + data_1.split("/")[1].toString() + data_1.split("/")[0].toString());
var Compara02 = parseInt(data_2.split("/")[2].toString() + data_2.split("/")[1].toString() + data_2.split("/")[0].toString());
if (Compara01 > Compara02) {
document.getElementById("resultado").innerHTML = "Data do Campo 01 Maior";
}
else {
document.getElementById("resultado").innerHTML = "Data do Campo 01 Menor";
}
return false;
}
</script>
<div id="resultado"></div>
<form method="post" action="Teste.pl" name="Formulario" onsubmit="return checarDatas()">
campo01: <input type="text" id="data_01" /><br />
campo02: <input type="text" id="data_02" />
<input type="submit" />
</form>
Acesse também a Webly
