[TUTORIAL] FancyBox nas imagens

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] FancyBox nas imagens Empty [TUTORIAL] FancyBox nas imagens

Mensagem por Pedxz em 08.10.18 7:16

FancyBox nas imagens

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 Javascript

As 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 Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript
[TUTORIAL] FancyBox nas imagens Javaac10
[TUTORIAL] FancyBox nas imagens 110111Seta 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.
[TUTORIAL] FancyBox nas imagens 110210Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] FancyBox nas imagens 110310Seta 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.
[TUTORIAL] FancyBox nas imagens 110410Seta 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

[TUTORIAL] FancyBox nas imagens Fancy10
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2800
Pontos Ativos : 3553

Ver perfil do usuário https://pedxz.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum