O highslide é um visualizador de miniaturas feito em JavaScript. Ele exibe as imagens em pop-ups sobre sua página (em html, nao novas janelas), podendo ser movidos ou abertos em sequencia. O efeito visual é melhor que qualquer visualizador de imagens já visto, mesmo em sistemas operacionais. Veja minhas imagens e screenshots para ter uma idéia. Vou mostrar aqui como intalar o plugin para Wordpress e como adicionar automaticamente o highslide a TODAS as imagens do blog, sem precisar editar os posts antigos.

O visualizador de miniaturas Highslide é free para uso não-comercial, e custa $29, dólares para cada domínio deu8m website comercial, então, caso você possua um blog comercial (?) você deverá pagar pelo Highslide.js. Veja a licença.

Primeiramente, baixe e instale o plugin wp-highslide (descompacte-o dentro de uma pasta ‘highslide’ em wp-content/plugins/) e também baixe a biblioteca highslide (copie apenas o arquivo highslide.js para dentro de wp-content/plugins/highslide). Após isso vá em ‘Plugins’ (ou ‘Extenções’, em português), na administração de seu blog e ative o wp-highslide. Com isso você terá o plugins instalado, podendo usar a tag <highslide></highslide> para adicionar miniaturas usando a biblioteca, o que é um saco. Então, para facilitar as coisas, vá em ‘Opções’ e clique em ‘wp-highslide’, ajuste as opções como deseja e em ‘JAVASCRIPT settings’ adicione o seguinte:

Caso seu tema não utilize ‘prototype‘ (um framework JavaScript), adicione no início do textarea o seguinte código:

<script>
src="http://prototypejs.org/assets/2007/6/20/prototype.js"
 type="text/javascript"></script>

E abaixo da linha: ‘hs.preloadImages();’

var elements = $A(document.getElementsByTagName('a'));
elements.each
(
    function(element)
    {
        if(element.href.endsWith('jpg')
            || element.href.endsWith('png')
            || element.href.endsWith('gif'))
        {
            element.className = 'highslide';
 
            Event.observe
            (
                element,
                'click',
                function(event)
                {
                    Event.stop(event);
                    var element = Event.element(event);
                    return hs.expand(this);
                }
            );
        }
    }
)

Isso vai adicionar automaticamente o Highslide a todos os links para imagens da página, inclusive dos posts antigos.

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Achei melhor mover para um domínio próprio (diovani.com), assim fica mais pessoal e mais fácil de administrar.

Anotem: http://blog.diovani.com

Se você gostou deste artigo, inscreva-se em meu RSS feed!