Plugin Fancybox, problema con la funzione inline

marilu86
(@marilu86)

5 anni, 1 mese fa
Buonasera a tutti.
Sto usando il plugin HTML5 Maps per creare una mappa dell’Italia, la quale cliccando su ogni singola regione mi restituisce un elenco di specialisti che io inserisco con un editor di testo dalle impostazioni del plugin stesso.
Avevo fatto un semplice elenco sulla destra della cartina, ma mi hanno chiesto di creare una finestra pop-up che si aprisse cliccando sul nome dello specialista, dove ci sono info e contatti di ogni singolo.
Ho trovato Fancybox, con con l’opzione inline dovrebbe fare proprio quello che mi serve.

Quindi inserisco questo nell’editor di testo
```
<div class="card">
      <div class="card-body">
        <p class="mb-0">
          <a data-fancybox data-src="#modal" href="javascript:;" class="btn btn-primary">Nome specialista</a>
        </p>

        <div style="display: none;" id="modal">
          <h2>Nome specialista</h2>
          <p>Contatti</p>
        </div>

      </div>
    </div>
```
Innanzitutto, salvando la pagina mi scompare il <div style="display: none;" quindi poi, nel sito, la parte che dovrebbe essere nella finestra di dialogo (contatti) è ben visibile. Inoltre, se inserisco più box diversi, quindi più specialisti in elenco, nella finestra di dialogo di ognuno ci sono solo i dati che ho inserito nel primo box. Quindi per farvi capire, se faccio
```
<div class="card">
      <div class="card-body">
        <p class="mb-0">
          <a data-fancybox data-src="#modal" href="javascript:;" class="btn btn-primary">Specialista 1</a>
        </p>

        <div style="display: none;" id="modal">
          <h2>Specialista 1</h2>
          <p>contatti</p>
        </div>

      </div>
    </div>
<div class="card">
      <div class="card-body">
        <p class="mb-0">
          <a data-fancybox data-src="#modal" href="javascript:;" class="btn btn-primary">Specialista 2</a>
        </p>

        <div style="display: none;" id="modal">
          <h2>Specialista 2</h2>
          <p>contatti</p>
        </div>

      </div>
    </div>
```
Se clicco sul box dello “Specialista 2” mi apre i contatti dello “Specialista 1”.

Spero di avervi fatto capire qualcosa…grazie a chi mi darà una mano a risolvere l’arcano.

Stai visualizzando 6 risposte - dal 1 al 6 (di 6 totali)

luca21
(@luca21)

5 anni, 1 mese fa

Ciao @marilu86 ,

Sto usando il plugin HTML5 Maps per creare una mappa dell’Italia,

I poligoni dell’ Italia appartengono alla versione pro del plugin e non sono liberamente scaricabili. Fuori portata del forum quindi.

<div style=”display: none;” id=”modal”>

Questo dovrebbe essere facile da risolvere, accedendo a Bacheca -> Aspetto -> Personalizza -> CSS editor e inserirendo la stessa regola usando id=”modal”, magari seguita da !important.
Il plugin ha un forum di supporto frequentato comunque.

Chi ha creato la discussione marilu86
(@marilu86)

5 anni, 1 mese fa

Ciao @luca21

I poligoni dell’ Italia appartengono alla versione pro del plugin e non sono liberamente scaricabili. Fuori portata del forum quindi.

Non ho la versione pro, ho scaricato il plugin dalla directory di wordpress e le mappe sono tutte disponibili, sono alcune opzioni ad essere disponibili solo nella versione pro.

Il plugin ha un forum di supporto frequentato comunque.

Lo so, ma è in inglese e io non riesco a spiegarmi benissimo…

Questo dovrebbe essere facile da risolvere, accedendo a Bacheca -> Aspetto -> Personalizza -> CSS editor e inserirendo la stessa regola usando id=”modal”, magari seguita da !important.

Non ho capito, devo inserire <div style=”display: none;” id=”modal !important”> nel css? Perchè così non me lo fa salvare perchè ci sono i marcatori che non sono ammessi nel css.
Grazie mille per l’aiuto.

luca21
(@luca21)

5 anni, 1 mese fa

Ciao @marilu86 ,
hai ragione. I poligoni dell’ Italia si scaricano. Ho installato il plugin e quando ho visto premium sotto la riga aggiungi mappa ho lasciato perdere. Troppa fretta. Mi cospargo il capo di cenere.
Stessa fretta anche per il css.
Nel riquadro Bacheca -> Aspetto -> Personalizza -> CSS editor la regola da aggiungere è #modal{display:none;}. Anche l’ html cambia un pochino perché lo stile in linea non serve più. <div style="display: none;" id="modal"> diventa
<div id="modal">
Se non funziona si aggiunge !important in questo modo:
#modal{display:none !important;}
Se in altre pagine vedi che si cancellano blocchi che invece dovrebbero rimanere ci vuole una regola diversa. Aggiungiamo una classe (unica in tutto il sito) e usiamo quella. <div style="display: none;" id="modal"> diventa
<div id="modal" class="marilu86_class">
e la regola #modal{display:none;} diventa
.marilu86_class{display:none;}
Fai sapere se funziona.
Un saluto
Chi ha creato la discussione marilu86
(@marilu86)

5 anni, 1 mese fa
Ciao @luca21, ho fatto un po’ di prove, ma non funziona 🙁
Questo è quello che vedo
Però se poi clicco sui nomi per aprire la finestra di dialogo, si sistema e appare l’elenco di nomi cliccabile, come dovrebbe essere.
Ho appena notato che <a data-fancybox data-src="#modal" href="javascript:;" class="btn btn-primary">Specialista 1</a> quando salvo diventa <a data-fancybox data-src="#modal" href=";" class="btn btn-primary">Specialista 1</a>, scompare quindi “javascript” dall’attributo href….
- Questa risposta è stata modificata 5 anni, 1 mese fa da marilu86.
- Questa risposta è stata modificata 5 anni, 1 mese fa da marilu86.
luca21
(@luca21)

5 anni, 1 mese fa

Ciao @marilu86 ,
l’ installazione di fancybox dentro un plugin di WP non è una cosa da niente, a mio modesto avviso. Ci vuole tempo e un adeguato numero di prove. Se lo fai per esercizio è un conto, altrimenti c’è da valutare se la versione pro del plugin offre questa funzionalità.
Quanto alla scritta che scompare ricordiamoci che href = “javascript:;” href = “javascript: void(0);” e href=”;” vogliono dire la stessa cosa fai nulla , non fare niente. Si mettono quando non si sa che pesci pigliare perché il link viene gestito da javascript in altro modo e il campo href è inutile, però con questa scritta rimane lo stesso la manina passandoci sopra con il mouse.
Davvero mi spiace ma l’installazione specifica di fancybox violerebbe le direttive del forum, penso. Domande di tipo più generale no invece.
Un saluto.
Chi ha creato la discussione marilu86
(@marilu86)

5 anni, 1 mese fa
Ok, grazie comunque per l’assistenza.
Un’ultima domanda: cosa dovrei cercare per trovare un plugin che mi faccia inserire contenuti inline nel testo di un plugin?
- Questa risposta è stata modificata 5 anni, 1 mese fa da marilu86.

Stai visualizzando 6 risposte - dal 1 al 6 (di 6 totali)

Il topic ‘Plugin Fancybox, problema con la funzione inline’ è chiuso a nuove risposte.

Plugin Fancybox, problema con la funzione inline

Tag del topic

Visualizza