Lista de imagens com múltiplas escolhas

3 participantes

Ir para baixo

Tópico resolvido Lista de imagens com múltiplas escolhas

Mensagem por iScroll 20.05.17 23:42

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.
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Luiz 21.05.17 13:11

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/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll 22.05.17 19:25

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

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 23.05.17 12:43

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

Mensagem por iScroll 23.05.17 16:45

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?
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Luiz 23.05.17 17:07

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));
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll 23.05.17 22:57

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:
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?
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Luiz 23.05.17 23:34

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
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll 23.05.17 23:49

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 ?
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll 25.05.17 1:06

UP
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 25.05.17 12:52

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

Mensagem por iScroll 25.05.17 21:57

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.
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 25.05.17 22:01

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

Mensagem por iScroll 25.05.17 22:04

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

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 26.05.17 14:32

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

Mensagem por iScroll 27.05.17 0:09

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
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 29.05.17 14:20

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

Mensagem por iScroll 29.05.17 22:48

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 :/
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll 30.05.17 22:51

up
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por iScroll 03.06.17 14:28

UP
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 05.06.17 13:06

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

Mensagem por iScroll 05.06.17 15:45

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

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Lista de imagens com múltiplas escolhas

Mensagem por Kyo Panda 05.06.17 15:49

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

Ir para o topo

- Tópicos semelhantes

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