Ingrandire immagini nelle pagine Web con Javascript Image Magnification 26





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

<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.

<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 quiUlteriore documentazione

Seguimi su twitter : @ironico

26 thoughts on “Ingrandire immagini nelle pagine Web con Javascript Image Magnification

  1. Reply silvio nov 11,2012 8:10 pm

    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

  2. Reply marcello ott 8,2012 9:14 pm

    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 :'(

  3. Reply salvatore mag 19,2011 6:16 pm

    il programma e’ incompatibile con ie8 da sempre un errore

  4. Reply Luca ott 21,2009 1:04 pm

    Proprio in ultimo, come si fa ad utlilizzarlo per più immagini?

    Mi serve per gestire la pagina dettaglio di un annuncio immobiliare

    GRAZIEEEE

  5. Reply Luca ott 21,2009 12:54 pm

    Rettifico, funziona, ma sarebbe carino oscurare lo sfondo in fase di ingrandimento…difficile?

  6. Reply Luca ott 21,2009 12:46 pm

    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

  7. Reply mattia giu 23,2009 5:08 pm

    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

  8. Reply Gennaro Varriale giu 23,2009 4:43 pm

    @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

  9. Reply Mattia giu 23,2009 3:54 pm

    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..

  10. Reply Mattia giu 23,2009 3:45 pm

    ciao..no perchè ho notato che anche sui tuoi esempi mi succede la stessa cosa…non so…

  11. Reply Gennaro Varriale giu 23,2009 3:42 pm

    @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.

  12. Reply Mattia giu 23,2009 2:54 pm

    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

  13. Reply Gennaro Varriale apr 8,2009 7:37 pm

    @Alessandro: hai controllato che gli “id” delle immagini siano diversi?
    Guarda l’esempio, ci sono più immagini con più effetti e funzionano tutti.

  14. Reply Alessandro apr 8,2009 5:16 pm

    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

  15. Reply Donato gen 5,2009 6:24 pm

    Ci riprovo, grazie

  16. Reply Gennaro Varriale gen 5,2009 2:30 pm

    @Donato: Devi aggiungere la libreria javascript “PopBox.js” come descritto nel punto 2.

  17. Reply Donato gen 5,2009 11:11 am

    Ci sto provando anche io ma il risultato è questo che vedete qui !http://www.meteobitritto.com/clicca.html

    Chi mi dà una mano ? grazie

  18. Reply Gennaro Varriale set 6,2008 8:16 am

    @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..

  19. Reply manu06 set 5,2008 8:44 pm

    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ù.

  20. Reply Gennaro Varriale set 3,2008 6:23 pm

    @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

  21. Reply manu06 set 2,2008 11:39 pm

    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

  22. Reply Gennaro Varriale mag 20,2008 8:07 pm

    @Mauro: Può essere usato dovunque, per maggiori informazioni segui il link “Ultriore documentazione”

  23. Reply Mauro mag 20,2008 12:28 pm

    Scusate, ma questo javascript può essere usato anche nei forum di forumcommunity e free?? Se sì come? Sono disperato ufffff

  24. Reply Gennaro Varriale ott 26,2007 7:14 pm

    Ciao Chris, grazie per la fiducia ;)
    Anch’io ne uso diversi, ma questo script mi ha subito colpito per la sua efficienza e praticità.

  25. Reply Chris ott 26,2007 3:13 pm

    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!

Leave a Reply

  

  

  

Current ye@r *

Login with:
Powered by Sociable!

Per essere informato sui miei contenuti - Email: