JQuery

Inscreva-se em nosso canal no Youtube Daviwp

Como utilizar o fancyBox

01/08/2012 JQuery (11) comentários

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="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

3 – Coloque essa image no seu thema para visualizar o efeito

<a id="single_2" title="206/365 Delicate (Sunshine-D)" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg">
 <img alt="" src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_m.jpg" />
</a>

4 – Agora vamos inserir a chamada da função

<script>
$("#single_2").fancybox({
    	openEffect	: 'elastic',
    	closeEffect	: 'elastic',
 
    	helpers : {
    		title : {
    			type : 'inside'
    		}
    	}
    });
</script>

5 – Lembrando que para funcionar baixe os arquivos aqui e siga as etapas!

DOWNLOAD DOS ARQUIVOS FANCYBOX DIRETO DO SITE OFICIAL

Abraço até o proxímo !
DaviWp

Veja mais no site oficial do fancybox http://fancyapps.com/fancybox/

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.