A jquery retina display via data plugin
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
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