Brainleaf
Web Resources

È impossibile ormai pensare ad un sito non responsive e di conseguenza anche ad un sito che fornisca immagini a giusta risoluzione per display ad alta densità, come il famoso Retina, montato di recente anche su device diverse dai tablet e dagli smartphone.

Per ovviare a questo problema sono disponibili alcuni plugin jquery, tra cui il nostro jQueryHDimg che fornisce immagini di misura diversa a seconda della densità dei display con i quali viene visualizzata la pagina. Il suo uso è veramente semplicissimo e intuitivo. Vediamo come fare.

 Prima di tutto scaricare il plugin dal pulsante qui sotto:

 

Decomprimete il pacchetto, prendete il plugin jquery.HDimg.min.js contenuto della cartella "dist" e copiatelo all'interno del vostro progetto.

Ora includete, se non l'avete già fatto, la libreria jQuery all'interno della vostra pagina html e di seguito incudete anche il plugin.

<script src="/jquery.min.js"></script>
<script src="/jquery.HDimg.min.js"></script>

Passiamo ora a vedere e capire il funzionamento del plugin.
HDimg, come operazione predefinita, sostituisce le immagini "normali" con quelle di misura doppia in caso di display di densità superiore a 1.25

L'immagine con cui sostituirà quella originale dovrà essere situata nella stessa directory e chiamarsi allo stesso modo, con l'unica differenza di un suffisso "@2x" posizionato prima del punto antecedente l'estensione del file. Ecco un esempio.

Se l'immagine originale si chiama image.jpg l'immagine che il plugin andrà a cercare dovrà chiamarsi Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.
Questo ovviamente accade solo se si usano le opzioni di default, perché, se volete, questo suffisso è modificabile attraverso una semplice opzione del plugin.

Per avviare il plugin basterà quindi realizzare le immagini con le giuste dimensioni e nomenclatura ed inserire queste poche righe di javascript nel vostro file html

$(document).ready(function() {
	$("img").HDimg();
});

Queste righe faranno sì che ogni immagine del sito sarà manipolata dal plugin, sostituendola con la sua relativa immagine a doppia dimensione.

Il plugin è utilizzabile sia su ogni immagine che su una singola immagine o su tutte quelle contenute all'interno di un elemento. Vediamo un esempio.
Se volessi utilizzare il plugin su tutte le immagini contenute all'interno di un div con id="retina", allora dovrei utilizzare il plugin in questo modo:

$(document).ready(function() {
	$("#retina img").HDimg();
});

Semplice vero?

Ora che abbiamo visto come utilizzare il plugin con qualche riga di javascript è necessario ricordare che ogni immagine, una volta sostituita deve anche essere ridimensionata nel modo giusto, solitamente dimezzando altezza e larghezza. Possiamo ottenere questo assegnando un'id univoca ad ogni immagine (o una classe, in caso di immagini di uguale dimensione) ed agendo su di essa attraverso del CSS, assegnando alle immagini misure fisse corrispondendti a quelle dell'immagine originale. 
Per fare un esempio potremmo supporre che l'immagine pippo.jpg sia di dimensione 100x100 px. Inseriremo dunque nell'html una riga tipo questa:

<img id="pippo" src="/img/pippo.jpg">


Avendo assegnato all'immagine l'id "pippo" nel file CSS dovremo inserire le seguenti righe:

#pippo {
   width: 100px;
   height: 100px;
}

Questo è il funzionamento basilare del plugin, ma c'è di più.
Vediamo ora alcune opzioni utili che potrebbero offrirci qualcosa di comodo ed utile.

OPZIONI DEL PLUGIN

imgReplacement
Questa opzione, che nelle opzioni predefinite è settata come "true", permette di scegliere il modo di funzionamento del plugin.
Valore: true
Se l'opzione imgReplacement ha come valore "true", il plugin cercherà l'url dell'immagine all'interno dell'attributo src del tag img e sostituirà l'immagine solo in caso di display ad alta densità.
Valore: false
Se l'opzione imgReplacement ha invece come valore "false", il plugin si aspetterà di trovare l'attributo src vuoto, e di inserirvi automaticamente l'immagine adattata al display che visualizza la pagina. Questo permette di risparmiare banda in caso di device mobili, ma causa un errore di validazione W3C per via dell'attributo src vuoto. Per utilizzare questa opzione, si dovrà quindi inserire l'immagine specificandone l'url all'interno di un data attribute: nello specifico data-src="".

<img src="" data-src="img/pippo.jpg">

autoResize
Questa opzione, di default settata come "false", permette di operare un resize automatico delle immagini, senza quindi dover inserire nessuna regola CSS. Il plugin infatti misura l'immagine originale e ne assegna le misure all'immagine doppia in caso di dislay ad alta densità.
Per attivare questa opzione basterà inserire l'opzione nel javascript:

$("img").HDimg({
  autoResize: true
}); 

Attenzione: questa opzione funziona solo se l'opzione imgReplacement ha il valore true, come nelle opzioni predefinite.

imgSuffix
Questa opzione permette di specificare un prefisso alternativo a quello predefinito "@2x".

$("img").HDimg({ 
  imgSuffix: "_yoursuffix" 
}); 

densityLevel
Questa opzione determina il livello di densità dal quale il plugin inizierà a sostituire l'immagine. Il valore predefinito di questa opzione è 1.25, ma può essere settato anche ai valori: 1.3 - 1.5 - 2

$("img").HDimg({ 
  densityLevel: 2 
}); 

addClass
Questa opzione permette di assegnare una classe all'immagine, quando questa sarà sostituita dalla sua corrispettiva a doppia grandezza. Si possono specificare diversi tipi di valori: true/false, oppure il nome scelto per la classe. Il valore predefinito è "false".
Esempio:

$("img").HDimg({ 
  addClass: true 
});

Con il valore true il plugin assegnerà all'immagine la classe predefinita: hd-image.

Se invece si volesse assegnare una classe diversa, per esempio "myClass", basterà specificarlo nell'opzione:

$("img").HDimg({ 
  addClass: "myClass" 
}); 

Per vedere il plugin in azione potete recarvi nella sua pagina ufficiale:
http://factory.brainleaf.eu/jqueryHDimg

Per bugs report e download potete recarvi invece nella pagina Github
https://github.com/Gix075/jqueryHDimg

Download Latest Version

Joomla SEF URLs by Artio