Lista de imagens com múltiplas escolhas

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

Resolvido Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 20/05/17, 07:42 pm

Detalhes da questão


Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição


Bom, recentemente adicionei uma loja no forum cujo o qual os membros poderão comprar com "PONTOS" seus troféus/conquistas.
Criei um campo de perfil para isso cujo os moderadores do fórum poderão editar, veja: http://prntscr.com/fa72mn
Neste campo funciona como lista de imagens, mas é impossível adicionar +1 imagem para aparecer.
Eu gostaria disso pelo efeito "Tolltip" que ele tem, como por exemplo: http://prntscr.com/fa72xt

Seria possível algo do tipo?
Teria que mudar para zona de texto sem o efeito tolltip?

Desde já agradeço ao suporte.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Luiz em 21/05/17, 09:11 am

Não entendi muito bem o que o senhor deseja, mas tente:
Código:
(function ($) {
  'use strict';

  $(function () {
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
  });
}(jQuery));

Basta modificar o source da imagem e o atributo title. o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 22/05/17, 03:25 pm

Perfeito, mas nao teria um jeito de escolher varias imagens para por ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 23/05/17, 08:43 am

Você quer que o usuário possa selecionar múltiplas imagens ou que o tooltip seja aplicado a múltiplas imagens?
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: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 23/05/17, 12:45 pm

@Kyo Panda escreveu:Você quer que o usuário possa selecionar múltiplas imagens ou que o tooltip seja aplicado a múltiplas imagens?

Na vdd so os moderadores vao poder escolher, e vai ser pra ambos, tipo colpco duas img,uma de contribuidor e outro de teamspeak, ai ele passa o mouse no contribuidor e vai aparecer "contribuidor"
No outro vai aparecer "teamspeaker" entenderam?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Luiz em 23/05/17, 01:07 pm

Para fazer com que somente os moderadores possam modificar, na configuração do campo em questão, procure por:
Quem pode modificar o valor do seu conteúdo ? e coloque Moderadores.

Já para o tooltip, basta usar o código que passei acima, com as outras imagens. Feliz

o/
Você pode criar quantos quiser, veja:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
    // E assim por diante...
  });
}(jQuery));
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 23/05/17, 06:57 pm

Luiz~ escreveu:Para fazer com que somente os moderadores possam modificar, na configuração do campo em questão, procure por:
Quem pode modificar o valor do seu conteúdo ? e coloque Moderadores.

Já para o tooltip, basta usar o código que passei acima, com as outras imagens. Feliz

o/
Você pode criar quantos quiser, veja:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
    $('img[src="_SRC_DA_IMAGEM_"]').attr('title', '_TOOLTIP_AQUI_');
    // E assim por diante...
  });
}(jQuery));

Disto eu ja entendi caro amigo, só queria saber isso aqui:
Olha esse exemplo duma lista de imagem do meu fórum para as organizações:
http://imgur.com/a/YbAKW
Veja, só dá para escolher um rank, se fosse no caso, eu usaria icones e queria escolher vários para os usuários.
Seria possível?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Luiz em 23/05/17, 07:34 pm

Creio que não seja possível, mas você pode escolher uma imagem que podemos recolocá-la usando Javascript:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[src="_SRC_DA_IMAGEM_"]').replaceWith('<img src="_IMAGEM_1_" /> <br/> <img src="_IMAGEM_2_" />');
    // E assim por diante...
  });
}(jQuery));

Seria isso? o7
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 23/05/17, 07:49 pm

Luiz~ escreveu:Creio que não seja possível, mas você pode escolher uma imagem que podemos recolocá-la usando Javascript:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[src="_SRC_DA_IMAGEM_"]').replaceWith('<img src="_IMAGEM_1_" /> <br/> <img src="_IMAGEM_2_" />');
    // E assim por diante...
  });
}(jQuery));

Seria isso? o7

Nao.
Tipo, eu vou criar uma loja e o player vai comprar com pontos os icones que ele quiser, dai os moderadores irão setar pra ele, no total de 10 icones.
No caso tipo, vou ter o icone de admin, dono, colaborador. ai quero comprar a de web designer, faço o pedido pela loja e o adm me seta +1 apenas selecionando.
Entendeu ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 24/05/17, 09:06 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 25/05/17, 08:52 am

Crie um campo de perfil do tipo múltipla escolha, definindo como opção as URLs das imagens. Escolha algum membro, selecione algumas das opções e nos dê um toque aqui para bolarmos um código.
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: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 25/05/17, 05:57 pm

Veja: http://imgur.com/a/yW5dt

Não tem como por imagens, infelizmente.. Não aparece nem pondo sem o [-img]URL[/img]

-----
Edit:

