Profilo: Elenco di immagini a selezione multipla

Definizione

Crea un campo profilo

• Tipo: Zona di testo
  Chi può modificare il valore del suo contenuto?: L'utente stesso
  
• Lunghezza massima: 15000 caratteri

Individua l'ID del campo del profilo

textarea # profile_field_2_4 .inputbox

Creazione del codice Javascript

• Titolo: a tua scelta
  
• Dove: in tutte le pagine
  
• Codice:
  

  Codice:

  if (/\??mode=editprofile$/.test(location.search)||/\/?u(\d+)$/.test(location.pathname)) {
    var multiImage = [];
    /**** CONTENIDO EDITABLE***/

    var idCamp = 'profile_field_2_4'; //id del campo del profilo

    //multiImage[indide_de_las_imágenes] = 'URL_IMAGEN';
    multiImage[1] = 'http://i.imgur.com/H3LuC6o.png';
    multiImage[2] = 'http://i.imgur.com/7uWDYRm.png';
    multiImage[3] = 'http://i.imgur.com/QrrqbuP.png';
    multiImage[4] = 'http://i.imgur.com/pxLa8Il.png';
    multiImage[5] = 'http://i.imgur.com/dzqg2nV.png';

    var mensaje = 'L'immagine è stata aggiunta all'elenco';
    var mensajeBorrar = 'Contenuti eliminati. Ricorda che per salvare i campi dovrai cliccare sul pulsante REGISTRATI';

    /*** FIN CONTENIDO EDITABLE ***/

    $(document).ready(function() {
        if (document.getElementById(idCamp) != null) {
            var content = '';
            for (i in multiImage) {
                content += '<img src="' + multiImage[i] + '"  onclick="javascript:document.getElementById(idCamp).value +=\'[img]' + multiImage[i] + '[/img]\';alert(mensaje);" class="imgFA" />';;
            }
            $("#" + idCamp).before(content);
            var verCampo = '<div onclick="javascript:document.getElementById(idCamp).style.display = \'block\';" style="cursor:pointer;">Mostra contenuto</div><div onclick="javascript:if(document.getElementById(idCamp).value!=\'\'){document.getElementById(idCamp).value=\'\';alert(mensajeBorrar);}" style="cursor:pointer"><img src="http://2img.net/i/fa/admin/icones/supprimer.png"/>Elimina</div>';
            $("#" + idCamp).after(verCampo);
            document.getElementById(idCamp).style.display = "none";
        }
    });
}

Spiegazione delle variabili

Personalizzazione dello stile (CSS)

Codice:

.imgFA {
  height: 26px;
  cursor: pointer;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}
.imgFA:hover {
  height: 35px;
}

Spiegazione e funzionamento