Corsi on-line

Responsive images con jQuery Picture e Hammy

jQuery Picture è una soluzione basata sul framework Javascript jQuery che permette di applicare le regole del responsive design alle immagini, grazie a questa libreria esse si adatteranno automaticamente all’ampiezza dell’area di visualizzazione tenendo conto delle possibili differenze tra i display dei vari dispositivi per la navgazione (Pc, tablet e smartphone); la compatibilità cross browser è garantita su applicazioni aggiornate, ma per quanto riguarda Internet Explorer servirà come minimo la versione 9.

jQuery Picture è un’estensione dalle dimensioni estremamente contenute (appena 2 Kb) e basa il suo funzionamento su alcuni elementi per la grafica di HTML5, lo sviluppatore potrà utilizzarla in associazione ai tag “figure” o con gi elementi “picture” e “source“; naturalmente il rendering delle immagini dipenderà in gran parte dal supporto che i vari browser offriranno per le nuove specifiche (non ancora ufficiali) introdotte con l’ultima versione del markup per pagine Web.

Per gli utilizzatori del Blog engine WordPress, è da segnalare l’esistenza di Hammy (anch’essa Open Source e consigliata  dagli stessi creatori di jQuery Picture), un plugin per il responsive design applicato alle immagini che è in grado di intercettare gli elementi grafici presenti all’interno di contenuti come articoli e pagine e di effettuarne automaticamente il ridimensionamento.

In pratica Hammy, se attivato come plugin in WordPress, non farà altro che rilevare il classico tag “img” e sostituirlo con l’elemento “figure” in modo che jQuery possa avere accesso all’immagine elaborandola e caricandola dopo aver completato il resize più adatto alla risoluzione corrente; nel caso in cui il framework non sia disponibile, l’elemento grafico sarà visualizzabile nelle sue dimensioni reali.

Post correlati
I più letti del mese
Tematiche