Skip to content
A jquery retina display via data plugin
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
jquery.retinaData.js
jquery.retinaData.min.js
jquery.retinaDataCheck.js
jquery.retinaDataCheck.min.js

README.md

jquery-retina-data

A jquery retina display via data plugin

View examples at http://highergroundstudio.github.io/jquery-retina-data/

Facts

  • 600 bytes uncompressed
  • 238 bytes compressed (That is insane!!!)
  • Built to be small, fast, and simple

JS Usage

<script src="jquery.retinaData.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('img').retinaData();
    });
</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').retinaData();

To check if the image exists before showing use the jquery.retinaDataCheck.js file like so:

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

Image Usage

The image must have a src and data-retina set like so:

<img class="retina" src="100x100.jpg" data-retina="200x200.jpg" width="100" height="100" alt="Sample">

Then when retinaData runs you will have (if the display is retina):

<img class="retina" src="200x200.jpg" data-retina="200x200.jpg" width="100" height="100" alt="Sample">

Variable definitions

  • i = index
  • e = element
  • r = retina url
  • h = holder
You can’t perform that action at this time.