jQuery Zoom, zoom su immagini con jQuery

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Tra i tanti plug-in che jQuery mette a disposizione per la gestione delle immagini troviamo jQuery Zoom che, come il suo nome lascia ad intendere, consente di creare un effetto zoom su immagine utilissimo, ad esempio, nelle thumbinail di foto oppure negli e-commerce, per consentire agli utenti di visualizzare più nel dettaglio delle porzioni di immagine.

Il seguente screenshot consente di capire meglio cosa stiamo andando a realizzare:


Abbiamo impostato due volte la foto per consentire di capire la differenza: nella prima visualizziamo a 250X250 pixel un'immagine che, in realtà, è di 500X500 pixel; nella seconda, occupando lo stesso spazio a disposizione sulla pagina, al passaggio del mouse l'utente può trascinare l'immagine in tutte le direzioni "spostandola" e visualizzando i dettagli alla risoluzione originale dell'immagine.

Un dettaglio che non si evince dallo screenshot è il fatto che, al passaggio del mouse, il cursore del mouse assume la forma di una lente di ingrandimento col segno + (classico dello zoom) al centro della lente stessa.

Vediamo il codice completo di esempio:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Zoom, zoom su immagini con jQuery</title>
    <style type="text/css">
    .zoom { display: inline-block; position: relative; cursor: zoom-in; }
    .zoom img { display: block; width: 250px; height: 250px; }
    .zoom img::selection { background-color: transparent; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.zoom.js"></script>
    <script>
        $(document).ready(function(){
            $("#immagine").zoom();
        });
    </script>
</head>
<body>

<div class="zoom" id="immagine"><img src="aquila.jpg" alt=""/></div>

</body>
</html>

Nel corpo della pagina impostiamo la classe "zoom" ed un ID ad un elemento che conterrà l'immagine. Attraverso i CSS, nell'header della pagina (od in un file esterno, se preferite), stilizziamo la classe in questione.

Chiamiamo poi la libreria jQuery ed il file jquery.zoom.js (disponibile per il download anche in versione minefield), quindi impostiamo uno script che, al caricamento della pagina, chiama il metodo zoom(), associandolo all'ID dell'immagine in questione.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (102.242)

:: Breve guida a jQuery (91.569)

:: Le espressioni regolari in Javascript (83.665)

:: Gestione delle stringhe in Javascript (71.316)

:: Stampare una pagina col Dhtml (41.898)

:: Menu orizzontale dinamico in Dhtml (36.148)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (35.972)

:: Gli Array in Javascript (34.971)

:: Temporizzazioni Javascript (30.269)

:: DOM: rendere cross-browser il comando innerHTML (27.634)

IN EVIDENZA
DOWNLOAD