Lightbox Manual
-
Olá pessoal esse é o meu primeiro post aqui!
olha estou fazendo um tema para o wordpress e queria acrescentar um lightbox no tema sem prescisar de plugin! será que alguem pode me ajudar fico grato! 😉
-
Alisson,
Tem sim, dê uma olhada neste site
http://fancyapps.com/fancybox/#examples
Se quiser sem jquery, apenas com css veja este exemplo
que é muito interessante também.Julio,
Mas como faço para acrescentar a “class” nas imagens pois queria que a propria galeria do wordpress recebece para n ter problema com ela! se eu adicionar a class pelo javascript funciona?
Alisson,
Cada opção que te passei no post anterior tem no site como instalar.
Se instalar o js corretamente não vai ter problemas.O que vc quis dizer com “class”?
Alisson,
O que vc quer dizer com “class”?
julio,
No fancyBox ele pede colocar a class onde vai receber tipo
$("ClassedaImagem").fancybox({ helpers : { overlay : { css : { 'background' : 'rgba(58, 42, 45, 0.95)' } } } });
qual a classe devo indicar! pois o wordpress por padrão coloca a class “attachment-thumbnail” na galeria, ja coloquei ela mas n deu certo inserir os arquivos certinhos mais nada até agora.
descubrir que o probleman é isso pos consegui colocar mas o lightbox n quer pegar nem com plugin ja fiz de tudo desistalei todos olhei se o jquery tava sendo chamado duas vezes mas até agora nada!
vê o meu script para ver
$(document).ready(function() { $('#random').cycle({ fx: 'custom', sync: 0, random: 1, speed: 2000, timeout: 10000, cssBefore: { top: 0, left: 958, display: 'block' }, animIn: { left: 0 }, animOut: { top: 232 }, delay: -1000 }); $('#show').cycle({ fx: 'fade', pager: '.b-nav', }); $('#slide-nov').cycle({ fx: 'fade', pager: '.no', timeout: 15000 }); $('#slide-nov-2').cycle({ fx: 'fade', pager: '.no-2', timeout: 15000 }); $('#carousel').jcarousel({ auto: 10, speed : 5, wrap: 'circular' }); $('.carousel-2').jcarousel({ auto: 10, speed : 5, wrap: 'circular' }); $("*[rel=tooltip]").hover(function(e){ var title = $(this).attr('title'); $(this).data('titleText', title).removeAttr('title'); $("body").append('<div class="tooltip">'+title+'</div>'); $('.tooltip').css({ top : e.pageY - 30, left : e.pageX + 15 }).fadeIn(); }, function(){ $(this).attr('title', $(this).data('titleText')); $('.tooltip').remove(); }).mousemove(function(e){ $('.tooltip').css({ top : e.pageY - 30, left : e.pageX + 15 }) }); $("#conteudo img").fancybox({ helpers: { title : { type : 'float' } } }); });
Alisson,
Você quer com ou sem plugin a lightbox?
Quer aplicar o efeito lightbox em uma galeria
de imagens ou apenas em imagens individuais?Tente essa opção de plugin depois me fala:
http://wordpress.org/plugins/fancybox-for-wordpress/olha eu quero criar sem plugin, minha meta e aprender cada vez mais sobre o wordpress. mas veja só eu ja consegui fazer funcionar com o lightbox2 pois com o fancybox n deu certo quero aplicar a galeria de imagens do wordpress. Com o fancy n deu certo por conta que toda vez que colocar o seu codigo no script ele n respondia e se eu coloca-se antes dos demais scripts ela n deixava os outros scritps rodarem revisei o codigo varias vezes e n deu certo. com o lightbox2 eu consegui mas esta apenas em imagens individuais, e eu quero que fique na galeria. e Desculpe ficar incomodando demais!rsrsrsrs
Alisson
dá uma olhada nisso é galeria lightbox sem plugin
Da uma olhada nesse site: http://daviwp.com/utilizando-fancybox-na-imagem-inserida-no-post-do-seu-site-wordpress/ lá tem mais coisas sobre fancybox, da uma olhada
- O tópico ‘Lightbox Manual’ está fechado para novas respostas.