Adicionar esse botão especifico

2 participantes

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

Tópico resolvido Adicionar esse botão especifico

Mensagem por proberto 09.04.14 23:21

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.

esse - Adicionar esse botão especifico  33wb9mx

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

Versão do fórum:
PHPBB3


Última edição por proberto em 11.04.14 1:27, editado 1 vez(es)
avatar

proberto
****

Membro desde : 21/09/2012
Mensagens : 223
Pontos : 374

http://tradebrasil.umforum.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda 10.04.14 1:37

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
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por proberto 10.04.14 2:07

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.
avatar

proberto
****

Membro desde : 21/09/2012
Mensagens : 223
Pontos : 374

http://tradebrasil.umforum.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda 10.04.14 3:12

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
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por proberto 10.04.14 3:54

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]?

avatar

proberto
****

Membro desde : 21/09/2012
Mensagens : 223
Pontos : 374

http://tradebrasil.umforum.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda 10.04.14 4:40

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);
    });
});
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por proberto 10.04.14 4:46

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...
avatar

proberto
****

Membro desde : 21/09/2012
Mensagens : 223
Pontos : 374

http://tradebrasil.umforum.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda 10.04.14 13:10

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?
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por proberto 10.04.14 16:29

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

proberto
****

Membro desde : 21/09/2012
Mensagens : 223
Pontos : 374

http://tradebrasil.umforum.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por Kyo Panda 10.04.14 17:22

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.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar esse botão especifico

Mensagem por proberto 10.04.14 19:47

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

proberto
****

Membro desde : 21/09/2012
Mensagens : 223
Pontos : 374

http://tradebrasil.umforum.net/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos