Troy Mcilvena

— Australian Software Developer


jQuery Retina Display Plugin

August 24, 2010 — jquery, ios, retina, code

A simple way to add Retina Display support to your website.

The jQuery Retina Display plugin will substitute high resolution versions of your images (if they exist) for high resolution displays (such as iPhone 4) only.

This plugins requires no client-side changes , other than the inclusion and initialisation of this plugin. If the 2x image doesn't exist, the standard resolution image is displayed. This allows for selective addition of high resolution images.

Demo

Of course, you will need to view these demos on an iPhone 4.

Usage

<script src="js/jquery.retina.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('img').retina();
    });
</script>

The example above shows an attempt to replace all images with high resolutions versions. If you only want to attempt to replace some images (for better performance) you may specify a specific class: Eg.

$('img.retina').retina();

Download

Visit the GitHub Repository to download