imageViewer

This is no dependencies javascript plugin that help to view image better. and it can place in you code or deploy online.it is only 12k uncompressed.why i do it？what github's markdown link images can't show.you can change dns and turn on vpn to solve it.but it's client!it's not nice.So i solve it with an external image viewer.

install

npm i @zgo/image-viewer

usage-API

1. imageViewer.load(options)

eg:
<link rel="stylesheet" href="style.css"> or 
imageViewer.load(options);
//options -> {k:v} 

2. imageViewer.pageTo(number)
3. imageViewer.openOrClose(boolean)
4. imageViewer.adapteScreen()

options

|key|type|range|default value|means|show| |-|-|-|-|-|-| |list|dom|-|null|ImageViewer can get image informations autoly,if you give dom what wrap all images that you want to load|| |images|array|-|null|image informations|[{src: '1.jpg', alt: 'image', width: number, height: number},...]| |wrapper|dom|-|null|You can custom wrapper through changging some html of example|| |gutter|number|-|60||| |clientType|number|0 or 1|1|0 is meaning phone and 1 is meaning PC|| |languge|string|'zh_CN' or 'en'|'zh_CN'|If you want to support more languges,you can use wrapper of options.|| |close|boolean|-|false|close|| |full|boolean|-|true|screen full|| |github|boolean|-|true|project origin|| |handlerNext|function||||| |handlerPrev|function||||| |handlerOriginalShap|function||||| |handlerWidthAdapter|function||||| |handlerHeightAdapter|function||||| |unmount|function|||When wapper close,it executes|| |load|function|||when image is completed, it executes.every image executes just one time.|| |imagesIsNotOk|function|(images)=>void|(images)=>{throw new Error("can't get images")}|if images is not truthy,all events will not mount and button will not feedback!|| |modal|boolean||true||| |||||||

example wrapper

{wrapper: [`<div>
      <div class="img_actions"><div class="img_icon icon_cycle"></div></div>
      <div class="img_imgBox">
      </div>
      <div class="img_controlBox clearfix">
        <span class="img_item img_pagebar"><span class="currentSize">0</span> / <span class="total">0</span></span>
        <span class="img_con">imageviewer</span>
      </div>
      <div class="img_loading"><svg viewBox="0 0 1024 1024" focusable="false"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" /></svg></div>
    </div>`,
    `<div>
      <div class="img_title">
        <span class="img_con">imageviewer</span>
        <span class="img_actions"><div class="img_icon icon_cycle"></div>
          <div class="img_action">
            <a class="img_full">全屏</a>
            <a class="img_close">关闭</a>
            <a class="img_github" href="https://github.com/zgoby/image-viewer">GitHub</a>
          </div>
        </span>
      </div>
      <div class="img_imgBox">
      </div>
      <div class="img_controlBox clearfix">
        <div class="img_page">
          <a class="img_item prev"><svg viewBox="0 0 1024 1024" focusable="false"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" /></svg></a>
          <span class="img_item img_pagebar"><span class="currentSize">0</span> / <span class="total">0</span></span>
          <a class="img_item next"><svg viewBox="0 0 1024 1024" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" /></svg></a>
        </div>
        <div class="img_scale">
          <a class="img_item originalShap"><svg viewBox="65 65 896 896" focusable="false"><path d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" /></svg></a>
          <a class="img_item widthAdapter"><svg viewBox="65 65 896 896" focusable="false"><path d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zm724 0h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6a7.23 7.23 0 00-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3a7.14 7.14 0 000 11.3l127.5 100.8c4.7 3.7 11.7.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5.2-11.4z" /></svg></a>
          <a class="img_item heightAdapter"><svg viewBox="65 65 896 896" focusable="false"><path d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" /></svg></a>
        </div>
      </div>
      <div class="img_loading"><svg viewBox="0 0 1024 1024" focusable="false"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" /></svg></div>
    </div>`]}

TODO

2. Mobile support
3. Life cycle function add

5. Support customizable event adding