O membro é esse: http://www.brasilplayultimate.com.br/u222
Também alterei para os "Emblemas" ficarem por último.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 25/05/17, 06:01 pm

Peço que remova a tag [img] e mantenha apenas a URL.
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: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 25/05/17, 06:04 pm

Feito.
Vale ressaltar que acrescentarei mais a medida que for passando o tempo, esses são só de testes.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 26/05/17, 10:32 am

Adicione a um novo script com investimento em todas as páginas:

Código:
(function($) {
   'use strict';
   
   var config = {
      names: ['Emblemas'],
   };
   
   var query = $.map(config.names, function(name) {
      return [
           'dl[id^="field_id"] span:contains("' + name + '")'
         , '.label span:contains("' + name + '")'
      ].join(', ');
   }).join(', ');
   
   
   $(function() {
      $(query).closest('dl, .post_field').find('li').each(function() {
         var $this = $(this);
         $this.html($('<img>', { src: $this.text() }).prop('outerHTML'));
      });
   });
}(jQuery));
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: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 26/05/17, 08:09 pm

Resultou mas veja como fica quando vou editar pelo perfil: http://i.imgur.com/K2jSYb9.png?1

Também nao tem o tolltip, veja: http://i.imgur.com/moHoW85.png

Além disso gostaria que ficasse assim: http://i.imgur.com/fpK3Rl8.png?1
Está assim: http://i.imgur.com/DAjZFcY.png?1
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 29/05/17, 10:20 am

Adicione ao CSS:

Código:
.fa-img-list ul {
    margin: 0;
    padding: 0;
}

.fa-img-list li {
    display: inline-block;
}

E troque o script por esse:

Código:
(function($) {
  'use strict';
 
  var config = {
      names: ['Emblemas'],
  };
 
  var query = $.map(config.names, function(name) {
      return [
          'dl[id^="field_id"] span:contains("' + name + '")'
        , '.label span:contains("' + name + '")'
      ].join(', ');
  }).join(', ');
 
  $(function() {
      $(query).closest('dl, .post_field').addClass('fa-img-list').find('li').each(function() {
        var $this = $(this);
        $this.html($('<img>', { src: $.trim($this.text()) }).prop('outerHTML'));
      });
  });
}(jQuery));

Isso acertará o alinhamento dos ícones.

Quanto a edição não há muito o que possa fazer, já não sei como o HTML fica quando está a editar. Terá que me enviar uma captura de tela com o código. Clique com o botão direito na imagem, selecione Inspecionar elemento e me mande a captura da janela que abre.

Quanto ao tooltip eu não o farei, pois o trampo passa um pouco do que estou disposto. O senhor pode aguardar outro se desejar.

o/
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: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 29/05/17, 06:48 pm

Para facilitar, o código do tool tip de uso é este:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[src="http://i.imgur.com/O8NBguD.png"]').attr('title', 'Responsável pela Administração');
    $('img[src="http://i.imgur.com/ZvksSfp.png"]').attr('title', 'Membro do Conselho');
    $('img[src="http://i.imgur.com/iD4fxGK.png"]').attr('title', 'Web Designer');
    $('img[src="http://i.imgur.com/yDEuCjp.png"]').attr('title', 'Novato');
    $('img[src="http://i.imgur.com/AVjJNus.png"]').attr('title', 'Scripter');
    $('img[src="http://i.imgur.com/GTzgual.png"]').attr('title', 'Finanças');
  });
}(jQuery));

Sobre o inspecionar elemento:
http://imgur.com/a/HThDZ
Fica assim e não há como selecionar nada :/
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 30/05/17, 06:51 pm

up
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 03/06/17, 10:28 am

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 05/06/17, 09:06 am

Eu tentei alterar o código, mas não consegui. A única maneira de se fazer isso seria alterar o perfil pelo painel administrativo, ou desabilitar o código para moderadores na página de edição de perfil:

Código:
(function($) {
   'use strict';
   
   var config = {
      names: ['Emblemas'],
   };
   
   var query = $.map(config.names, function(name) {
      return [
           'dl[id^="field_id"] span:contains("' + name + '")'
         , '.label span:contains("' + name + '")'
      ].join(', ');
   }).join(', ');
   
   $(function() {
      if (/^\/u\d+/i.test(location.pathname) && _userdata.user_level > 1) {
         return;
      }
      
      $(query).closest('dl, .post_field').addClass('fa-img-list').find('li').each(function() {
         var $this = $(this);
         $this.html($('<img>', { src: $.trim($this.text()) }).prop('outerHTML'));
      });
   });
}(jQuery));
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: Lista de imagens com múltiplas escolhas

Mensagem por iScroll em 05/06/17, 11:45 am

Bom, pode fechar então, terei que ir editando pelo painel mesmo.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda em 05/06/17, 11:49 am

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
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

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