Profilo: Elenco di immagini a selezione multipla


Tutorial Profilo: Elenco di immagini a selezione multipla

Messaggio Da Niko Lun 18 Gen 2021 - 19:53

Profilo: Elenco di immagini a selezione multipla


Definizione

lo scopo di questo tutorial è consentire agli amministratori di creare un campo profilo che è unelenco di immagini a selezione multipla, in cui gli utenti possono scegliere più di un'immagine che verrà salvata in un campo profilo. Per esempio:

Profilo: Elenco di immagini a selezione multipla GpOJhVS

Crea un campo profilo

per iniziare, dobbiamo creare un campo profilo in Pannello di amministrazione> Utenti e gruppi> Utenti> Profili :new: con la seguente configurazione:

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


Le altre sezioni possono essere completate come desideri.

Individua l'ID del campo del profilo

Quindi andiamo nel nostro profilo sul forum (/profile?mode=editprofile) e cerchiamo il campo del profilo creato nel passaggio precedente.

Dobbiamo utilizzare l'opzione Inspect Element del nostro browser, selezionare l'area di testo e annotare il suo ID in un blocco note.
Profilo: Elenco di immagini a selezione multipla PPejEuB

Non ci resta che annotare l'ID, ovvero la parte segnata in rosso:
textarea # profile_field_2_4 .inputbox

Creazione del codice Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice Javascript sia attiva e creiamo un nuovo codice con queste impostazioni:

  • 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

idCamp ID della textarea.
multiImage Le immagini nell'elenco.
mensajeIl messaggio da visualizzare quando si aggiunge un'immagine al profilo dell'utente.
mensajeBorrar Il messaggio da visualizzare quando si cancella il contenuto del campo del profilo.

Personalizzazione dello stile (CSS)

Andiamo verso Pannello di amministrazione ► Visualizzazione ► CSS e Immagini ► Foglio di stile CSS e aggiungiamo questo codice:
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

Quando andremo a modificare il nostro profilo, vedremo che la nostra area di testo è diventata un campo come questo:
Profilo: Elenco di immagini a selezione multipla D7jDp5g

Quando clicchiamo su una delle immagini che abbiamo predefinito in Javascript (in questo caso , browser) verranno aggiunti al campo del profilo. Possiamo aggiungere tutte le immagini che vogliamo e ogni volta che aggiungiamo un'immagine riceveremo un avviso JS per farcelo sapere.

Quando clicchiamo su Mostra contenuto vedremo il contenuto del campo profilo in bbcode.
Profilo: Elenco di immagini a selezione multipla LVPR4Ed

E facendo clic su Elimina eliminerai il contenuto del campo del profilo.

Il risultato in argomenti e profilo sarà il seguente:
Profilo: Elenco di immagini a selezione multipla 8bQyDUQ

Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8923
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.