Lightbox da marker

[matjack1]

@pioneerskies se hai tempo dai un'occhiata a come ho fatto il ligthbox:
https://github.com/matjack1/geobeni/blob/master/wp-content/plugins/geo-mashup-custom/custom.js#L25

Dopo vari giri ho capito il problema. L'infowindow viene generata soltanto quando viene cliccato il marker, prima non esiste niente. Quindi è impossibile selezionarla con un selettore. C'è un hook in geo-mashup che ti dice quando è caricato il marker e che ti passa il contenuto html per eventuali modifiche. L'unico modo che ho trovato per attaccarmi esternamente è stato quello di appiccicargli una funzione onclick, in modo che potesse funzionare autonomamente da dentro l'infowindow.
La cosa fa un po' schifo, ma così non ho modificato geo-mashup e tutto viene fatto esternamente in JS. Non ci vedo grandi problemi in questo approccio, guarda un po'!

@incasteve, prova anche tu per vedere se va bene. Ora bisogna lavorare sul contenuto del lightbox per fargli caricare solo i CSS e JS che servono veramente, se no si spacca tutto :)

[alessandro-fazzi]

Spero di proseguire nel punto giusto la discussione, prendendo spunto dalla difficoltà incontrata da @incasteve qui

Cerco di far capire quale sia il problema, erroneamente percepito come relativo allo z-index.

L'immagine (vorrebbe) dimostra(re) il fatto che il nostro lightbox #colorbox si trovi all'interno di un iframe che a sua volta è all'interno di un div.map che è un fratello di div.geo-menu e div.geo-legend.

Ora il problema è l'aberrazione logica del markup che si sta ottenendo a lavorare con iframe con dentro cose con dentro cose con dentro un lighbox che noi vogliamo controllare da fuori. Io direi che siaun ottimo risultato che in qualche modo funzioni.

Teoria ( @matjack1 correggimi se dico cazzate ): la possibilità di risalita massima dello z-index di un elemento chiuso in un iframe è vincolata allo z-index che l'iframe stesso ha nel contesto generale.
Il nostro iframe non può essere spinto più in alto perché il suo parente deve comunque rimanere al di sotto di div.geo-menu e div.geo-legend. Quindi sembreremmo incastrati.

Si potrebbero nascondere i due elementi che stanno sopra quando si clicca sui link che fanno aprire il lightbox, ma poi non mi viene in mente il modo per ripristinarli se non mettere le mani dentro al plugin jQuery colorbox che sono una delicata spadellata di 1100 righe di javascript.

In definitiva il problema non è di CSS.

🚫 🆒 👶

Attendo idee 💡

[incasteve]

Tecnicamente io non ne posso nulla, però quello che posso dire è che non
ci perderei troppo tempo sopra. Cioè, se richiede troppi scazzi (e ne ha
già dati tanti) io lascerei perdere questa via del frame e tornerei alla
pagina separata.
Il 27/mar/2014 19:44 "Alessandro Fazzi" notifications@github.com ha
scritto:

Spero di proseguire nel punto giusto la discussione, prendendo spunto
dalla difficoltà incontrata da @incasteve https://github.com/incasteve
qui #11 (comment)

Cerco di far capire quale sia il problema, erroneamente percepito come
relativo allo z-index.

[image: screenshot from 2014-03-27 19 12 37]https://cloud.githubusercontent.com/assets/904690/2541368/875b32aa-b5dc-11e3-8fbb-6510f8581883.png

L'immagine (vorrebbe) dimostra(re) il fatto che il nostro lightbox
#colorbox si trovi all'interno di un iframe che a sua volta è all'interno
di un div.map che è un fratello di div.geo-menu e div.geo-legend.

Ora il problema è l'aberrazione logica del markup che si sta ottenendo a
lavorare con iframe con dentro cose con dentro cose con dentro un lighbox
che noi vogliamo controllare da fuori. Io direi che siaun ottimo risultato
che in qualche modo funzioni.

Teoria ( @matjack1 https://github.com/matjack1 correggimi se dico
cazzate ): la possibilità di risalita massima dello z-index di un
elemento chiuso in un iframe è vincolata allo z-index che l'iframe stesso
ha nel contesto generale.
Il nostro iframe non può essere spinto più in alto perché il suo parente
deve comunque rimanere al di sotto di div.geo-menu e div.geo-legend.
Quindi sembreremmo incastrati.

Si potrebbero nascondere i due elementi che stanno sopra quando si clicca
sui link che fanno aprire il lightbox, ma poi non mi viene in mente il modo
per ripristinarli se non mettere le mani dentro al plugin jQuery
colorbox che sono una delicata spadellata di 1100 righe di javascript.

In definitiva il problema non è di CSS.

[image: 🚫][image: 🆒][image: 👶]

Attendo idee [image: 💡]

Reply to this email directly or view it on GitHubhttps://github.com//issues/12#issuecomment-38844536
.

[matjack1]

eccomi! Scusate ma non sono riuscito a darci un'occhiata prima.

@pioneerskies concordo sul problema colorbox e concordo sul casino generale :)

Detto questo però, ottenere quello che si vuole dovrebbe essere abbastanza semplice, nascondiamo i 4 elementi quando viene fuori il colorbox e li rimostriamo quando si chiude.

Ci sono due callback di colorbox per fare le due cose. La nostra complicazione sta nel fatto che abbiamo un po' di iframe in campo, ma in qualche modo dovremmo farcela. Faccio una prova così vediamo se ci capiamo.

[matjack1]

ok, guardate nel commit qua sopra, per ora chiudo, se ci sono ancora problemi commentate ancora (citandomi, così non me lo perdo 😃)

[alessandro-fazzi]

Poi funziona uguale di sicuro...ma per quando @incasteve approfondirà jQuery/JS magari .bind() sarà deprecato:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

Bau!

[matjack1]

🆒
al prossimo commit lo cambio