Includere una pagina html in un nodo d8
Ho un piccolo giochino su una pagina in HTML5 e vorrei incorporarlo nella pagina dei giochi didattici del mio sito.
Non potendo usare php, pensavo di adoperare Colorbox, ma non riesco a trovare una classe funzionante.
Se uso solo la classe "colorbox", si apre il box con il messaggio: This content failed to load.
Se uso "colorbox-inline" o "colorbox-load", si apre direttamente la pagina completa senza box.
Nelle istruzioni del modulo c'è scritto: Add a the attribute data-colorbox-inline to an element and make it's value a selector for the content you wish to open. Eg, <a data-colorbox-inline=".user-login">User Login</a>, ma non ho capito come applicarlo.
Nel caso delle gallerie fotografiche è semplice: data-colorbox-gallery="nome-galleria", ma qui?
C'è poi questo post: https://www.drupal.org/project/colorbox_load/issues/2873279 che mi lascia perplesso: allora cosa serve il modulo?
Qualche soluzione, anche alternativa?
ciao e grazie
Risposte
Ciao, utilizzando
Ciao, utilizzando colorbox_load prova ad inserire qualcosa del genere:
<a class="use-ajax" data-dialog-type="colorbox" href="/test">TEST</a>dovrebbe aprirti la pagina /test in un colorbox le cui caratteristiche sono impostate dalla pagina admin/config/media/colorbox
Grazie. Ho provato ma non si
Grazie.
Ho provato ma non si apre nulla.
Ho messo il link TEST sotto il primo gioco in questa pagina:
http://www.gmpe.it/puzzle
ma non succede niente. Eppure, per le immagini colorbox funziona perfettamente:
http://www.gmpe.it/convivialita
ciao e grazie
Colorbox load funziona solo
Colorbox load funziona solo con path interni l'html deve essere presente all'interno di un nodo e poi utilizzi il path del nodo per il link.
Un semplice workaround può essere creare un nodo con dentro un iframe tipo:
<iframe frameborder="0" height="480px" src="http://www.gmpe.it/sites/default/files/giochi/sliding.html" width="480px"></iframe>se il path del nuovo nodo è "/iframe" nel link metterai
<a class="use-ajax" data-dialog-type="colorbox" href="/iframe">TEST</a>Grazie. Funziona ma si apre
Grazie.
Funziona ma si apre il box a tutta pagina e non si adatta alle dimensioni del contenuto.
ciao e grazie
Con il metodo descritto le
Con il metodo descritto le uniche impostazioni sulle dimensioni le trovi in admin/config/media/colorbox dove selezionando Opzioni -> Personalizzato puoi dare una dimensione massima (e minima) al popup.
Purtroppo i giochi hanno
Purtroppo i giochi hanno dimensioni diverse.
Per il momento lascio così.
Grazie per la pazienza.
ciao
Per avere un controllo
Per avere un controllo migliore alla necessità uso un codice simile:
(function ($, Drupal, settings) {Drupal.behaviors.colorboxPopup = {
attach: function (context, settings) {
$('a.colorbox-popup').once('colorbox-popup-init').each(function(e) {
var $this = $(this);
var _href = $this.attr("href");
var width = $this.attr('data-colorbox-width');
var height = $this.attr('data-colorbox-height');
var cset = jQuery.extend({}, settings.colorbox);
if (width) cset.innerWidth = width;
else cset.innerWidth = cset.maxWidth;
if (height) cset.innerHeight = height;
else cset.innerHeight = cset.maxHeight;
cset.iframe = true;
$this.colorbox(cset);
});
}
};
})(jQuery, Drupal);
puoi creare un file all'interno del tuo tema con questo contenuto, di solito c'è una directory js per le librerie, tipo themes/[contrib|custom]/[tuotema]/js/colorboxPopup.js.
nel file [tuotema].info.yml aggiungi la nuova libreria:
...
libraries:
- ...
- ...
- [tuotema]/colorboxPopup
...
e aggiungi la libreria tra quelle esistenti in [tuotema].libraries.yml:
...
colorboxPopup:
version: 1.0
js:
js/colorboxPopup.js: {}
...
Al termine di queste operazione ricostruisci la cache della piattaforma e utilizza un codice del genere per attivarlo:
<a class="colorbox-popup" data-colorbox-width="500px" src="http://www.gmpe.it/sites/default/files/giochi/sliding.html" data-colorbox-height="500px">CLICCA QUI</a>sicuramente un pò macchinoso ma più flessibile.
Grazie per tutto il tempo che
Grazie per tutto il tempo che stai impiegando.
Ho seguito alla lettera le istruzioni. Il box si apre della misura giusta, ma non si carica il file. Rimane l'interno bianco.
Mi sembra di avere fatto tutto giusto.
- Ho creato il file colorboxPopup.js, copiando il tuo codice, e l'ho inserito nella cartella: majo/js
- Nel file mayo.info.yml, dopo libraries ho aggiunto la riga - mayo/colorboxPopup
- Nel file mayo.libraries.yml ho copiato il codice indicato
- Nel nodo ho copiato il codice del link
... eppure non funziona.
ciao e grazie ancora
Hai ragione ma la colpa è
Hai ragione ma la colpa è mia, per la fretta ho toppato un attributo. L'url della risorsa deve essere specificato in href non in src quindi:
<a class="colorbox-popup" data-colorbox-width="500px" href="http://www.gmpe.it/sites/default/files/giochi/sliding.html" data-colorbox-height="500px">CLICCA QUI</a>prova e vedi se questo risolve.
Magnifico!! Ora funziona
Magnifico!!
Ora funziona perfettamente!
ciao e grazie infinite
Ottimo, a presto!
Ottimo, a presto!