Minimalist Picture Zoom & Gallery Lightbox Plugin – ViewImage.js

ViewImage.js is an excellent tiny (~ 2kb gzipped) and absolutely responsive JavaScript picture zoom & gallery lightbox plugin that present a zooming performance on any pictures & picture hyperlinks inside the doc.

See It In Motion:

use it (v2.x Vanilla JS):

1. Obtain and cargo the most recent ViewImage.js library within the doc.

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

2. Initialize the ViewImage.js in your pictures or picture hyperlinks. That is it.

• view-image: Picture container
• no-view: Exclude this picture

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

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

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

3. Or create a gallery lightbox programmatically by utilizing the ViewImage.show methodology.

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

use it (v1.x jQuery):

1. Embrace each 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 pictures, picture hyperlinks and even textual content hyperlinks to the webpage as these:

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

<h2>Textual content Hyperlink</h2>
<a href="1.jpg">Click on Me</a>

<h2>Picture Hyperlink</h2>
<a href="1.jpg">
  <img src="thumb-1.jpg">
</a>

3. Name the perform on the pictures and hyperlinks. Executed.

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

4. Set the plugin to exclude pictures 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 model

2020-08-05

This superior jQuery plugin is developed by Tokinx. For extra Superior Usages, please test the demo web page or go to the official web site.