Simplest Image Lightbox Plugin For jQuery - Zoomable.js

Zoomable.js is an extremely simple jQuery plugin for enlarging your images and displaying them in a responsive, fullscreen modal window.

More Features:

• Custom blur effect.
• Auto resizes images depending on the screen size.
• Allows to stretch the image to fill the full screen.
• Callback functions.
• Clicks outside the image to close the lightbox.
• Allows to pan zoomed images within the browser

How to use it:

1. Load both jQuery library and the jQuery Zoomable plugin in the document when needed.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="zoomable.js"></script>

2. Insert an image into the webpage. Optionally, you can specify the large version image displayed in the lightbox using the fullsize attribute on the img tag as follows:

<img src="small" fullsize="large.jpg" class="demo">

3. Just call the function on the img tag and we're done.

$('img.demo').zoomable();

4. Customize the lightbox and zoomed images:

$('img.demo').zoomable({

  // CSS Properties
  padding: '15px',
  bgcolor: 'hsl(0, 4%, 3%)',
  opacity: '0.75',
  blur: '0px',
  speed: 250,
  border: '1px solid hsl(0, 4%, 17%)',
  radius: '2px',
  shadow: '0 0 14px hsla(0, 4%, 3%, 0.33)',
  fill: false,
  context: true,

  // Callback Events
  onshow: function() { },
  onhide: function() { },
  
});

Change log:

2016-05-21

• added the ability to close the zoomable-container window on the escape keypress.

2016-02-28

• added context menu for fullscreen mode

2016-02-25

• fix incomplete pan vertical bug

---

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