por tikky 08.10.18 7:16
Com este tutorial, será possível adicionar personalizar o efeito da visualização das imagens.
FancyBox nas imagens
TUTORIAIS, DICAS E ASTÚCIAS |
Instalação do código JavascriptAs páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript |
| Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum. |
| Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum. |
| Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas. |
| Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento. | Código:
- Código:
/** * FancyBox - Script by Ea (forumactif) * See more: https://ajuda.forumeiros.com */ $(function () { var getFancy = function () { $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>'); $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){ $.fancybox.defaults.hideScrollbar = false; }); getFancy = function () {}; }; var contents = $('.post-entry,.post-content,.content,.postbody'); contents.find('img').css({maxWidth:'100%'}).not(contents.find('a img')).load(function () { if (100 < this.naturalWidth || 100 < this.naturalHeight) { $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load'); getFancy(); } }).load(); }); Após a instalação, o código já estará a resultar.
Resultado do tutorial |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209
-
Tópicos semelhantes Tópicos semelhantes
Permissões neste sub-fórum
Não podes responder a tópicos