Ads

Saturday, 7 March 2015

jQuery.imgx – jQuery Plugin for Serving Hi-Res Images on Desktop/Mobile

jquery-imgx-jquery-plugin-for-serving-hi-res-images


jQuery.imgx

Lightweight jQuery extension for serving high-resolution images on desktop and mobile devices. Compatible with @2x, @3x, and @4x image varients, using Apple’s recommendednaming conventionfor high-resolution graphics.

Installation

Include the latest version of jQuery and jQuery.imgx.js in the <head> of your HTML document:
<script src="jQuery.min.js"></script>  
<script src="jQuery.imgx.js"></script>

How to Use

Reference the imgx() method and include @2x, @3x, or @4x image varients in the same directory as the original source. The script will automatically load the appropriate image(s) based on the display’s detected pixel density. See the live demo: code.bynathan.com/imgx
jQuery
$(function() {  

    // All Images
    $('img').imgx();

    // Class Only
    $('.retina').imgx(); 

});
CSS
img {
    display: block;
    height: auto;
    max-width: 100%;
}





No comments:

Post a Comment