image-zoomer-widget v1.0.11

image-zoomer-widget

This Javascript widget using Web Component will help you zoom out a part of your image as big as you want. It is very fast, lightweight, easy to use. You can use it in any web projects no matter what kind of libraries or frameworks related like jQuery, React, Vue and so many more...

Demo: https://dist.cuonghv911.vercel.app

NPM:

npm install --save image-zoomer-widget@latest

CDN:

<script type="text/javascript" src="https://unpkg.com/image-zoomer-widget@latest/dist/image-zoomer-widget.min.js"></script>

If you are using React, Vue, Angular or NPM in general

import 'image-zoomer-widget/dist/image-zoomer-widget.min.js'

Then in your code:

<div style={{width: 500, height: 500}}>
  <image-zoomer-widget
    src="https://avatar.skype.com/v1/avatars/live%3A.cid.7922a2a84a50645e?auth_key=1899007072&cacheHeaders=true&returnDefaultImage=false&size=l"
    zoomer_size="30%"
    screen_size="50%"
  />
</div>

If you are using Vallina Javascript with HTML, put this tag at the end of body tag like this:

...
  <script type="text/javascript" src="https://unpkg.com/image-zoomer-widget@latest/dist/image-zoomer-widget.min.js"></script>
</body>

Then in your code:

<div style={{width: 500, height: 500}}>
  <image-zoomer-widget
    src="https://avatar.skype.com/v1/avatars/live%3A.cid.7922a2a84a50645e?auth_key=1899007072&cacheHeaders=true&returnDefaultImage=false&size=l"
    zoomer_size="30%"
    screen_size="50%"
  />
</div>

API document:

• Firstly remember that this widget will take 100% height and width of its direct parent tag. So if you want to change the size of image just change the size of its parent.

Example:

<div style={{width: 500, height: 500}}>
  <image-zoomer-widget
    src="https://avatar.skype.com/v1/avatars/live%3A.cid.7922a2a84a50645e?auth_key=1899007072&cacheHeaders=true&returnDefaultImage=false&size=l"
    zoomer_size="30%"
    screen_size="50%"
  />
</div>

• src: is the url of your image
• zoomer_size: the size of the zoomer relative to the img in percent (%)
• screen_size: the size of the zoomed part of the image you want to show in percent (%)