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.

Aprenda a calibrar o monitor do PC para ter cores mais precisas

Ajustar o monitor é importante sempre que você trabalha com qualquer demanda gráfica: afinal, design, fotografia e vídeo dependem de cores nítidas. Por isso, preparamos um guia completo que ensina a realizar o procedimento por meio de um software que já vem no Windows. Vamos por partes: 1) Começando Abra o Painel de Controle, no menu iniciar, e procure “Vídeo”. Dentro deste menu, escolha a opção “Calibrar Cor”