jQuery Plugin For Device Appropriate Image Deliverer

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.