Aggiungi questa utile funzionalità alle tue immagini e i tuoi visitatori apprezzeranno l'usabilità e l'attenzione ai dettagli che hai fornito.
Se hai mai navigato in un sito web di shopping, probabilmente ti sei imbattuto nella funzione di ingrandimento dell'immagine. Ti consente di ingrandire una parte specifica di un'immagine per una visione più ravvicinata. Incorporare questa funzionalità piccola ma di grande impatto può migliorare notevolmente l'esperienza dell'utente sul tuo sito web.
Costruire una lente d'ingrandimento dell'immagine in modo uniforme e coerente può essere una sfida. Ma seguire questi passaggi ti aiuterà a creare il tuo ingranditore di immagini da zero, senza bisogno di fare affidamento su plug-in di terze parti.
Quando utilizzare un ingranditore di immagini nel tuo progetto web
Una lente d'ingrandimento dell'immagine può tornare utile quando stai costruendo un progetto con molte immagini. Come accennato in precedenza, gli ingranditori di immagini sono molto popolari tra i siti web di shopping perché a volte l'utente potrebbe aver bisogno di dare un'occhiata più da vicino al prodotto prima di decidere se vale la pena acquistarlo.
I clienti si affidano esclusivamente alle informazioni e alle immagini fornite dal sito Web per valutare la qualità, le caratteristiche e l'aspetto di un prodotto. Tuttavia, le immagini statiche da sole potrebbero non fornire sempre sufficiente chiarezza o consentire una valutazione completa dell'articolo.
Nei negozi tradizionali, i clienti possono maneggiare fisicamente i prodotti, esaminarli da vicino e valutarne l'idoneità prima dell'acquisto. Gli ingranditori di immagini tentano di ricreare questa esperienza offrendo agli utenti un livello simile di controllo ed esame virtuale.
Gli ingranditori di immagini possono anche tornare utili se lo sei creazione di un'applicazione per la galleria fotografica poiché lo zoom in una parte specifica dell'immagine è una caratteristica importante.
Costruire la lente d'ingrandimento dell'immagine
Il codice utilizzato in questo progetto è disponibile in a Deposito GitHub ed è gratuito per l'uso con la licenza MIT.
Crea una cartella e, in quella cartella, aggiungi un file indice.html file, style.css file e principale.js file. Aggiungi questo codice boilerplate a index.html:
html>
<htmllang="it"><Testa>
<metaset di caratteri="UTF-8" />
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0" />
<titolo>Lente d'ingrandimento dell'immaginetitolo>
<collegamentorel="foglio di stile"href="stile.css" />
Testa><corpo>
corpo>
html>
Dentro il corpo tag, crea un elemento div con il nome della classe "header". Quindi nel div "header", aggiungi an h1 elemento di intestazione per visualizzare il titolo della lente d'ingrandimento dell'immagine.
È possibile personalizzare il testo in base alle proprie esigenze. Successivamente, includi due elementi span che forniscono istruzioni per l'utilizzo della lente di ingrandimento e mostrano all'utente il livello di zoom corrente.
Dopo la sezione dell'intestazione, crea un file div elemento con il nome della classe "contenitore". All'interno di questo div, aggiungi un altro elemento div con il nome della classe "magnifier" e applica la classe "hidden" per nasconderlo alla vista.
Questo elemento rappresenterà l'immagine della lente d'ingrandimento. Quindi, aggiungi un tag script con l'attributo "src" impostato su "/main.js".
<corpo>
<divclasse="intestazione">
<h1>Lente d'ingrandimento dell'immagineh1><span>Premere <forte>Freccia suforte> O <forte>Freccia giùforte> A
aumentare o diminuire il livello di zoom.span><span>Livello di ingrandimento: <forteclasse="livello di zoom">1forte>span>
div><divclasse="contenitore">
<divclasse="lente d'ingrandimento nascosta">div>
div>
<copionesrc="/principale.js">copione>
corpo>
Sostituisci il codice nel file style.css file con quanto segue. Puoi anche usare un Preprocessore CSS come Less se vuoi:
:radice {
--magnifier-larghezza: 150;
--magnifier-altezza: 150;
}corpo {
Schermo: flettere;
direzione flessibile: colonna;
align-elementi: centro;
}.contenitore {
larghezza: 400px;
altezza: 300px;
dimensione dello sfondo: copertina;
immagine di sfondo: URL("https://CDN.pixabay.com/foto/2019/03/27/15/24/animale-4085255_1280.jpg");
sfondo-ripetizione: senza ripetizione;
posizione: parente;
cursore: nessuno;
}.lente di ingrandimento {
bordo-raggio: 400px;
scatola-ombra: 0px 11px 8px 0px#0000008a;
posizione: assoluto;
larghezza: cal(var(--magnifier-larghezza) * 1px);
altezza: cal(var(--magnifier-altezza) * 1px);
cursore: nessuno;
immagine di sfondo: URL("https://CDN.pixabay.com/foto/2019/03/27/15/24/animale-4085255_1280.jpg");
sfondo-ripetizione: senza ripetizione;
}span {
Schermo: bloccare;
}.intestazione {
Schermo: flettere;
direzione flessibile: colonna;
align-elementi: centro;
}.nascosto {
visibilità: nascosto;
}
div > span:ennesimo figlio (3) {
dimensione del font: 20px;
}
Nel principale.js file, recuperare gli elementi HTML con i nomi delle classi, "lente di ingrandimento" e "contenitore" utilizzando il file document.querySelector metodo e assegnarli alle variabili lente d'ingrandimento E contenitore, rispettivamente.
Poi, usando il getComputedStyle funzione recuperare il larghezza E altezza dell'elemento magnifier e quindi estrarre i valori numerici dalle stringhe restituite utilizzando il sottostringa E indice di metodi.
Assegna la larghezza estratta alla variabile lente d'ingrandimentoWidth, e l'altezza estratta a lente d'ingrandimentoAltezza.
permettere lente d'ingrandimento = documento.querySelector(".lente di ingrandimento");
permettere contenitore = documento.querySelector(".contenitore");permettere magnifierWidth = getComputedStyle (lente di ingrandimento).width.substring(
0,
getComputedStyle (lente di ingrandimento).width.indexOf("P")
);
permettere magnifierHeight = getComputedStyle (lente di ingrandimento).width.substring(
0,
getComputedStyle (lente di ingrandimento).height.indexOf("P")
);
Successivamente, imposta le variabili per il livello di zoom, il livello di zoom massimo e le posizioni del cursore e dell'immagine della lente di ingrandimento.
permettere zoomLevelLabel = documento.querySelector(".livello di zoom");
permettere ingrandimento = 2;
permettere maxZoomLivello = 5;
permettere puntatoreX;
permettere puntatoreY;
permettere ingrandimentoX;
permettere ingrandisciY;
Nel blocco di codice sopra, puntatoreX E puntatoreY entrambi rappresentano la posizione del cursore lungo gli assi X e Y.
Ora, definisci due funzioni di supporto: getZoomLevel che restituisce il livello di zoom corrente, e getPointerPosition che restituisce un oggetto con il X E si coordinate del cursore.
funzionegetZoomLevel() {
ritorno Ingrandisci;
}
funzionegetPointerPosition() {
ritorno { X: puntatoreX, si: pointerY }
}
Quindi, crea aggiungi un file updateMagImage funzione che crea un nuovo oggetto MouseEvent con la posizione corrente del cursore e lo invia all'elemento contenitore. Questa funzione è responsabile dell'aggiornamento dell'immagine della lente d'ingrandimento.
funzioneupdateMagImage() {
permettere evt = nuovo MouseEvent("mossa del mouse", {
clientX: getPointerPosition().x,
clientY: getPointerPosition().y,
bolle: VERO,
annullabile: VERO,
visualizzazione: finestra,
});
container.dispatchEvent (evt);
}
Ora dovresti aggiungere un ascoltatore di eventi all'oggetto finestra per l'evento "keyup" che regola il livello di zoom quando l'utente preme i tasti "ArrowUp" o "ArrowDown".
La funzione di callback sull'evento "keyup" è anche responsabile dell'aggiornamento dell'etichetta del livello di zoom e dell'attivazione del file updateMagImage funzione.
finestra.addEventListener("tasto", (e) => {
Se (e. chiave "Freccia su" && maxZoomLevel - Numero(zoomLevelLabel.textContent) !== 0) {
zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
ingrandimento = ingrandimento + 0.3;
updateMagImage();
}
Se (e. chiave "Freccia giù" && !(zoomLevelLabel.textContent <= 1)) {
zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
ingrandimento = ingrandimento - 0.3;
updateMagImage();
}
});
Quindi aggiungi un listener di eventi all'elemento contenitore per l'evento "mousemove".
Nella funzione di callback, aggiungi la funzionalità che rimuove la classe "nascosta" dall'elemento magnifier a renderlo visibile e calcola la posizione del mouse rispetto al contenitore, prendendo lo scorrimento della pagina in account.
Questa funzione dovrebbe anche impostare lo stile di trasformazione della lente d'ingrandimento sulla posizione calcolata e determinare la dimensione dello sfondo e la posizione dell'immagine della lente d'ingrandimento in base al livello di zoom e al mouse posizione.
container.addEventListener("mossa del mouse", (e) => {
magnifier.classList.remove("nascosto");
permettere rect = contenitore.getBoundingClientRect();
permettere x = e.pageX - rect.left;
permettere y = e.pageY - rect.top;x = x- finestra.scrollX;
y = y - finestra.scrollY;magnifier.style.transform = `traduci(${x}px, ${y}px)`;
cost imgWidth = 400;
cost imgAltezza = 300;magnifier.style.backgroundSize =
imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";magnifyX = x * getZoomLevel() + 15;
magnifyY = y * getZoomLevel() + 15;
magnifier.style.backgroundPosition = -magnifyX + "px" + -ingrandisci Y + "px";
});
Quindi aggiungi un altro listener di eventi all'elemento contenitore, ma questa volta il listener di eventi dovrebbe ascoltare il file evento "mouseout" e aggiungi la classe "hidden" all'elemento magnifier ogni volta che il mouse è fuori dal contenitore la zona.
container.addEventListener("mouse fuori", () => {
magnifier.classList.add("nascosto");
});
Infine, aggiungi un listener di eventi all'oggetto window per l'evento "mousemove" che aggiorna le posizioni x e y del cursore.
finestra.addEventListener("mossa del mouse", (e) => {
puntatoreX = e.clientX;
puntatoreY = e.clientY;
});Questo è tutto! Sei riuscito a creare un ingranditore di immagini con JavaScript vanilla.
In che modo gli ingranditori di immagini migliorano l'esperienza dell'utente
Consentendo agli utenti di ingrandire aree specifiche di un'immagine, una lente di ingrandimento consente loro di esaminare i dettagli del prodotto con maggiore chiarezza.
Questo livello avanzato di esplorazione visiva infonde fiducia negli utenti in quanto possono prendere decisioni informate. Ciò può contribuire ad aumentare i tassi di conversione e migliorare la fidelizzazione dei clienti.