popup javascript

[Ozne]

Ho la necessità di aprire alcune immagini all'interno di un popup, e la soluzione ottimale l'ho trovata con javascript:

Codice: Seleziona tutto

<a href="javascript:;" onClick="window.open('img.jpg', 'title', 'width=650, height=450, resizable, status, scrollbars=1, location,');"></a>

solo che in questo modo lo sfondo della finestra è bianco, mentre a me l'ideale sarebbe averlo nero, è possibile farlo, senza troppe complicazioni?

Grazie

[Andy94]

Se non inserisci l'immagine che vuoi visualizzare all'interno di una pagina html creata all'occorrenza (all'interno della quale, tramite una regola CSS inline inserisci lo sfondo nero) lo sfondo rimane bianco.

Altra possibilità che hai è quella di generare una finestra delle stesse dimensioni dell'immagine, in modo che non si veda alcun bordo bianco. In questo caso, devi togliere l'attributo resizable.

[Ozne]

Ma non è pratico, dovrei modificare il link nel codice html oltre a creare una pagina per ogni immagine, oppure no?

il resize mi serve, le immagini sono a volte molo grandi

Non si può includere del codice html nel javascript, del tipo:

Codice: Seleziona tutto

<span style=''widht:100%;height;100%;background-color:#000;'><img src=' ' /></span>

?

[Andy94]

No, quello non puoi farlo.

O fai una pagina html per ogni immagine, come hai detto tu, oppure puoi pensare ad una pagina PHP a cui passi il nome dell'immagine che ti serve (con i dovuti controlli, ovviamente) la quale non fa altro che stamparti l'immagine a video e includere le regole css che ti servono. La situazione si complica un attimino, ma la risolvi egregiamente.

[ssjx]

Io invece ti suggerirei un approccio decisamente più moderno con l'uso di finestre modali (Lightbox per intenderci)

Io consiglierei Shadowbox ma poi è questione di gusti

[Ozne]

No, quello non puoi farlo.

O fai una pagina html per ogni immagine, come hai detto tu, oppure puoi pensare ad una pagina PHP a cui passi il nome dell'immagine che ti serve (con i dovuti controlli, ovviamente) la quale non fa altro che stamparti l'immagine a video e includere le regole css che ti servono. La situazione si complica un attimino, ma la risolvi egregiamente.

si, stavo pensando a una cosa del genere gestendo tutto con php. verrebbe una cosa tipo urlpagina?=immagine.jpg

@ssjx
ci avevo pensato, ma con questi script non è poi possibile vedere l'immagine a piena risoluzione...

[ssjx]

Shutter Reloaded e ti passa la paura


PS
ed in realtà mi pare che anche shadowbox avesse qualche opzione in merito ma non sono sicuro

[Andy94]

Pur essendo sicuramente migliore il metodo suggeritoti da ssjx (specialmente di questi tempi), non te lo avevo consigliato perché appunto pensavo che avessi scartato a priori questo approccio. Tuttavia, se invece ne hai la possibilità, ti consiglio seriamente di valutarla: è tutto più usabile, più semplice da gestire ed esteticamente più accattivante.

si, stavo pensando a una cosa del genere gestendo tutto con php. verrebbe una cosa tipo urlpagina?=immagine.jpg

Quasi. A meno che tu non voglia utilizzare le mod_rewrite di Apache, vi è l'estensione .php da tenere in considerazione. Diventa quindi urlpagina.php?img=immagine.php. Tuttavia ricorda che, una soluzione come questa, richiede dei controlli basilari, perlomeno sull'esistenza del file richiamato.

[Ozne]

[quote="Andy94"]No, quello non puoi farlo.
vada per gli script, magari li personalizzerò e inserirò un link all'immagine a piena risoluzione. :)

grazie

[ssjx]

vada per gli script, magari li personalizzerò e inserirò un link all'immagine a piena risoluzione. :)

Shutter Reloaded e ti passa la paura

Questo lo inserisce già da solo quando l'immagine è più grande ;)

[Ozne]

Ma non voglio creare delle miniature.

lo script mi riduce l'immagine per farla stare nel box, e non c'è nessun tasto per vedere l'immagine a piena risoluzione.
Ma alla fine mi va bene anche così, l'immagine può essere aperta su una scheda a parte (almeno in firefox) con il tasto centrale del mouse, e si vede a massima risoluzione.

Una domanda, è possibile usare questo script per far aprire con un link un box con del testo?
leggendo sul sito ho visto che è possibile aprirlo all'apertura di una pagina per un messaggio di benvenuto/pubblicità, ma non c'è scritto come farlo aprire da un link.
http://www.shadowbox-js.com/usage.html#markup

