Tramite Javascript image Magnification (PopBox) è possibile inserire in una pagina web foto che possono essere ingrandite (fino a tutta l’area del browser) con un semplice click. Per farlo funzionare sono necessarie solo 3 righe html. Una per caricare il javascript e l’altra per l’immagine (un semplice tag img)
Le caratteristiche principali sono:
- Semplicità d’uso
- Non usa popup o altre pagine
- Non richiede plugin o trucchi css
- Permette di utilizzare una thumbnail in prima pagina
- Permette di inserire un messaggio (caption) sopra l’immagine (sia thumbnail che ingrandita)
Come utilizzarlo :
1) Scarica il file PopBox (contiente il sorgente javascript, le icone e il foglio di stile di default)
2) Inserire nella pagina html tra il tag <head> e </head> il riferimento al foglio di stile e al file javascript
|
1 2 |
<link rel="stylesheet" type="text/css" href="Styles.css" /> <script src="PopBox.js" type="text/javascript"></script> |
3) Inserire nella pagina l’immagine da ingrandire.
|
1 2 3 |
<img class="PopBoxImageSmall" id="imgBamburgh" title="Clicca per ingrandire" onclick="Pop(this,50,'PopBoxImageLarge');" alt="" src="immagine.jpg" style="width: 150px; height: 100px" /> |
Aggiungendo al tag img altri tre attributi è possibile inserire un messaggio (una caption ) ecco come fare:
showpopbar=”true” pbcaption=”TESTO DA VISUALIZZARE” pbshowcaption=”true”
Guarda gli esempi qui – Ulteriore documentazione
« « Informazioni Javascript, PHP, CSS, MySQL (ed altri) a portata di mano con i Cheat Sheets! | Prelevare il contenuto di una pagina web passando i parametri via POST (PHP) » »
Articoli correlati
Ho installato PopBox per la visualizzazione delle foto dei giocatori ma quando dopo aver ingrandito le miniature scompaiono tutte meno la prima.
Cosa devo fare per vederle tutte. Grazie
Salve…
sto cercando di utilizzare questo fantastico script per una gallerie con più immagine.
lo script funziona, le immagini si ingrandiscono tutte. ma………. solo la prima torna in miniatura, il resto delle altre miniature sparisce.
dove sbaglio?
sto impazzendo! aiutatemi :’(
il programma e’ incompatibile con ie8 da sempre un errore
Proprio in ultimo, come si fa ad utlilizzarlo per più immagini?
Mi serve per gestire la pagina dettaglio di un annuncio immobiliare
GRAZIEEEE
Ciao Luca,
è da molto che non utilizzo questo ottimo script.
Hai letto la documentazione?
http://www.c6software.com/products/popbox/Documentation.aspx
Dovrebbe esserci tutto quello che ti serve.
Rettifico, funziona, ma sarebbe carino oscurare lo sfondo in fase di ingrandimento…difficile?
Ciao a tutti, soprattutto a Gennaro :-)
sono nuovo di programmazione web, uso Dreamweavwer e sto cercando di fare funzionare lo script, ma non ci riesco.
Puoi aiutarmi?
Nella cartella del sito ho caricato sia il file di stile che il java, ho aperto nuovo file html e ci ho copiato le righe da te riportate, associando anche il file di stile.
Mi sa che manca qualcosa…
Grazie
si perchè ora li ho tolti ma come mai sta cosa succede anche se utilizzo i tuoi esempi???inyendo quelli sul sito solo provandoli riesco solo la prima volta
@Mattia: nel link della tua pagina non c’è nè il javascript, nè la classe associata ad ogni immagine. Ti ripeto fai dei test, copiando ed incollando il codice degli esempi che trovi qui
tra l’altro non reisco ad utilizzarlo con joomla…nn co che fare pensavo di aver risolto i miei problemi invece sono punto a capo….spero mi riesca ad aiutare..
ciao..no perchè ho notato che anche sui tuoi esempi mi succede la stessa cosa…non so…
@Mattia: controlla la differenza tra il codice degli esempi ed il tuo, deve esserci qualche errore. Per esempio una variabile sbagliata o qualcosa di simile.
davvero grande script ma come mai se ingrandisco e poi faccio tornare l’immagine alòla dimensione normale non riesco piu a ingrandirla??? sper in un tuo aiuto…grazie in anticipo
@Alessandro: hai controllato che gli “id” delle immagini siano diversi?
Guarda l’esempio, ci sono più immagini con più effetti e funzionano tutti.
script formidabile.. ma.. COME MAI SE MOSTRO PIU IMMAGINI NELLA STESSA PAGINA.. la prima quando la riduco resta e ele altre invece no????
gennaro spero tu possa aiutarmi..
ale, grazie
Ci riprovo, grazie
@Donato: Devi aggiungere la libreria javascript “PopBox.js” come descritto nel punto 2.
Ci sto provando anche io ma il risultato è questo che vedete qui !http://www.meteobitritto.com/clicca.html
Chi mi dà una mano ? grazie
@manuo6: E’ da molto che non uso questo script, ma se ricordo, non permette di fare quello che dici. Renderizza l’immagine al massimo nella finestra attiva. Ma potrei sbagliare, ti consiglio di lasciare un messaggio sul loro forum. Altrimenti provare altre soluzioni come jlightbox, thickbox ecc..
Grazie Gennaro.
Il mio problema è che l’immagine si ingrandisce ma si adatta allo schermo senza attivare la barra di scrollo laterale. Io invece vorrei che si ingrandisse ancora di più.
@manuo6: controlla bene la sintassi, sembra che non ti esegue il javascript. Ti da errore/warning in fondo pagina? Altrimenti, prova a scaricarti l’esempio dal sito e modificalo un pò. ciao
Ciao
Scusate perchè non riesco ad ingrandire più di tanto la mia immagine nonostante il suo formato originale sia 872×1321
C’è qualche funzione che devo settare?
Grazie
@Mauro: Può essere usato dovunque, per maggiori informazioni segui il link “Ultriore documentazione”
Scusate, ma questo javascript può essere usato anche nei forum di forumcommunity e free?? Se sì come? Sono disperato ufffff
Ciao Chris, grazie per la fiducia ;)
Anch’io ne uso diversi, ma questo script mi ha subito colpito per la sua efficienza e praticità.
Bello Gennaro questo script,io ho usato Highslide che fa quasi le stesse cose ma ti obbliga a preparare le thumbnail delle foto,questo è molto + pratico ed ha anche più features.
Bene ho deciso che ti infilo nel feed reader,a me piacciono i blog sulla programmazione :-D
alla prossima!