Como utilizar o fancyBox
Olá amigos esta aqui mais um post legal, como utilizar o fancyBox, para quem não sabe fancyBox é um efeito bem legal que podemos utilizar em varias coisas como images ao clicar ele expandi deixando bem mais legal de visualizar.
01 – Vamos começar inserindo o Jquery no seu thema antes da teg head, para quem ja tem ok não precisa colocar.
<!-- Add jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> |
2 – Agora vamos inserir no nosso thema a função do fancyBox juntamente com o css,
é importante você ter as pastas no seu thema (js) e (css) dentro de (js) vai o arquivo fancybox.pack.js e dentro de (css) vai o arquivo fancybox.css
<!-- Add fancyBox --> <link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.6"></script> |
3 – Coloque essa image no seu thema para visualizar o efeito
<a id="single_2" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" title="206/365 Delicate (Sunshine-D)"> <img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_m.jpg" alt="" /> </a> |
4 – Agora vamos inserir a chamada da função
$("#single_2").fancybox({ openEffect : 'elastic', closeEffect : 'elastic', helpers : { title : { type : 'inside' } } }); |
5 – Lembrando que para funcionar baixe os arquivos aqui e siga as etapas!
6 –
DOWNLOAD DOS ARQUIVOS FANCYBOX
Abraço até o proxímo !
DaviWp
