Highslide no Wordpress
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.
If you enjoyed this post, make sure you subscribe to my RSS feed!
[...] O tutorial para adicionar o plugin Highslide, para ser usado automaticamente, no WP está aqui. Siga este tutorial, e após concluído remova a linha que carrega o prototype e substitua o [...]
Pingback by SamuraiDio » Pequenas mudanças no blog… — May 31, 2008 @ 10:13 am
bem facil, bem explicado, obrigado pelo conteúdo amigos até mais
Comment by Rodrigo — August 21, 2008 @ 11:11 pm
Opa!
Funcionou no wordpress 2.7.0, mas quando tem post com videos, os videos não aparecem! :( O que pode ser?
Comment by Fabiano Cruz — February 26, 2009 @ 4:09 pm
poxa, nao saberia dizer.
Neste caso o ideal seria usar um firebug ou alguma outra ferramenta para verificar se há algum erro.
Um palpite é que o plugins está tentando abrir os vídeos com o highslide, se for o caso é só corrigir as extensões permitidas no script acima (post).
Comment by diovani — March 4, 2009 @ 9:03 pm
Como colocar automaticamente em todas as imagens do Blogger?
eu coloquei no meu blog “http://melhorfree.blogspot.com/” o código mais tenho que ficar editando as imagens para o código ” highslide ” funcionar!
Comment by Melhor Free — October 6, 2010 @ 10:44 pm
O script que adicionei no post serve justo para isto, ele procura por todos os links para imagens no blog e adiciona automaticamente o highslide, usando prototype. Se não está funcionando no seu, deve estar faltando algo, ou deve haver conflito com outro plugin.
Vou ficar devendo uma atualização do script para ser usado com jQuery ou apenas com DOM.
Comment by diovani — November 24, 2010 @ 12:32 pm
Olá Paulo Diovani parabéns pelo seus artigos Gostaria de saber o seguinte, se eu desenvolvo um site para um cliente meu, eu posso usar essa classe higslide??? é por que não entendi muito bem essa questão de licença sou nova no ramo.
Comment by kethellen — February 26, 2011 @ 10:24 pm
Olá Kethellen, desculpe a demora para responder.
Se tem dúvidas quanto a licença trate diretamente com o desenvolvedor do highslide.
Mas em geral, se o site tem fins lucrativos (site empresarial, serviço cobrado, ou mesmo se você está cobrando o desenvolvimento) será necessário comprar a licença. Em geral é bem simples simplesmente repassar o valor dela para o cliente.
Agora, se você estiver fazendo um blog, site para uma ong, ou algo sem fins lucrativos, não tem problemas em simplesmente usar.
Comment by diovani — April 14, 2011 @ 1:57 pm