Zoom su immagini
Con questo articolo inizio una serie in cui documento “live” l’implementazione di una qualche idea che mi viene; credo che la maggior parte saranno tutte su delle modifiche al tema che questo blog utilizza, vedremo col tempo.
L’idea
Alla pubblicazione dell’articolo non sarà più così, ma prima che ciò avvenga le immagini di questo sito sono statiche; considerando che la maggior parte delle immagini saranno di codice, volevo renderle un po’ più chiare.
Per lavoro sono incappato su Lightense images, una libreria JS molto semplice e minimale per zoommare le immagini. Mi è sembrata molto adatta anche per questo blog.
Implementazione
Come detto in un altro articolo, qui uso laravel-mix come wrapper per webpack.
- Installiamo la libreria tramite
npm: npm i lightense-images - includiamo la libreria nei file javascript
- Nel file Javascript generico mettiamo un listener e inizializziamo la libreria
Con questa impostazione abbiamo un errore nella console, 'Lightense is not defined'. Giustamente, importando la libreria in un file, e usandola in un altro file, dobbiamo definire il riferimento.
Ragionando però sull’utilizzo di questa libreria, sappiamo che verrà utilizzata su quasi tutte le pagine del sito, quindi possiamo importarla direttamente nello stesso file che la utilizza. Il nostro file app.js ora diventa:
In questo modo otteniamo l’effetto che desideriamo, e le immagini si ingrandiscono al click.
Tocco finale
Per come abbiamo impostato il funzionamento, in questo momento qualsiasi immagine presente nel sito viene triggerata dal nostro effetto. Questo porta a degli effetti inaspettati, ad esempio, se ci fosse un’immagine come logo, cliccandoci partirebbe sia l’effetto zoom che il caricamento della home (dato che l’immagine è dentro un link).
Per risolvere, usiamo dei selettori più specifici, e mentre ci siamo diamo un po’ di stile in più; seguendo la documentazione, abbiamo la nostra configurazione finale:
