Adicionar esse botão especifico

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

Resolvido Adicionar esse botão especifico

Mensagem por proberto em 09/04/14, 07:21 pm

Qual é minha questão:
Eu queria bota tipo assim bota uma imagem no forum ai quando a pessoa passava o link sobre um botão ou mesmo sobre o link ja aparecia a imagem tipo essa daqui olha.



Endereço do meu fórum:
http://supportibia.alianceforum.com

Versão do fórum:
PHPBB3


Última edição por proberto em 10/04/14, 09:27 pm, editado 1 vez(es)

proberto
Nível 9

Masculino
Inscrito dia : 21/09/2012
Mensagens : 223
Pontos Ativos : 374

Ver perfil do usuário http://tradebrasil.umforum.net/

Resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda em 09/04/14, 09:37 pm

Olá,

Eu não entendi muito bem a sua questão. Você gostaria que ao passar o mouse sobre o link de uma imagem, a imagem se auto revelasse, ou ao passar o mouse sobre uma imagem que foi reduzida pelo código do fórum, ela ficasse maior?

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Adicionar esse botão especifico

Mensagem por proberto em 09/04/14, 10:07 pm

Sim tipo eu queria em 2 jeitos eu não queria fica botando [img] essas coisas eu ja queria cola a imagem direto mais disse uma pessoa aqui que eu nem lembro mais ele falo que não tem jeito então eu queria que quando passava o mause em cima do link de qual quer imagem ela ja aparecia.

proberto
Nível 9

Masculino
Inscrito dia : 21/09/2012
Mensagens : 223
Pontos Ativos : 374

Ver perfil do usuário http://tradebrasil.umforum.net/

Resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda em 09/04/14, 11:12 pm

Bem,

Adicione isso a um novo módulo Javascript com Investimento em Tópicos:

Código:
$(function() {
    var delay, regex;
    delay = 1;
    regex = /\.(bmp|jpg|jpeg|png|gif)$/g;
    $('.post .postbody .content a').each(function(key, element) {
        var self, interval;
        self = $(element);
        if (self.is('[href]') && self.attr('href').match(regex)) {
            self.on('mouseover', function() {
                self.addClass('loading');
                interval = setTimeout(function() {
                    var container;
                    container = $('#image-popup');
                    if (!container.length) {
                        $('<div id="image-popup" style="z-index: 99999;"><a href="javascript:void(0)">x</a><div class="container"></div></div>').appendTo('body');
                        container = $('#image-popup');
                    }                    
                    container.addClass('open').find('.container').html('<img src="' + self.attr('href') + '" />');
                }, delay * 1000);
            }).on('mouseout', function() {
                if (interval) {
                    self.removeClass('loading');
                    clearTimeout(interval);
                }
            });
        }
    });
    $(document).on('click', '#image-popup', function() {
        $('#image-popup').removeClass('open');
    });
});

E isso ao seu CSS:

Código:
a.loading {
  cursor: wait;
}
 
#image-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
}

#image-popup.open {
  display: block;
}

#image-popup .container {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  text-align: center;
}

#image-popup img {
  max-width: 100%;
  max-height: 100%;
}

#image-popup > a {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 50px;
  line-height: 50px;
  color: #999;
}

Resultado:
http://ajuda-phpbb3.forumeiros.com/t20-aqui-eu-posso

Acesse a página e passe o mouse em cima do link do tópico. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Adicionar esse botão especifico

Mensagem por proberto em 09/04/14, 11:54 pm

Cara pego 100% mais tipo 1 pergunta

Sera que não tem como fazer um bang ae que tipo eu pego a imagem so aperta CTRL+V cola a imagem ela fica normal aparece sem fica coloca [img][/img]?


proberto
Nível 9

Masculino
Inscrito dia : 21/09/2012
Mensagens : 223
Pontos Ativos : 374

Ver perfil do usuário http://tradebrasil.umforum.net/

Resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda em 10/04/14, 12:40 am

Tente adicionar isso a um novo Javascript:

Código:
$(function() {
    $(document).on('paste', function() {
        setTimeout(function() {
            var focus;
            focus = $(':focus');
            focus.val(focus.val().replace(/(https?.*\.(bmp|jpg|jpeg|png|gif))[^\[]?/g, '[img]$1[/img]').replace(/\[img\]\[img\]/g, '[img]').replace(/\[\/img\]\[\/img\]/g, '[/img]'));
        }, 50);
    });
});
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Adicionar esse botão especifico

Mensagem por proberto em 10/04/14, 12:46 am

Tipo eu falo quando eu vo criar um novo Copio ai eu faço na imagem copio e colo no novo tópico..

eu tentei fazer agora n deu...

proberto
Nível 9

Masculino
Inscrito dia : 21/09/2012
Mensagens : 223
Pontos Ativos : 374

Ver perfil do usuário http://tradebrasil.umforum.net/

Resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda em 10/04/14, 09:10 am

Então, eu entrei no fórum e não encontrei o Javascript no código. Você chegou a marcar o Investimento em Todas as Páginas?
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Adicionar esse botão especifico

Mensagem por proberto em 10/04/14, 12:29 pm

Sei eu botei em todas as paginas mais não foi...

proberto
Nível 9

Masculino
Inscrito dia : 21/09/2012
Mensagens : 223
Pontos Ativos : 374

Ver perfil do usuário http://tradebrasil.umforum.net/

Resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda em 10/04/14, 01:22 pm

Eu verifiquei lá no seu fórum e está a funcionar. Tente colar um link de uma imagem dentro de um tópico e verá que as tags são adicionadas automaticamente.
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Adicionar esse botão especifico

Mensagem por proberto em 10/04/14, 03:47 pm

Fico bem mais pratico e so tu apenas copiar o link e bota no forum que ele ja vem com o [img][/img] kkkkkkkkkkkkkkkkk

proberto
Nível 9

Masculino
Inscrito dia : 21/09/2012
Mensagens : 223
Pontos Ativos : 374

Ver perfil do usuário http://tradebrasil.umforum.net/

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

- Tópicos similares

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