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.

  • Fabrício

    Dicas simples e mt útil…parabéns!

    • Davi

      Obrigado amigo!

  • Gilmar

    Olá Davi, tudo blza?
    Ok, parabéns pelo seu primoroso trabalho!!!
    Sobre o poderoso Fancybox! Gostaria que me mostrasse de forma + clara, para um leigo como eu, como instalar e configurar o FB no WordPress…
    Ex. Em qual linha do código, podemos inserir a chamada da função? Assim, podemos dispensar o uso do plugin? Como seria?

    Grato por sua atenção,

    Grande abraço,

    Gilmar

    • Davi

      Olá Gilmar muito obrigado! envie um email com suas duvidas para que eu possa te ajudar ok? aguardo…

  • Gilmar

    Ok Davi, muito grato por sua atenção!!!
    Pois bem, o tal plugin Fancybox instalado no wordpress, por padrão nos possibilita implementar os efeitos jquery apenas com imagens bitmaps, porém existem algumas configurações em seu painel que acredito ser possível ativar PopUps por meio de iframe: html, pdf, swf, vídeos etc… Assim como está escrito na documentação disponibilizada pelo seu desenvolvedor… Porém, lá não há nada específico para WP.
    Ocorre que ainda não vi nenhum tutorial que mostrasse como configurar o FB para ativar “iframe” dentro do WP. Já vi alguns que se referem ao FB/iframe, mas sem a estrutura de qualquer CMS.
    https://www.youtube.com/watch?v=29tFKSylaGE&feature=related
    Até mesmo na comunidade WP, ninguém trata no assunto… Quando aparece algo é relativo a dúvidas sobre o ajuste nas dimensões (altura e largura) do iframe…
    Vc poderia me orientar nesse assunto?

    Desde já agradeço!

    Abraço,

    Gilmar

  • Afrânio

    Davi. Você sabe me dizer como eu faço pra cada foto abrir um álbum no wordpress com fancybox? Tipo cada foto ser um álbum, e ao navegar nas setas mostrar as outras fotos deste álbum, e não os thumbs que estão visíveis na pág.

    • Davi

      Olá Afrânio, bom se você ja tem esse album? caso tenha basta colocar no link onde exibe cada album rel=”fancybox” exemplo no seu album você tem um loop chamando as imagens de cada album tipo endereço da imagem
      ai quando vc clicar na imagem ela automaticamente vai da o efeito exibindo o restante como slide .

  • Cintia Menezes

    Oii Davi, seu post me ajudou muito 🙂
    Mas não está funcionando no IE, Mozilla e Chrome ta normal mas no IE ele abre a imagem sem o efeito do fancybox. Tem alguma ideia do que pode ser o problema?

  • wallace

    meu amigo, to fazendo um site: https://guiomart.dominiostemporarios.net porém eu fiz tudo certo, mas nao funciona. parece que não aceita o header.
    as paginas param de funcionar. O que deve ser?

    • daviwp

      Olá Wallace, tenta fazer o seguinte, nesse cara aqui
      no lugar de $ coloca jQuery como esta abaixo, repare o do site e esse abaixo.

      jQuery(“#single_2”).fancybox({
      openEffect : ‘elastic’,
      closeEffect : ‘elastic’,

      helpers : {
      title : {
      type : ‘inside’
      }
      }
      });

  • daviwp

    Olá Anderson, mas porque esta usando iframe as vezes consigo outra solução em vez do iframe, mande o link para ver o que precisa.