Ferramentas

Como Implementar o prettyPhoto para Vídeos e Imagens no WordPress

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

O prettyPhoto é um pacote de jQuery + estilo para criar belos efeitos ao abrir imagens, vídeos e conteúdo iframe, na mesma linha do Fancybox, Lightbox, Lightview e tantos outros. Grátis e fácil de implementar, é um dos mais usados por desenvolvedores de temas profissionais, sendo encontrado com frequência já incluído nesses temas.

Além de simplificado, ele promete compatibilidade com todos os navegadores, incluindo versões bem antigas como o Internet Explorer 6. Suporta muitos conteúdos, como vídeos do YouTube, Vimeo, Flash, QuickTime, além das imagens e iframes em geral.

Vamos ver como fazer a instalação e uso básico, além de como ativá-lo automaticamente nas galerias do WordPress usando jQuery.

Para ver o prettyPhoto em ação, confira nossa página de exemplo.

Baixar e Instalar

Baixe o pacote do prettyPhoto aqui. Clique em “Production version » v.3.1.5 Compressed” para baixar a versão de produção, ou seja, pronta para uso e com código otimizado.

Descompacte o arquivo e terá uma pasta “prettyPhoto_compressed_X.X.X”. Você só precisa das pastas “image”, “css” e “js”, então crie uma pasta “prettyphoto” em seu servidor, pode ser dentro da pasta do seu template.

No header.php do seu tema, antes da tag de fechamento </head>, insira a chamada do script e da folha de estilos do prettyPhoto. Chame também o jQuery, que é carregado de um repositório oficial.

Nota: se seu tema já usa jQuery, atenção para conflitos, não é recomendável usar várias chamadas para diferentes versões.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Não esqueça de corrigir o caminho dos src aí em cima, apontando para o lugar em que você hospedou os arquivos.

Agora no footer.php, logo antes do fechamento </body>, insira o “ativador” do prettyPhoto:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

É um snippet de jQuery que vai colocar o prettyPhoto para funcionar em todo link que tiver a tag rel=’prettyPhoto’, ou seja, sempre que você criar um link de imagem e quiser o prettyPhoto funcionando, coloque nele um rel=”prettyPhoto”, assim:

<a href="url-da-imagem" rel="prettyPhoto">link</a>

Como você vê no exemplo, as tags alt e title da imagem que recebe o link têm função: a primeira é usada como título da imagem, aparecendo por padrão no alto dela, enquanto o title funciona como uma legenda, dentro da janela.

prettyPhoto nas galerias WordPress

Mas como colocar o rel nos links de galerias automáticas do WordPress, já que não dá pra editar diretamente o link? Pra isso, mais um pouco de jQuery.

Lembra daquele snippet colocado antes perto do fechamento da body? Vamos editá-lo um pouco pra deixar assim:

<script type="text/javascript">
jQuery(document).ready(function($) {
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'facebook',
autoplay_slideshow: true
});
$(".gallery-icon a").attr('rel', 'prettyPhoto[g]');
</script>

O que mudou foi a quarta linha, quando todos os itens “gallery-icon a” (que são usados nas galerias criadas pelo WordPress) ganham um rel=”prettyPhoto[g]”. Esse valor entre chaves é o que une as imagens numa única galeria.

Veja também que foram passados alguns parâmetros que modificam o comportamento do prettyPhoto. Entre chaves ({parâmetros}) o valor facebook altera o tema, e o autoplay_slideshow: true manda a galeria rolar em slides automaticamente.

Alguns dos principais parâmetros:

animation_speed: ‘fast’, /* fast/slow/normal */
slideshow: 5000, /* false OU intervalo de tempo em ms */
autoplay_slideshow: false, /* true/false */
opacity: 0.80, /* Valor entre 0 e 1 */
show_title: true, /* true/false */
allow_resize: true, /* Redimensiona fotos maiores que o viewport. true/false */
default_width: 500,
default_height: 344,
counter_separator_label: ‘/’, /* O separador do contador das galerias, tipo 1 “de” 2 */
theme: ‘pp_default’, /* temas: light_rounded, dark_rounded, light_square, dark_square, facebook */
horizontal_padding: 20, /* Padding dentro da janela */
hideflash: false, /* Esonde todo o flash object na página, marque TRUE se flash aparece acima do prettyPhoto */
wmode: ‘opaque’, /* Atributo wmode do flash */
autoplay: true, /* Inicia vídeos automaticamente: true ou false */
modal: false, /* Se true, janela só fecha ao clicar no botão fechar */
deeplinking: true, /* true permite que prettyPhoto atualize o url para habilitar deeplinking. */
overlay_gallery: true, /* true faz a galeria sobrepor a imagem de tela cheia no mouse over */
keyboard_shortcuts: true, /* Se true, atalhos de teclado não funcionam quando janela estiver aberta. Deixe false se for abrir forms */
changepicturecallback: function(){}, /* Chama uma função sempre que um item for mudado/visualizado */
callback: function(){}, /* Chama uma função quando a janela é fechada */
ie6_fallback: true, /* Compatibilidade com o IE6 */

Tem muitos outros, veja a lista completa na documentação (em inglês). http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation

Opções avançadas

Abrindo vídeos

Para abrir vídeos é a mesma coisa, use um rel=”prettyPhoto” no link. O link pode apontar direto para uma página do YouTube ou Vimeo, veja na página de exemplos o funcionamento.

<a href="http://www.youtube.com/watch?v=xmUZ6nCFNoU" rel="prettyPhoto">Link de vídeo no YouTube</a>

Se a janela padrão for muito pequena, você pode aumentar o tamanho do vídeo alterando os parâmetros do url como o YouTube e o Vimeo oferecem. Por exemplo, acrescentando “&width=700&height=500” ao final do link do vídeo, você altera a altura e largura (width = largura).

Abrindo outros sites

<a href="http://www.apple.com?iframe=true&width=700&height=450" rel="prettyPhoto">Apple.com</a>

Após o URL, use os parâmetros para controlar o tamanho da janela, além do “?iframe=true”.

Compatibilidade

Segundo os autores, os navegadores compatíveis são:

  • Firefox 3.0+
  • Google Chrome 10.0+
  • Internet Explorer 6.0+
  • Safari 3.1.1+
  • Opera 9+

Onde saber mais

Site do prettyPhoto
Fórum de suporte (inglês)
FAQs (inglês)
Tutoriais (inglês)

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

1 Comentário

Deixe um Comentário

Pin