Detalhes

Categoria: Webmaster

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

Autor: vovó Vicki

Acessos: 18068

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

Como criar pop-ups

Usando o mesmo princípio de aproveitar links para abrir janelas especiais, podemos usar trechos de texto ou imagens para disparar eventos do tipo onclick ou onmouseover. Um link básico seria o seguinte:

Se quisermos que, quando o usuário clicar o texto do link seja apresentada uma janela especial na mesma página em que está com um texto da nossa escolha, adicionamos um evento ao link e, logo em seguida, criamos uma divisão que contém o texto que queremos apresentar.

Note que o link possui uma contentId que denominei "texto1". A divisão que contém o texto para este link também precisa ser identificada com o mesmo nome, ou seja, id="texto1". Dentro desta divisão há uma segunda, cuja classe é "highslide-body". É onde podemos colocar o texto do pop-up, inclusive com marcadores HTML (tipo negrito ou cor de fonte) e referências a imagens. É como se fosse uma página HTML dentro da página que está sendo mostrada.

Se você quiser acrescentar um botão para fechar o pop-up, faça o seguinte:

Clique aqui para ver o exemplo citado.

Fechar

Este é o texto que será mostrado no pop-up!

Experimente colocar o cursor do mouse na parte superior do pop-up. Quando o cursor mudar de forma, clique a arraste a janela pop-up para onde você quiser. Esta é mais uma das mordomias oferecidas pelo Highslide.

Conteúdo AJAX e iFrame

Agora observe o que acontece com isto: vou colocar a home page da Aldeia numa janela pop-up. Para isto, clique aqui.

Sei que não é nenhuma maravilha, mas serve para ilustrar o potencial do Highslide. Como fazer com que isto seja possível? Novamente é simples:

Agora, o mesmo exemplo com iFrame. Para testar, clique aqui.

O que foi que mudou? Veja a seguir:

Gente, é coisa pra dedéu! Divirtam-se com o Highslide e, se descobrirem mais alguma coisa, me avisem. Este script é realmente uma caixinha de surpresas.

Referências

• Highslide JS
• Tutoriais do Autor em inglês