Sex

17

Out

2008

00:00

Tem coisas que me deixam absolutamente encantada. Uma das minhas preferidas é o Highslide JS, uma biblioteca javascript escrita por Torstein Honsi com a qual é possível fazer coisas que parecem mágica

Uso e recomendo! Este tutorial se destina àqueles que estão mortos de curiosidade para saber que mágicas são estas. E vou dizer mais, são mágicas muito fáceis de fazer (aliás, este é um dos principais motivos do meu encantamento com este software de altíssima qualidade que ainda por cima é totalmente gratuito).

Alguns exemplos

Antes de começar a falar da instalação e de alguns aspectos técnicos achei melhor "adoçar o bico" dos leitores. São dois exemplos simples, mas de grande efeito.

Tiê-sangue, o pássaro símbolo da Mata Atlântica

Ponha o cursor do mouse aqui Fechar Este é apenas um texto para mostrar mais uma das qualidades do Highslide.

Preparando o terreno

Se tudo é tão simples assim, então porque cargas d'água este tutorial foi classificado como sendo de nível avançado? Explico: porque os candidatos a usuários do Highslide precisam conhecer um pouco de uma porção de assuntos. Os principais são JavaScript, CSS, HTML, PHP e AJAX. Não é preciso ser um expert nestes assuntos, conhecimentos gerais já são suficientes para poder entender o que cada uma destas ferramentas pode proporcionar e como podemos interligá-las.

Dito isto (espero que não tenha espantado ninguém), chegou a hora de preparar o terreno para poder acionar o Highslide. Vá até o site do autor (está na introdução deste tutorial e nas referências) e baixe a versão mais atualizada. Não baixe nenhuma das versões de upgrade, clique no botão [Download now!] para obter o pacote completo.

Depois disto, descompacte o arquivo zip baixado, crie um diretório (ou pasta, como quiser) na área do seu site com o nome que você quiser (eu usei highslide mesmo) e faça o upload dos arquivos e do diretório graphics que estão no diretório highslide obtido na descompactação para este diretório recém criado na área do site.

Observe que, entre outros, existem dois arquivos de javascript: o highslide-full.js e o highslide-full.packed.js. Ambos funcionam exatamente da mesma forma porque o highslide-full.packed.js é apenas o highslide-full.js compactado.

Configurando o script

Se você abrir o highslide-full não compactado num editor de texto, vai encontrar uma porção de parâmetros de configuração logo no início do script. O parâmetro mais importante é o hs.graphicsDir. Este parâmetro indica o caminho para o diretório que contém as imagens usadas pelo script para fazer o contorno das janelas pop-up, botões, etc. Se este caminho não for indicado corretamente, não tem como o script funcionar.

Por exemplo, se criamos um diretório chamado highslide no diretório raiz do site, então este parâmetro precisa ter o seguinte valor:

hs.graphicsDir = 'highslide/graphics/';

Podemos fazer esta alteração diretamente no highslide-full.js, mas existem dois inconvenientes: não poderemos usar a versão compactada do script (porque esta versão não é editável) e, toda vez que o script for atualizado, será preciso lembrar de fazer esta alteração. Para sair desta saia justa existe uma saída.

Ao invés de alterar o script original, vamos criar um pequeno javascript que poderá conter as configurações de todos parâmetros desejados. Por exemplo:

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'outer-glow';

Digamos que demos o nome highslide.cfg.js para este script e que o colocamos no diretório highslide. Neste caso, para que as páginas tenham acesso ao script de configuração, insira-o logo depois da inclusão do script principal:

<script type="text/javascript" src="highslide/highslide-full.packed.js"></script>
<script type="text/javascript" src="highslide/highslide.cfg.js"></script>

Observe que agora podemos incluir o Highslide compactado porque os parâmetros de configuração "estão na nossa mão"

Como ampliar imagens

O segredo para chamar o Highslide está em links especiais, ou seja, vamos usar propriedades do elemento a do HTML para disparar a ação desejada. Uma imagem com um link normal seria:

<a href="imgGrande.jpg"><img src="imgPequena.jpg"></a>

Neste caso, quando a imagem pequena é clicada, uma nova página é carregada para mostrar a imagem ampliada. Como não é isto que queremos... vamos acionar o Highslide:

<a href="imgGrande.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="imgPequena.jpg" alt="tiê-sangue" title="Clique para ampliar" /></a>

Observe que o link é basicamente o mesmo, somente acrescentamos uma classe e um evento onclick. A classe "highslide" fica no arquivo highslide.css que vem junto com o pacote. Basta citá-la. O evento onclick chama a função hs.expand que está definida no javascript highslide (full ou packed). Basta chamá-la. Este é o básico da mágica

Vamos por um pouco de tempero na imagem ampliada. Se você quiser acrescentar uma legenda, é só criar uma divisão logo depois do link para a imagem:

<a href="imgGrande.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="imgPequena.jpg" alt="tiê-sangue" title="Clique para ampliar" /></a>
<div class="highslide-caption">Texto da legenda</div>

Que tal colocar um botão no canto superior direito da imagem ampliada que serve para fechá-la? Então acrescente o seguinte:

<a href="imgGrande.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="imgPequena.jpg" alt="tiê-sangue" title="Clique para ampliar" /></a>
<div class="highslide-caption">Texto da legenda</div>
<div id="closebutton" class="highslide-overlay closebutton"
  onclick="return hs.close(this)" title="Fechar"></div>