Ingrandire immagini nelle pagine Web con Javascript Image Magnification - -oldpost-





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

3) Inserire nella pagina l’immagine da ingrandire.

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

 

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

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

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

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

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

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

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

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

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

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

  10. 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 to Gennaro Varriale Cancel reply

Your email address will not be published. Required fields are marked *