MojoMagnify - JavaScript Image Magnifier Example

Il presente script è una prova del MojoMagnify Javascript Immagine Magnifier. Per vederlo in azione, spostare il mouse sulle immagini. La prima immagine utilizza una versione più grande per ottenere l'effetto ingrandimento; la seconda utilizza una versione bianco/nero e colore, delle stesse dimensioni, per un altro effetto. All'immagine viene aggiunto automaticamente un collegamento alla versione ad alta risoluzione, se alla stessa immagine non è già stato attribuito un link.

Per il Download dello script: mojomagnify.zip [3.25 KB]

Configurazione

Aggiungere il seguente codice tra i tag <head> e </head>


    <!--Step 1: richiamare i file JavaScript e CSS-->

    <script type="text/javascript" src="mojomagnify.js"></script>
    <link type="text/css" href="mojomagnify.css" rel="stylesheet" />


    <!-- Step 2: la personalizzazione dell'attributo 'data-magnifysrc' indica il percorso dell'immagine grande-->
    <img src="kendwa_small.jpg" data-magnifysrc="kendwa_big.jpg" id="myimage" />


    <!-- la personalizzazione dell'attributo 'data-magnifysrc' indica il percorso dell'immagine grande-->
    <img src="roskilde_bw.jpg" data-magnifysrc="roskilde_color.jpg" id="myimage2" />

E' possibile aggiungere dinamicamente l'effetto lente di ingrandimento con JavaScript usando la funzione MojoMagnify.makeMagnifiable.


    // la funzione 'makeMagnifiable' consente di aggiungere l'effetto con JavaScript
    
    MojoMagnify.makeMagnifiable = function(oImage, strSource) {
    // oImage = l'immagine alla quale aggiungere l'effetto 
    // strSource = il percorso dell'immagine ad alta risoluzione
    }

    // Esempio (utilizzo dell'immagine riportata più su):
    MojoMagnify.makeMagnifiable(
	document.getElementById("myimage2"), 
	"kendwa_big.jpg"
    );

Problemi noti:
Padding e bordi dell'immagine di destinazione possono dare risultati inattesi se non si imposta border e padding per l'immagine ingrandita nel file mojomagnify.css