Recentemente mi sono trovato per l’ennesima volta a giocare con la proprietà overflow di CSS per far si che le mie immagini fossero tutte di una dimensione standard da me definita. Così ho finalmente preso la decisione di scrivermi un piccolo plugin con jQuery che facesse tutto questo in automatico e con poche righe di codice.
Vediamo innanzitutto cosa vogliamo e ottenere e come ottenerlo:
Abbiamo un’immagine di 370×280 pixel e voglio che quest’immagine venga “ritagliata” (in inglese crop) automaticamente in modo che la mia immagine appaia 220×220.
Ovviamente per questa operazione dobbiamo oscurare parte di tale immagine onde evitare di alterare le proporzioni e “stretchare” l’immagine.
Utilizzo del plugin
Prima di tutto necessario scaricare il pacchetto composto da files e demo:
Una volta estratto il pacchetto, copiare il file jquery.htmlcrop.js (o la versione “minimizzata” jquery.htmlcrop.min.js) nella directory del proprio sito.
Passiamo alla nostra pagina HTML, includiamo in essa la libreria jQuery facendo attenzione di collegarla nel tag <head> (che sia collegato tramite URL remoto o locale non fa differenza)
Facciamo lo stesso per il file jquery.htmlcrop.js
A questo punto inseriamo un immagine nel nostro HTML e assegnamogli una classe (nel nostro caso sarà “ritaglia”).
Una volta fatto ci basta attivare il plugin alla classe “ritaglia”
$('.ritaglia').htmlcrop();Di default le dimensioni del ritaglio sono impostate a 100×100 pixel, per modificale utilizzare i parametri personalizzabili.
Parametri personalizzabili
width : Permette di modificare la larghezza del ritaglio (default : 100px)
height : Permette di modificare l’altezza del ritaglio (default : 100px)
Ho aggiunto inoltre una parametro fade che imposta un’immagine di caricamento (nel pacchetto del download ajax-loader.gif) e una volta caricata l’immagine effettua il fadeIn dell’immagine.
fade : Permette l’apparizione in fade dell’immagine una volta caricata completamente (default : ‘false’)