Lista de imagens com múltiplas escolhas

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.

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/

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

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

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?

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.

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));

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.

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:
https://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?

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

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 ?

UP

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.

Veja: https://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.

Peço que remova a tag [img] e mantenha apenas a URL.

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

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));

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

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

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

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/

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:
https://imgur.com/a/HThDZ
Fica assim e não há como selecionar nada :/

up

UP

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));

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