light image viewer - Free Download Ultra-light Image Lightbox Plugin - imageViewer.js

Free Download Ultra-light Image Lightbox Plugin – imageViewer.js

By Posted on

This time I will share jQuery Plugin and tutorial about Ultra-light Image Lightbox Plugin – imageViewer.js, hope it will help you in programming stack.

light image viewer - Free Download Ultra-light Image Lightbox Plugin - imageViewer.js
File Size: 3.92 KB
Views Total: 1817
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

An ultra-light and dead simple image lightbox plugin to display your images in an overlay that covers the entire screen.

How to use it:

1. Download and put the JavaScript file jquery.imageviewer.min.js after jQuery library.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to//jquery.imageviewer.min.js"></script>

2. Simply call the function imageviewer(); and the plugin will do the rest.

view source
1 imageviewer();

3. Override the default CSS styles of the lightbox.

view source
01 #imageviewer-wrapper {
02   position:        'fixed',
03   top:             '0',
04   left:            '0',
05   zIndex:          '99999',
06   display:         'flex',
07   justifyContent:  'center',
08   alignItems:      'center',
09   width:           '100%',
10   height:          '100vh',
11 }
view source
01 // or directly override the styles in the jquery.imageviewer.js
02 $('<div>', {
03   id:    'imageviewer-wrapper',
04   css: {
05     position:        'fixed',
06     top:             '0',
07     left:            '0',
08     zIndex:          '99999',
09     display:         'flex',
10     justifyContent:  'center',
11     alignItems:      'center',
12     width:           '100%',
13     height:          '100vh',
14     backgroundColor: 'rgba(0,0,0,0.5)',
15   },
16   append: $('<img>', {
17     id:  'imageviewer-image',
18     src: imageLink,
19   }).add($('<div>', {
20     id:  'imageviewer-close',
21     css: {
22       position:           'fixed',
23       top:                '0',
24       right:              '0',
25       zIndex:             '100000',
26       width:              '40px',
27       height:             '40px',
28       padding:            '20px',
29       backgroundColor:    'rgba(0,0,0,0.5)',
30       cursor:             'pointer',
31       translation:        '0.5s ease',
32     },
33     append: $('<div>', {
34       css: {
35         width:              '100%',
36         height:             '100%',
37         float:              'right',
38         backgroundImage:    'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMi4wMDEgNTEyLjAwMSIgc3R5bGU9ImZpbGw6I2ZmZjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIGQ9Ik0yODQuMjg2LDI1Ni4wMDJMNTA2LjE0MywzNC4xNDRjNy44MTEtNy44MTEsNy44MTEtMjAuNDc1LDAtMjguMjg1Yy03LjgxMS03LjgxLTIwLjQ3NS03LjgxMS0yOC4yODUsMEwyNTYsMjI3LjcxN0wzNC4xNDMsNS44NTljLTcuODExLTcuODExLTIwLjQ3NS03LjgxMS0yOC4yODUsMGMtNy44MSw3LjgxMS03LjgxMSwyMC40NzUsMCwyOC4yODVsMjIxLjg1NywyMjEuODU3TDUuODU4LDQ3Ny44NTljLTcuODExLDcuODExLTcuODExLDIwLjQ3NSwwLDI4LjI4NWMzLjkwNSwzLjkwNSw5LjAyNCw1Ljg1NywxNC4xNDMsNS44NTdjNS4xMTksMCwxMC4yMzctMS45NTIsMTQuMTQzLTUuODU3TDI1NiwyODQuMjg3bDIyMS44NTcsMjIxLjg1N2MzLjkwNSwzLjkwNSw5LjAyNCw1Ljg1NywxNC4xNDMsNS44NTdzMTAuMjM3LTEuOTUyLDE0LjE0My01Ljg1N2M3LjgxMS03LjgxMSw3LjgxMS0yMC40NzUsMC0yOC4yODVMMjg0LjI4NiwyNTYuMDAyeiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)',
39         backgroundPosition: 'center center',
40         backgroundSize:     'cover',
41       }
42     }),
43     on: {
44       click: function(event) {
45         $('#imageviewer-wrapper').remove();
46       }
47     }
48   })),
49 }

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

Related posts: