MooRetina 1.0

The newest iPhone and iPod Touch models have a new display called Retina display which has a much higher pixel density (324 pixels per inch). This small plugin loads high resolution versions of your images (if they exist) so they look better on devices with Retina display.

This is a port of Troy Mcilvena's jQuery Retina Plugin



Details

Author
Christopher Beloch
Current version
1.0
GitHub
CBeloch/MooRetina
Downloads
3395
Category
Realtime
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.3:
    • Element
    • Element.Style
    • Request

How to use

The easiest way is to just initialize the class:

window.addEvent('domready', function() {
    new MooRetina();
});

By using this default method, MooRetina tries to set the src parameter of each img-tag to a url with -2x as suffix. This means that images/myPicture.jpg will be relinked to images/myPicture-2x.jpg

If you don't want to name your retina files with a -2x suffix but with a _retina you can do this by initializing MooRetina like this:

new MooRetina(null, {suffix: '_retina'});

The other way to use MooRetina is by using it on selected Elements and not all images:

new MooRetina($$('.hasRetina'));

Does It Also Work With Mootools 1 2 X

Yes!


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus