draggable zoomable lightbox imgbox - Download Draggable & Zoomable Image Lightbox Plugin - jQuery imgbox.js

Download Draggable & Zoomable Image Lightbox Plugin – jQuery imgbox.js

By Posted on

This time I will share jQuery Plugin and tutorial about Draggable & Zoomable Image Lightbox Plugin – jQuery imgbox.js, hope it will help you in programming stack.

draggable zoomable lightbox imgbox - Download Draggable & Zoomable Image Lightbox Plugin - jQuery imgbox.js
File Size: 7.22 KB
Views Total: 856
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

imgbox.js is a simple, lightweight jQuery image lightbox plugin that allows the user to zoom and drag the enlarged version of the image.

How to use it:

1. The plugin requires Material Icons for the close icon.

view source
1 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. Load the minified version of the jQuery imgbox.js plugin after loading jQuery library.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.min.js"
2         integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
3         crossorigin="anonymous">
4 </script>
5 <script src="jquery.imgbox.min.js"></script>

3. Call the function imgbox on the target image and done.

view source
1 <img src="1.jpg" width="300px">
view source
1 $(function(){
2  
3   $("img").imgbox();
4  
5 });

4. The necessary CSS styles for the image lightbox.

view source
01 .material-icons:before {
02   display: inline-block;
03   font-family: "Material Icons";
04   font-style: normal;
05   font-weight: 400;
06   line-height: 1;
07   text-transform: none;
08   letter-spacing: normal;
09   word-wrap: normal;
10   -webkit-font-smoothing: antialiased;
11   -moz-osx-font-smoothing: grayscale;
12   text-rendering: optimizeLegibility;
13   -webkit-font-feature-settings: "liga";
14   font-feature-settings: "liga"
15 }
16  
17 .check-original-image {
18   position: fixed;
19   bottom: 30px;
20   left: 50%;
21   -webkit-transform: translate3d(-50%,0,0);
22   transform: translate3d(-50%,0,0);
23   padding: 8px 20px;
24   border-radius: 20px;
25   border: 1px solid #fff;
26   background-color: rgba(0,0,0,.4);
27   font-size: 15px;
28   color: #fff;
29   z-index: 10000001;
30   transition: all 0.25s;
31 }
32  
33 .check-original-image:hover {
34   box-shadow: 0px 0px 10px -2px rgb(0, 0, 0);
35 }
36  
37 a.close-original-image {
38   z-index: 10000001;
39   display: block;
40   width: 96px;
41   height: 96px;
42   border-top-left-radius: 50%;
43   border-top-right-radius: 0px;
44   border-bottom-right-radius: 0px;
45   border-bottom-left-radius: 50%;
46   background-color: rgba(0,0,0,.6);
47   transform: rotate(-50deg);
48   position: fixed;
49   right: -45px;
50   top: -45px;
51   text-align: center;
52   line-height: 94px;
53 }
54  
55 a.close-original-image:before {
56   content: 'E14C';
57   color: #fff;
58   margin-left: -45px;
59   transform: rotate(50deg);
60   transition: transform 0.5s;
61 }
62  
63 a.close-original-image:hover:before {
64   transform: rotate(230deg);
65 }

5. Enable/disable the drag and zoom functionalities.

view source
1 $("img").imgbox({
2   zoom: true,
3   drag: true
4 });

6. Specify the initial zoom level.

view source
1 $("img").imgbox({
2   scale: 1
3 });

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

source : jquery.net

Related posts: