Note that the demo works best if you "Disable cache" in DevTools.
Include the script and CSS file:
<link rel="stylesheet" href="pil.css"> <script src="pil.js"></script>
Your images will need a wrapper with the
<figure class="pil"> <img src="img/my-image.jpg" data-full-width="5616" data-full-height="3744" alt=""> </figure>
You will also need to add
data-full-height attributes to your images so the lib can calculate the aspect ratio.
Next you will need to create the thumbnail image that will be loaded before the main image is loaded. By default it will be loaded
-thumb postfix. So for example if your image URL is
img/my-image.jpg the thumb URL will be
this can be overridden by providing a URL in the
Thumbnail images should be no larger than 100px. Jpegs should be no more than 20% quality.
Finally you can initiate Pil by calling:
So you want to help out? That's awesome. Here is how you can do it:
If you are submitting a pull request please adhere to the existing coding standards used throughout the code and only submit 1 feature/fix per pull request. Pull requests containing multiple changes will be rejected.