article:
Elements Design & UI: Icon Deposit CSS3 UI Kit
article:
Elements Design: Wallpaper Pack

JS Plugin: jQuery Picture

Advertisement

"jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments."


Plugin: jQuery Picture


Usage

initialise
$(function(){
    $('figure.responsive').picture();
});

code html
<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">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

or
initialise
$(function(){
    $('picture').picture();
});

code html
<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">
    <a href="http://abandon.ie">
        <noscript>
            <img src="assets/images/large.png" alt="A Half Brained Idea">
        </noscript>
     </a>
</figure>



source
github
download

Advertisement
Tags: plugin, picture, image, jquery, responsive, adaptive, layout, design, html5, css3, javascript, design

Leave a Comment

No Comment

© Creative3x Ltd.