…
Olá, em um post anterior eu comentei sobre o LightBox e prometi falar um pouquinho sobre ele, então vamos lá.
O LightBox, resumidamente e a grosso modo, é um conjunto de bibliotecas JavaScript que são utilizadas para exibição de fotos e imagens onde o efeito é realmente muito surpreendente, muito bonito, ao menos eu acho.
Bem, não vamos programar nada, como eu disse o LightBox é uma biblioteca e portanto já está prontinha para usarmos, usaremos um exemplo bem simples exibindo apenas 2 fotos / imagem.
Então, como de costume, vamos ao HTML com o index.html ou index.php como preferir.
<html>
<head>
<title>.: LightBox :.</title>
<link rel=”stylesheet” href=”css/galeria.css” type=”text/css” media=”screen” />
<!– incluindo os arquivos da biblioteca LightBox–>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
</head>
<body>
<div id=”galeria”>
<ul>
<a href=”fotos/image1.jpg” rel=”lightbox[roadtrip]“>
<img src=”fotos/image1.jpg” class=”thumb”></a>
<a href=”fotos/image2.jpg” rel=”lightbox[roadtrip]“>
<img src=”fotos/image2.jpg” class=”thumb”></a>
</ul>
</div>
</body>
</html>
O arquivo galeria.css
body{
background-color:#000000;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
.thumb{
border:1px solid #fff;
border-bottom:10px solid #fff;
padding:2px;
width:120px;
height:100px;
}
Acima um exemplo bem simples da utilização do LightBox, é interessante criar a galeria utilizando miniaturas(thumbs) geradas automaticamente pelo PHP e você pode ver como criar miniaturas de fotos em outro post ‘ Criar Thumb (miniatura) com PHP‘.
Vamos continuar no LightBox, as linhas que adicionam o javascript, e elas são 3, são necessárias para que o lightbox funcione, então ao baixar o lightbox, descompacte-o e mantenha os arquivos nos seus diretórios originais, o arquivo lightbox.css também é necessário, então se você precisar de formatação CSS ou funções javascript, crie outros (js e css) arquivos preservando os do lightbox ok.
Agora você me pergunta, onde está a galeria a que se refere no título e eu lhe respondo junte 2 Posts desse blog e você terá uma galeria! ;)
De toda forma minha intenção não foi de explicar como funciona o LightBox e sim de dizer que ele existe, é muito fácil de usar e o principal de tudo o visual é perfeito… então procurem um pouco no google e encontrarão muita coisa a respeito do LightBox!
Para baixar o lightbox em sua última versão visite LightBox aproveite e dê uma navegada no site deles, tem muitos exemplos legais lá.
O link para ver o Exemplo funcionando
E agora como eu sou muito bonzinho ;) o download de tudo pronto download
Até o próximo Post.
……
Vamos ver como fazer um Preload como o do Google.
Olá, agora vamos ver como criar o preload mais conhecido da internet, o preload do google, isso mesmo aquela coisa minúscula e vermelha no canto direito da tela.
Vamos ao bom e velho HTML (index.html)
<html>
<head>
<title> Loader :: </title>
<script src=”load.js” type=”text/javascript”></script>
<link href=”load.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
<div id=”conteudo”>
<!– -aqui vai todo o conteudo do site –>
<a href=”index.html”>Testar novamente</a>
<iframe src=”http://news.google.com.br”></iframe>
</div>
<!– funcao que ira criar o elemento div loader –>
<!– esta chamada pode ser a ultima linha dentro do body –>
<script>loading()</script>
</body>
</html>
Acima utilizei dentro do conteúdo da página (div conteudo) um iframe, nada de especial, foi apenas uma forma que encontrei de fazer com que a página demorasse mais que 1 segundo para carregar dando tempo aparecer o texto “Carregando…”. Não vá me colocar um iframe na sua página hein! Coloque o conteúdo normalmente, basta que estejam dentro da DIV conteudo. :)
Vamos ao arquivo JavaScript – salve-o como load.js
function loading()
{
//criando um novo elemento div
x = document.createElement(“div”)
//atribuindo o id ao novo elemento
x.id = “loader”
//adicionando conteudo formatado pelo CSS na div loader
x.innerHTML = ’<div id=”info” class=”info”>’
x.innerHTML += ’<p>Carregando…</p></div>’
// nova div ira aparecer depois da div conteudo
conteudoDiv = document.getElementById(“conteudo”)
//inserindo a div loader dentro do body e apos a div conteudo
document.body.insertBefore(x, conteudoDiv)
}
//função aguarda a pagina carregar para alterar
//propriedade display do elem. fazendo sumir
window.onload = function(){
//obtendo as propriedades do elemento div conteudo
obj2 = document.getElementById(“conteudo”)
//exibindo a div conteudo (display none no CSS)
obj2.style.display = ‘block’
//obtendo as propriedades do elemento div loader
obj = document.getElementById(“loader”)
//removendo o conteudo da div loader
obj.innerHTML = “”
//ocultando a div loader apos o carregamento da pagina
obj.style.display = ‘none’
}
Muito simples, mas foi a forma que encontrei de faze-lo, lembrando que eu também estou aprendendo e procurando explorar ao máximo os recursos do JS.
Vamos ver o arquivo CSS – salve-o como load.css
body{
margin:0px;
padding:0px;
}
#loader{
position:absolute;
width:100%;
height:600px;
}
#conteudo{
display:none;
}
.info{
width:100px;
float:right;
margin-right:2px;
margin-top: 2px;
}
.info P{
margin:0;
padding:3px;
background-color:red;
font:11px verdana;
color:#fff;
text-align:center;
}
Como perceberam o que acontece é que a o atributo DISPLAY do elemento DIV Conteudo dentro do BODY em primeira instância está definida no CSS como NONE, fazendo com que seu conteúdo não apareca no html, em seguida a chamada a função loading() é feita criando um novo elemento DIV dentro do BODY com o texto carregando e sua formatação no CSS, após o carregamento da página, nesse caso apenas um IFRAME, a DIV conteudo tem sua propriedade DISPLAY alterada para BLOCK, ou seja, passa a aparecer no HTML, após isso no window.onload a propriedade da DIV Loader que foi criada tem sua propriedade DISPLAY alterada para NONE, ou seja, deixa de aparecer e como essa div foi criada pelo javascript, mais precisamante pela função loading(), ela não aparece no código HTML.
É isso, não há muito segredo nesse exemplo, nada mais justo agora do que ver funfando!
Mas só uma coisa antes, se esse exemplo lhe ajudar por favor comente. agora veja o Exemplo Loader do Google
Rafael Clares
Gerando miniaturas de imagens com PHP
Olá, veremos como gerar miniaturas de imagens (thumb) para uma galeria de fotos, apresentação de produtos ou qualquer outra aplicação. É muito comum encontrarmos sites que exibem miniaturas de imagens ainda da forma antiga, que trata-se de simplesmente redimensionar a imagem com algum software e criar uma pasta chamada thumbs ou miniaturas, muitos aplicativos utilizam essa solução, mas se você pensar em alguma solução mais inteligente que dispense o trabalho do webdesigner por ex. um cms (gerenciador de conteúdo) fica difícil utilizar essa antiga solução, imagine vender ao seu cliente um sistema onde ele possa gerenciar seu conteúdo sem precisar de você, agora imagine que ele queira colocar miniaturas de fotos no site….dai complicou um pouco não é ? ele terá que enviar todas as imagens para você redimensionar e envia-las de volta para ele poder inserir no site, isso não parece ser um sistema com gerenciador de conteúdo, vamos tomar como exemplo um sistema para imobiliárias onde o proprietário cadastra os imóveis e envias as fotos para o site, agora tente imaginar a página principal com os imóveis em destaque……..estranho né, imagine um anúncio com uma foto 800×600 na página principal…agora imagine 20 anúncios como esse, eu acho que fica feio e você? Também não é, então vamos ver como mostrar a miniatura da foto original enviada para o sistema, acredite isso é muito simples!
Em 1º lugar verifique se o seu php está com a biblioteca gd ou gd2 instalada, se não estiver baixe o easyphp, instale e marque a opção gd2 em php extensions, alias o easyphp é maravilhoso, ele já instala o apache, php5 e mysql, se você não conhece está perdendo tempo, falarei sobre ele em um outro post.
Vamos ao arquivo index.php
<html>
<head>
<title>.: Thumbs :.</title>
</style>
</head>
<body>
<img src=”thumb.php?img=image1.jpg” title=”imóvel cod 01″>
<img src=”thumb.php?img=image2.jpg” title=”imóvel cod 02″>
</body>
</html>
Note que acima no src estamos passando a url da imagem para para o arquivo thumb.php, ao invés de passar diretamente a imagem, isso porque o arquivo thumb.php está encarregado de redimensionar a imagem original, mas esse redimensionamento ocorre somente na visualização, ele não altera propriamente a imagem, ela continua no seu tamanho original, apenas o que é mostrado é que foi redimensionado, isso tem que ficar claro, nenhuma imagem pequena é gerada, esse é o truque, o arquivo thumb.php apenas muda as propriedades da imagem para a visualização ok ?
Claro que nesse exemplo eu utilizei uma url pré-definida, mas para o caso de um sistema essa url deveria ser retornada por ex. de uma consulta SQL, no sisteminha (veja aqui o sisteminha) que fiz a algum tempo atrás eu criei uma tabela mais ou menos assim: codimovel_f , urlFoto, descFoto … onde no momento do upload da foto era feita uma inserção no banco de dados contendo a url da foto que acabara de ser enviada, para não repetir os nomes das imagens e eu não ter que ficar renomeando eu utilizei a função MD5() do PHP que gera um nome/string único, em um artigo posterior falarei sobre o MD5.
Vamos ver o tal arquivo chamado thumb.php
<?php
#recebendo a url da imagem
$filename = $_GET['img'];
#Cabeçalho que ira definir a saida da pagina
header(‘Content-type: image/jpeg’);
#pegando as dimensoes reais da imagem, largura e altura
list($width, $height) = getimagesize($filename);
#setando a largura da miniatura
$new_width = 120;
#setando a altura da miniatura
$new_height = 100;
#gerando a a miniatura da imagem
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
#o 3º argumento é a qualidade da miniatura de 0 a 100
imagejpeg($image_p, null, 50);
imagedestroy($image_p);
?>
Obs: Para salvar a imagem/thumb em um diretório altere a linha
imagejpeg($image_p, null, 50);
para
imagejpeg($image_p, ‘/diretorio/nomeImagem.jpg/’, 50);
Onde /diretorio/nomeImagem.jpg é o caminho e nome onde deseja armazenar a miniatura.
Muito simples não ? Agora você pode usar o CSS para dar uma geral nesse exemplo, ou pode fazer a coisa ficar mais bonita, você pode usar o lightbox, clique e veja o que você poderá fazer com LightBox! até a próxima.
Download do pacote: thumbs.rar
Aposto que quer ver funcionando! então está ai o Thumbs funcionando
Rafael Clares
…..
Utilizando eventos sem declarar no HTML
Olá, nesse minúsculo tutorial irei mostrar como utilizar eventos javascript sem ter que declara-los no html, ou seja, vamos usar os eventos deixando o html 100% limpo, sem aqueles onclick, onmouseover…e por ai vai.
Vamos começar pelo html
<html>
<head>
<title>Eventos</title>
<script src=”eventos.js” type=”text/javascript”></script>
</head>
<body>
<ul>
<form name=”contato” id=”contato”>
<input type=”button” name=”btn_1″ id=”btn_1″ value=”btn1″ />
<input type=”button” name=”btn_2″ id=”btn_2″ value=”btn2″ />
</form>
</ul>
</body>
</html>
bem isso foi o mais puro que consegui para uma página html, notem que não há eventos nos botões.
Vamos ao Javascript, salve-o como eventos.js
function CarregaEventos()
{
//vamos atribuir as propriedades dos botoes as variaveis obj1 e obj2
obj1 = document.getElementById(“btn_1″)
obj2 = document.getElementById(“btn_2″)
//aqui declaramos o evento onclick para o botao 1
obj1.onclick = function(){
alert(‘diga oi’)
}
//aqui declaramos o evento onclick para o botao 2
obj2.onclick = function(){
alert(‘diga tchau para os btns’)
// mudamos as propriedades dos botoes p/ nao aparecam
obj1.style.display = ‘none’
obj2.style.display = ‘none’
}
}
//funcao que carrega/prepara os eventos para os botoes
window.onload = function()
{
// apos o carregamento de toda a pagina a funcao é chamada
// e ira aguardar pelas acoes do usuario
CarregaEventos()
}
A função window.onload é equivalente a <body onload=”funcao()”> , mas nesse caso acabaria fugindo de nosso propósito. Repare que após atribuir as propriedades dos botões para as variáveis nós passamos a ter acesso aos seus métodos, ou seja, onde obj1.onclick realiza a chamada ao metodo onclick do botão, poderiamos usar qualquer outro evento javascript cabíveis aos botões, por ex: obj1.onMouseOver, obj1.onMouseDown ….and more….
É isso, algo simples, agora fica a cargo de vocês usarem a criatividade para utilizar da melhor maneira essa pequena solução, que para mim é muito útil, principalmente na hora de fazer a manutenção, dessa forma nós alteramos somente o javascript e o html continua intacto e limpo.
….
Busca de endereços por cep com Ajax
Busca por cep c/ Ajax utilizando o webservice da republicavirtual
Estamos sempre procurando por soluções cada vez mais simples e rápidas, a consulta por cep é um exemplo disso, é comum visitarmos sites que tenham pequenos serviços como previsão do tempo, índices da bolsa de valores, cotação das principais moedas, etc … de toda forma são serviços que faz com que os visitantes voltem á página mesmo que exporadicamente, a consulta por cep pode ser encontrada em diversos sites pessoais ou comerciais, em alguns a busca parece complicada ou deve-se navegar por diversas áreas do site para se obter o resultado da consulta, neste exemplo vamos ver uma maneira simples (como tudo por aqui) de consultar um endereço por cep.
O resultado é uma página muito leve com resposta rápida. Veja em Exemplo Cep
Espero ter ajudado de alguma forma, até a próxima….
Rafael Clares
Gerando XML com PHP5
Vamos ver como gerar um arquivo XML simples usando PHP5 e API DOM, se você não possui o PHP5 baixe o EasyPHP.
<?php
#versao do encoding xml
$dom = new DOMDocument(“1.0″, “ISO-8859-1″);
#retirar os espacos em branco
$dom->preserveWhiteSpace = false;
#gerar o codigo
$dom->formatOutput = true;
#criando o nó principal (root)
$root = $dom->createElement(“agenda”);
#nó filho (contato)
$contato = $dom->createElement(“contato”);
#criando e setanto o nomes e atributos dos elementos xml (nós)
$nome = $dom->createElement(“nome”, “Rafael Clares”);
$telefone = $dom->createElement(“telefone”, “(0xx11) 5500-0055″);
$endereco = $dom->createElement(“endereco”, “Av. longa n 1″);
#adiciona os nós (informacaoes do contato) no nó contato
$contato->appendChild($nome);
$contato->appendChild($telefone);
$contato->appendChild($endereco);
#adiciona o nó contato no nó superior (root) agenda
$root->appendChild($contato);
$dom->appendChild($root);
$dom->save(“contatos.xml”); #salvando o arquivo xml
header(“Content-Type: text/xml”); #cabeçalho da página
echo $dom->saveXML(); # imprime o xml na tela
?>
Neste exemplo utilizamos dados pré-definidos, mas poderiamos ter utilizado o resultado de uma consulta SQL.
Exemplo funcionando Exemplo XML
Agora, o resultado é excelente, porém, repetir esses comandos acima para cada contato é bem desgastante, vejamos uma função para automatizar a criação dos contatos.
<?php
function addContato($document, $nome, $telefone, $endereco) {
$contato = $document->createElement(“contato”); #criar contato
$nomeElm = $document->createElement(“nome”, $nome); #criar nome
$telefoneElm = $document->createElement(“telefone”, $telefone); #telefone
$enderecoElm = $document->createElement(“endereco”, $endereco); #endereco
$contato->appendChild($nomeElm);
$contato->appendChild($telefoneElm);
$contato->appendChild($enderecoElm);
return $contato;
}
$dom = new DOMDocument(“1.0″, “ISO-8859-1″);
$dom->preserveWhiteSpace = false;
$dom->formatOutput = true;
$root = $dom->createElement(“agenda”);
#utilizando a funcao para criar contatos
$contatoPaulo = addContato($dom, “Paulo J.”, “(11) 5555-4444″, “Av. Principal, 80″);
$contatoJoao = addContato($dom, “Joao S.”, “(11) 4444-5555″, “R. da Feira, 70″);
#adicionando no root
$root->appendChild($contatoPaulo);
$root->appendChild($contatoJoao);
$dom->appendChild($root);
$dom->save(“agenda.xml”); #salvando o arquivo
header(“Content-Type: text/xml”);
echo $dom->saveXML(); #mostrar dados na tela
?>
A função acima produz o mesmo resultado que o primeiro exemplo, porém de uma forma mais simples na hora de criar os contatos, sendo assim para utilizar em seus estudos aconselho utilizar a função do segundo exemplo.
Exemplo funcionando Exemplo XML utilizando a função
Até a próxima,
Rafael Clares
