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
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'));
Yes!
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