Minimalist Image Zoom & Gallery Lightbox Plugin - ViewImage.js

ViewImage.js is a super tiny (~ 2kb gzipped) and fully responsive JavaScript image zoom & gallery lightbox plugin that provide a zooming functionality on any images & image links within the document.

See It In Action:

How to use it (v2.x Vanilla JS):

1. Download and load the latest ViewImage.js library in the document.

<script src="view-image.js"></script>

2. Initialize the ViewImage.js on your images or image links. That's it.

• view-image: Image container
• no-view: Exclude this image

<div id="example" view-image>
  <img src="1.jpg" alt="jQueryScript.Net" />
  <img src="2.jpg" alt="jQueryScript.Net" />
  <img src="3.jpg" alt="jQueryScript.Net" no-view />
  ...
</div>

<!-- OR -->
<div id="example" view-image>
  <a href="1.jpg">Image 1</a>
  <a href="2.jpg">Image 2</a>
  <a href="3.jpg" no-view />Image 3 (IGNORE)</a>
  ...
</div>

window.ViewImage && ViewImage.init('#example img, #example a');

3. Or create a gallery lightbox programmatically by using the ViewImage.display method.

window.ViewImage && ViewImage.display(['1.jpg','2.jpg','3.jpg'], '1.jpg')

How to use it (v1.x jQuery):

1. Include both jQuery library and the jQuery ViewImage.js script on the webpage.

<script src="//code.jquery.com/jquery.slim.min.js"></script>
<script src="view-image.js"></script>

2. Add images, image links or even text links to the webpage as these:

<h2>Img</h2>
<img src="1.jpg">

<h2>Text Link</h2>
<a href="1.jpg">Click Me</a>

<h2>Image Link</h2>
<a href="1.jpg">
  <img src="thumb-1.jpg">
</a>

3. Call the function on the images and links. Done.

jQuery.viewImage({
  'target': 'img, a'
});

4. Set the plugin to exclude images as this:

jQuery.viewImage({
  'exclude': '.exclude',
});

5. Set the transition delay in milliseconds:

jQuery.viewImage({
  'delay': 300
});

Changelog:

2022-05-19

• v2.0.0: Vanilla JavaScript version

2020-08-05

• Update view-image.js

---

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