comunque è molto interessante questo script, soprattutto la possibilità di creare delle gallerie in modo semplice e veloce, basta editare un tag...
grazie della segnalazione

[ssjx]

lo script mi riduce l'immagine per farla stare nel box, e non c'è nessun tasto per vedere l'immagine a piena risoluzione.

Come ho detto sopra Shutter Reload se l'immagine è più grande della finestra del browser inserisce anche un link per aprirla a parte

Una domanda, è possibile usare questo script per far aprire con un link un box con del testo?
leggendo sul sito ho visto che è possibile aprirlo all'apertura di una pagina per un messaggio di benvenuto/pubblicità, ma non c'è scritto come farlo aprire da un link.
http://www.shadowbox-js.com/usage.html#markup

Non sono sicuro di avere capito, comunque se in un link metti rel=shadowbox viene usato lo script

[Ozne]

Shutter Reload non penso si integri con shadowbox, io vorrei il popup.
comunque non fa niente, shadowbox mi soddisfa così com'è.

Non sono sicuro di avere capito, comunque se in un link metti rel=shadowbox viene usato lo script

dunque, vorrei che cliccando su di un link si apra un box di shadowbox con dl testo.
Sono giù riuscito a farlo, a richiamando un file html esterno:

Codice: Seleziona tutto

<a href="test.html" rel="shadowbox">test</a>

solo che vorrei che il tutto venga gestito dal codice della pagina senza richiamare file esterni.
Sul sito ufficiale c'è un esempio per inserire un messaggio di benvenuto all'apertura della pagina, quindi credo sia possibile, ma non so come scrivere il codice. :(

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
});

window.onload = function() {

    // open a welcome message as soon as the window loads
    Shadowbox.open({
        content:    '<div id="welcome-msg">Welcome to my website!</div>',
        player:     "html",
        title:      "Welcome",
        height:     350,
        width:      350
    });

};
</script>


[ssjx]

Sono troppo arrugginito per aiutarti... la soluzione stà in quel "onload" ma dovrai aspettare Andy per risolverlo

[Ozne]

grazie comunque.

questo script è strepitoso.

[Andy94]

Eccomi qui.

Non seguendo più la discussione, mi sono perso gli ultimi pezzi e ho capito solo a grandi linee quello che vuoi fare. In pratica, tu vuoi utilizzare lo script affinchè ti faccia apparire dei contenuti, dico bene? Ebbene, sarebbe interessante sapere se questo contenuto lo hai in una pagina creata appositamente (e referenziata tramite un link all'interno di un'altra) o se si tratta di poco codice e non vale la pena di creare una pagina a sé stante.

In base a questo vedremo come perfezionare il codice.

[Ozne]

Richiamando una pagine esterna sono riuscito ad ottenere un popup con del testo, ma mi risulta molto scomodo da gestire, visto che intendo usarlo per rimpiazzare gli spoiler nella pagina, che ora sono gestiti in modo un po' casereccio (testo nero su sfondo nero ).
Il testo da visualizzare non è molto, sono in genere poche righe.

grazie

[Andy94]

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.

[Ozne]

grande!

ci sono (ci sei) riuscito!

Ho solo dovuto sistemare il css, perché il testo era nero su sfondo nero.
Solo che non c'è padding, quindi è attaccato al bordo.

per tag di apertura e chiusura, posso inserire un div con css?

tipo:

Codice: Seleziona tutto

<div class='spoiler'>

e

Codice: Seleziona tutto

</div>

?

Grazie per la disponibilità.

EDIT

inserendo i tag di apertura e chiusura come sopra lo script non funziona più :(

sto cercando si trovare una soluzione con il css, ma il padding ha effetto anche sulle immagini.

[Ozne]

Risolto!

ho editato il css in questo modo:
da così

Codice: Seleziona tutto

#sb-player.html{height:100%;overflow:auto;}

a così

Codice: Seleziona tutto

#sb-player.html{height:100%;overflow:auto;padding:6px;color:#fff;}

in questo modo ho un padding solo per i popup che contengono testo, e quest'ultimo è bianco su sfondo nero. :)

Direi che sono molto soddisfatto del risultato.

Grazie mille.

C'è la possibilità d'inserire anche qualche immagine, oppure sconquassa il tutto? Comunque è già ottimo così. :)

EDIT

Ho scoperto ora che ci sono problemi con gli apostrofi del testo. :(
se c'è un apostrofo il popup non viene mostrato, forse perché chiude la sintassi e il testo successivo rende non valido il codice.