Zoom Image Medium Previewer - Download Zoom Images Like Medium - jQuery Image Previewer

Download Zoom Images Like Medium – jQuery Image Previewer

By Posted on

This time I will share jQuery Plugin and tutorial about Zoom Images Like Medium – jQuery Image Previewer, hope it will help you in programming stack.

Zoom Image Medium Previewer - Download Zoom Images Like Medium - jQuery Image Previewer
File Size: 5.23 KB
Views Total: 2164
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Image Previewer is a lightweight, easy-to-use jQuery image zoom plugin inspired by Medium.com.

The image zoom plugin displays images in a responsive modal window that auto closes the zoom when scrolling away or clicking the outside of the modal.

How to use it:

1. Load the minified version of the jQuery image previewer plugin after jQuery (slim build).

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="jquery-imagepreviewer.min.js"></script>

2. Call the function on the container containing images. Done.

view source
01 <article>
02  
03   <h3>Heading 1</h3>
04   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo libero vitae ipsum semper, sed tincidunt massa hendrerit. Integer sed risus sit amet purus pellentesque iaculis. Nulla ultrices nibh ac odio posuere, ut rhoncus diam congue.</p>
05   <img src="1.jpg" alt="Image 1">
06    
07   <h3>Heading 1</h3>
08   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo libero vitae ipsum semper, sed tincidunt massa hendrerit. Integer sed risus sit amet purus pellentesque iaculis. Nulla ultrices nibh ac odio posuere, ut rhoncus diam congue.</p>
09   <img src="2.jpg" alt="Image 2">
10  
11   <h3>Heading 3</h3>
12   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo libero vitae ipsum semper, sed tincidunt massa hendrerit. Integer sed risus sit amet purus pellentesque iaculis. Nulla ultrices nibh ac odio posuere, ut rhoncus diam congue.</p>
13   <img src="3.jpg" alt="Image 3">
14  
15 </article>>
view source
1 window.onload = function() {
2   $("article").imagePreviewer();
3 };

3. Decide whether to close the zoom when scrolling away. Default: true.

view source
1 window.onload = function() {
2   $("article").imagePreviewer({
3     scroll: false
4   });
5 };

4. Override the default styles of the modla window.

view source
01 .layer {
02   position: fixed;
03   z-index: 100000;
04   top: 0;
05   right: 0;
06   bottom: 0;
07   left: 0;
08   overflow: auto;
09   background-color: rgba(43,51,59,0.80);
10 }
11  
12 .flex {
13   display: flex;
14   display: -webkit-flex;
15   align-items: center;
16   justify-content: center;
17 }
18  
19 #image_preview_<a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a> img.hide {
20   opacity: 0;
21   transform: scale(0);
22   transition: all 0.2;
23   cursor: zoom-out;
24 }
25  
26 #image_preview_popup img {
27   width: 100%;
28   height: auto;
29   opacity: 1;
30   transform: scale(1);
31   transition: all 0.2s;
32   cursor: zoom-out;
33 }

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

source : jquery.net

Related posts: