Detalhes

Categoria: Webmaster

Atualização: Sábado, 27 Fevereiro 2010 11:10

Autor: vovó Vicki

Acessos: 18123

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:

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:

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:

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:

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:

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:

Texto da legenda

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

Texto da legenda