jQuery Picture è un piccolo plugin (2kb) per aggiungere il supporto di ridimensionamento automatico alle vostre immagini in base al layout di visualizzazione della pagina web (responsive layouts).
Utilizzo
Ci sono due possibilità di utilizzo del plugin, mediante l’utilizzo del tag <figure> oppure mediante l’utilizzo del tag <picture>. Tieni a mente che il tag picture è stato soltanto recentemente introdotto e non risulta ancora validato come codice HTML.
Inizializzazione del plugin
Per l’inizializzazione del plugin basta aggiungere .picture()all’elemento al quale si desidera applicare la funzionalità del plugin.
|
1 2 3 |
$(function(){ $('figure.responsive').picture(); }); |
Utilizzo
Per utilizzare il plugin con il tag <figure> è necessario aggiungere l’attributo “data” ad ogni dimensione dell’immagine che si desidera utilizzare. Quì un esempio di codice da utilizzare:
|
1 2 3 |
<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea"></figure> <noscript><img src="assets/images/large.png" alt="A Half Brained Idea"></noscript> <figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea"></figure> |
Download INFO | Sito Web | Autore
| Articolo pubblicato 5 anni fa nella categoria 
