Credo di aver capito (nel caso in cui non sia così, ti prego di voler approfondire la spiegazione): tu hai diversi contenuti (gli spoiler) nella tua pagina e vuoi utilizzare lo stesso sistema per aprirli.
Ti esprimo la mia idea (seppur ti faccio notare che, non potendo vedere la situazione pratica, diventa difficile capire esattamente quello che vuoi e quindi formulare la giusta soluzione).
Parto supponendo che queste due righe siano già inserite nella tua pagina, in modo che Shadowbox sia importato e abbia i suoi stili corretti.
- Codice: Seleziona tutto
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true
});
</script>
Successivamente, potresti improntare la cosa così:
- Quando hai uno spoiler, puoi inserire un collegamento che reciti "Clicca qui per visualizzare lo spoiler" al quale assocerai:
- Il cancelletto per quanto riguarda l'attributo href
- Nell'attributo onClick inserisci la funzione openSpoiler() ove fra parentesi inserisci il corpo dello spoiler che vuoi visualizzare (esempio: onclick="openSpoiler('qui il corpo dello spoiler che verrà visualizzato nel popup');")
A questo punto, una piccola spiegazione teorica: questo approccio funziona ottimamente se gli spoiler sono piuttosto corti, e non hanno i tag html al loro interno (mero testo, tanto per capirci). Ricorda che, con il fatto che hai gli apici, se li vuoi avere anche all'interno dello spoiler li devi escapare.
Detto questo, procediamo. Hai bisogno di inserire nell'header della pagina la funzione openSpoiler, che si occuperà di fatto di chiamare Shadowbox per visualizzare quello che ti interessa.
- Codice: Seleziona tutto
<script type="text/javascript">
function openSpoiler(spoilerText){
Shadowbox.open({
content: 'quicivahtmldiapertura' + spoilerText + 'quicivahtmldichiusura',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
}
</script>
Qualche piccolo cenno anche qui.
- All'interno di content, come vedi, ho inserito quicivahtmldiapertura e quicivahtmldichiusura. Li devi ovviamente modificare (anche con niente, se non li vuoi). Nel caso in cui non voglia niente devi lasciare solamente la dicitura content: spoilerText,. E' comunque consigliabile inserire qualcosa, specialmente per decorare o per spiegare all'utente cosa sta leggendo.
- Il titolo (leggasi: Welcome) puoi modificarlo inserendo qualcosa di generico, altrimenti se vuoi si può (migliorando la funzionalità) far sì che ogni spoiler abbia il suo. Intanto, proviamo a vedere se questo funziona o perlomeno risponde alle tue richieste, poi magari vediamo di migliorarlo. Mi farai sapere su questo. Se invece ti va bene ogni volta lo stesso, puoi modificare Welcome in quello che ti pare e piace.
- Anche height e width (rispettivamente altezza e larghezza) sono modificabili a piacimento. In questo caso, devi determinare da te se puoi inserire una grandezza prestabilita per ogni spoiler (ricordandoti che comunque il testo viene adattato in larghezza, ma non in altezza a meno che non inserisci la barra di scorrimento nel contenitore tramite i CSS).
Per il momento questo è quanto. Per ogni cosa, sono qui (anche per rifare tutto, nel caso in cui abbia completamente sbagliato ad intendere quello che volevi). Se hai dubbi, vuoi miglioramenti o quant'altro non esitare.