jQuery Plugin For Device Appropriate Image Deliverer

jQuery Plugin For Device Appropriate Image Deliverer
File Size: 15.7 MB
Views Total: 371
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() {

Change log:


This awesome jQuery plugin is developed by nbeaumont. For more Advanced Usages, please check the demo page or visit the official website.