Pular para o conteúdo principal

Utilizando fancybox na imagem inserida no post do seu site wordpress


Olá Pessoal, mais um post legal, simples! mas pode ser muito usado no nosso dia a dia,
este método é muito legal porque só vai aplicar o nosso efeito fancybox na imagem inserida dentro do nosso post,
mesmo você tendo uma imagem um botão que não foi inserido no post ele não vai ter o efeito legal né?
então vamos lá,
01 – Primeiro baixe os script do fancybox no site Fancybox
02 – Agora descompacta o arquivo baixado do site acima, dentro dele copia a pasta source e cole no seu tema wordpress
03 – Depois de ter colado a pasta source no seu tema cole os códigos abaixo no seu header.php veja que temos dois código, um link css, e o outro o script do fancybox
veja também o caminho para seu tema você pode utilizar o código bloginfo(‘template_directory’) para dar o caminho do seu tema.
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
04 – Agora já estamos quase do fim, vamos pegar nossa chamada para executar nossa função do fancybox faça o mesmo cole esse código ou no seu header.php ou footer.php mais indicado no footer
 
<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox();
 });
</script>
05 – Agora vem o segredo porque só na imagem do post vai ser aplicado o efeito fancybox, bem a magica esta nesse código abaixo hehehe isso mesmo!
vamos pegar esse código e colar no seu arquivo functions.php, esse código vai adicionar a class fancybox dentro da nossa href da img do post fazendo assim nosso efeito funcionar só nas img do post
massa né?
 
add_filter('the_content', 'add_gallery_id_rel');
function add_gallery_id_rel($link) {
 global $post;
 return str_replace('<a href', '<a class="fancybox" rel="gallery1" href', $link);
}
Bem pessoal é isso, espero que gostem! qualquer duvida manda email, estou também no facebook e twitter
um abraço até o próximo.

Comentários

Postagens mais visitadas deste blog

Configurar rotas estáticas no Linux Debian ou Red Hat Enterprise

Tabela de roteamento Usando o comando ip Usando o comando ip, pode encaminhar a instalação e visão estática.   Por exemplo, para exibir tabela de roteamento atual, você pode digitar o comando:   # ip route show A saída de exemplo: 192.168.2.0/24 dev eth1 proto link âmbito kernel src 192.168.2.1 192.168.1.0/24 dev eth0 proto kernel link âmbito src 192.168.1.2 default via 192.168.1.254 dev eth0 Você pode adicionar rotas estáticas usando seguinte comando:   ip route add {Rede} {via IP dev} {DEVICE}   Por exemplo, 192.168.55.0/24 rede disponível via 192.168.1.254:   # ip route add 192.168.55.0/24 via 192.168.1.254 dev eth1 Alternativamente, você pode usar o comando route bom e velho:   # route add -net 192.168.55.0 netmask 255.255.255.0 gw 192.168.1.254 dev eth1 Persistência Rotas Linux A desvantagem do 'ip' ou 'rota' comando é que, quando o Linux for reinicializado ele vai esquecer rotas estáticas.   Então guarde-os em arquivo de configuração. ...

Burlando a Pré-Ativação do Windows 8 na BIOS

Dias atrás, ao tentar instalar o Windows 8 no notebook de um amigo, durante o programa de instalação, me deparei com a seguinte mensagem: A chave do produto (Product key) digitada não corresponde a nenhuma imagem do Windows disponível para instalação. Digite uma chave do produto diferente.

ATIVAR WINDOWS XP COMO ORIGINAL SEM INSTALAR NADA

Nesse tutorial abaixo irei mostrar de forma eficaz como validar seu Windows XP  sem gastar se quer um real, apenas alguns minutos: 1. Vá em Iniciar > Executar 2. Digite regedit e clique em OK. 3. Já dentro do regedit, navegue até a chave: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsNT\CurrentVersion\WPAEvents 4. No painel à direita, clique duas vezes em OOBETimer 5. Na janela que foi aberta, apague qualquer valor e clique em OK. Feche o regedit 6. Vá novamente em Iniciar > Executar e dessa vez digite: %systemroot%\system32\oobe\msoobe.exe /a 7. Na janela que foi aberta, escolha a opção Sim, desejo telefonar… 8. Na próxima etapa, clique no botão Alterar chave de produto. 9. Na etapa seguinte, digite a CD-Key: THMPV-77D6F-94376-8HGKG-VRDRQ D6FY9-288V2-QHKC8-WW9DY-YCKJJ (Funcionando 14/03/14) e clique no botão Atualizar 10. Após clicar no botão Atualizar, o assistente para ativação voltará para a janela anterior, então, clique em Lembrar mais tarde e rei...