Corsi on-line

Responsive images con jQuery e PHP

Responsive Img è uno strumento basato sul framework JavaScript jQuery e sul linguaggio per lo sviluppo server side PHP; si tratta di una soluzione pensata appositamente per le esigenze legate al Responsive Web design, in pratica la libreria adatta le dimensioni di un’immagine al layout corrente permettendo all’utente di visualizzarla sui display di diversi dispositivi, il tutto senza la necessità che quest’ultima venga scaricata in versione originale.

Il funzionamento di Responsive Img è dovuto ad un processo di ridimensionamento basato sulle funzionalità per la gestione delle immagini di PHP, jQuery si occuperà invece di rilevare il device utilizzato per la navigazione, ad esempio uno smartphone o un tablet, in modo da fornire l’informazione relativa all’area disponibile per la visualizzazione; da parte sua lo sviluppatore verrà liberato dalla necessità di creare manualmente copie di diverse dimensioni di una stessa immagine.

Questo plugin consente ad una pagina di alterare il parametro associato all’attributo “src” a livello di markup e, nello stesso tempo, di modificare l’ampiezza dell’elemento HTML destinato a contenere l’immagine generata e adattata da PHP. Un’altra caratteristica importante riguarda il fatto che il componente grafico ridimensionato, invece che “al volo”, potrà anche essere creato una volta sola, al momento della prima chiamata dell’estensione, e poi salvato lato server; in questo modo l’immagine non dovrà essere processata nuovamente ad ogni richiesta.

Responsive  Img consente di definire le dimensioni consentite per le varie modalità di resize, ciò sarà possibile attraverso dei valori espressi in pixel da passare agli elementi dell’array “breakpoints”: “_small”, “_medium” e “_large”.

 

Post correlati
I più letti del mese
Tematiche