MojoZoom - JavaScript Image Zoom Example

Questa è una prova dell'effetto MojoZoom su una immagine, ottenuto con Javascript.

Si sposti il mouse sull'immagine per vedere in azione MojoZoom.

Oltre ad aggiungere l'effetto zoom, l'immagine viene resa automaticamente anche come collegamento alla versione ad alta risoluzione (posto che all'immagine stessa non sia stato assegnato già un link).

Per effettuare il Download dello script: mojozoom.zip [3.72 KB]

Configurazione

    <!--Step 1: richiamare i file JavaScript e CSS-->
    
    <script type="text/javascript" src="mojozoom.js"></script>
    <link type="text/css" href="mojozoom.css" rel="stylesheet" />

    <!-- Step 2: aggiungere l'attributo 'data-zoomsrc' all'immagine per indicare il path dell'immagine grande -->
    <img src="kendwa_small.jpg" data-zoomsrc="kendwa_big.jpg" id="myimage" />

Per impostazione predefinita, un riquadro di 256px X 256px è visualizzato a destra con la porzione dell'immagine ingrandita, come l'esempio qui sotto.

In alternativa, è possibile creare un elemento in cui visualizzare la parte "zoomata". E' sufficente dare all'elemento l'id "<id_immagine>_zoom" ed il gioco è fatto. In questo modo si ha il pieno controllo di dove voler far apparire l'immagine ingrandita. Le dimensioni del riquadro sulla immagine sorgente sono date dalla dimensione dello zoom della porzione dell'elemento.

    <div id="myimage2_zoom" style="position:relative;width:150px;height:300px;float:right;border:1px solid black;right:50px;"></div>
    <img src="kendwa_small.jpg" data-zoomsrc="kendwa_big.jpg" id="myimage2" style="padding:0px;border:0px;" />

In ultimo se si desidera aggiungere l'effetto zoom dinamico con JavaScript, utilizzare la funzione MojoZoom.makeZoomable.

    // La funzione "makeZoomable" consente di aggiungere l'effetto con JavaScript
    
    MojoZoom.makeZoomable = function(oImage, strSource, oZoomElement, iZoomWidth, iZoomHeight) {
    // oImage 	= l'immagine alla quale aggiungere l'effetto
    // strSource = sorgente dell'immagine grande ad alta risoluzione
    // oZoomElement = elemento opzionale per tenere la porzione ingrandita. Se non è specificato, viene creato un box di dimensioni pari a 256x256 pixel.
    // iZoomWidth	= larghezza opzionale di oZoomElement
    // iZoomHeight	= altezza opzionale di oZoomElement
    }

    // Example (using the image and zoom element from above): 
    
    MojoZoom.makeZoomable(
    document.getElementById("myimage2"), 
    "kendwa_big.jpg",
    document.getElementById("myimage2_zoom"),
    150, 300
    );

Problemi noti:
Padding e bordi dell'immagine target possono dare risultati inattesi. Aggiungendo un bordo di 1px, il problema è appena percettibile.

Torna all'articolo