Author: | worka |
---|---|
Views Total: | 2,806 views |
Official Page: | Go to website |
Last Update: | January 31, 2020 |
License: | MIT |
Preview:

Description:
A Vanilla JavaScript image viewer that can be used to view the larger version of the image in a tooltip as you hover or tap the thumbnail.
How to use it:
1. Add the img-tooltip plugin’s files to the page.
<link rel="stylesheet" href="./tooltip.css" /> <script src="./tooltip.js"></script>
2. Insert a thumbnail into the document and define the path to the large image in the data-src
attribute:
<img src="thumb.jpg" class="example" data-src="full.jpg" />
3. Attach the plugin to the thumbnail image and done.
var jcImagesTooltipInstance = JcImagesTooltip.create('img.example', { // options here });
4. Set the width & height of the image displayed in the tooltip.
var jcImagesTooltipInstance = JcImagesTooltip.create('img.example', { width: 430, height: 320 });
5. Set the offset of the image viewer. Default: 10px.
var jcImagesTooltipInstance = JcImagesTooltip.create('img.example', { offset: 50 });
6. Update the image viewer if needed.
jcImagesTooltipInstance.update();