Sunday, May 19, 2024
HomejQueryMinimalist Picture Zoom & Gallery Lightbox Plugin - ViewImage.js

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 />

<!-- 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>
window.ViewImage && ViewImage.init('#instance img, #instance a');

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

window.ViewImage &&['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="//"></script>
<script src="view-image.js"></script>

2. Add pictures, picture hyperlinks and even textual content hyperlinks to the webpage as these:

<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">

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

  'goal': 'img, a'

4. Set the plugin to exclude pictures as this:

  'exclude': '.exclude',

5. Set the transition delay in milliseconds:

  'delay': 300



  • v2.0.0: Vanilla JavaScript model


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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments