jQuery Plugin For Device Appropriate Image Deliverer
File Size: | 15.7 MB |
---|---|
Views Total: | 393 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jquery plugin to deliver a device appropriate version of an image in a lightbox, using CSS and JavaScript.
Main features:
- Displays a small sized version of an image for all devices, no more than 480px tall if in portrait mode, and no more than 480px wide if in landscape mode.
- Delivers in a lightbox, a large version of the image, adapted to the screen resolution of the device it is viewed on.
- Adapts the largest dimension of the image delivered, to the largest dimension of the device. For example, if we have a breakpoint at 640px in our CSS Media Queries and our device screen resolution is 360px by 640px; if our image is in portrait mode, its height is going to be 640px, and if it is in landscape mode, its width is going to be 640px.
- Serves the same image, whether the device is in portrait or landscape mode on most common mobile devices, to avoid downloading a new image after a change in orientation. Devices and resolutions covered are the ones found in Google Chrome devTools, Device Mode and Mobile Emulation.
- Supports high resolution display with a device pixel ratio equal or superior to 2, by delivering an image with twice as many pixels.
How to use it:
1. Load the jQuery appro-img-deliverer.js plugin into the html document.
<link rel="stylesheet" href="/path/to/appro-img-deliverer.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.appro-img-deliverer.js"></script>
2. Load the jQuery Magnific Popup plugin for the image lightbox.
<link rel="stylesheet" href="/path/to/magnific-popup.css"> <script src="/path/to/jquery.magnific-popup.min.js"></script>
3. Initialize the plugin.
$(document).ready(function() { $('.selector').each(function() { $(this).set_aspectRatio(); }); $('.selector').open_popup(); });
Change log:
2015-11-27
- JS update.
This awesome jQuery plugin is developed by nbeaumont. For more Advanced Usages, please check the demo page or visit the official website.