Quantcast
Viewing all articles
Browse latest Browse all 14700

Imagens responsivas

Boas,

Deixo aqui um plugin jquery bem simples para tornar o carregamento de imagens responsivo. Comentem! Image may be NSFW.
Clik here to view.
:cheesygrin:


Notas:
1. incluir o plugin na tag <body> logo a seguir a carregar o jquery, não é preciso esperar pelo evento document onload.
2. A imagem carregada por defeito deve ser a de menor tamanho em kb (phone), depois será carregada a imagem desktop ou tablet conforme a dimensão da janela
3. Compatível com outros plugins de galerias de imagens
4. Simples gestão de imagens: no caso de gerar imagens no lado do servidor, basta criar duas pastas (tablet e desktop) e gerar imagens com o mesmo nome nessas pastas. Assim, basta adicionar ao nome da imagem o prefixo com o nome da pasta (ex. tablet/imagem.jpg)

Código (HTML):
<img src="imagem.jpg" data-tablet="tablet/imagem.jpg" data-desktop="desktop/imagem.jpg" />

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="ajeita.js">

Ficheiro ajeita.js
Código (Javascript):
(function ( $ ) {
        var el, w = $(document).width();
        return $('img').each(function (i, item) {
                el = $(item);
                el.attr('src', el.data('desktop') && w >= 1200 ? el.data('desktop') : el.data('tablet') && w >= 768 ? el.data('tablet') : el.attr('src'));
        });
}( jQuery ));

Viewing all articles
Browse latest Browse all 14700