docs/index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description"
        content="photoviewer,jquery plugin,lightbox,viewer,Windows 照片查看器,图片查看器,模态窗,拖拽,缩放,旋转,平移,最大化">
  <title>PhotoViewer</title>
  <!-- Bootstrap -->
  <link href="css/photoviewer.css" rel="stylesheet">
  <link href="css/snack.css" rel="stylesheet">
  <link href="css/snack-helper.css" rel="stylesheet">
  <link href="css/docs.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
  <!--[if lt IE 9]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div class="container">
    <div class="header p-20 text-white text-center m-l--15 m-r--15">
      <h1 class="m-t-15 m-b-10">PhotoViewer</h1>
      <p>PhotoViewer is a JS plugin to view images just like in Windows.</p>
      <p>
        <a class="btn primary m-5" href="https://github.com/nzbin/photoviewer">View on GitHub</a>
        <a class="btn danger m-5"
           href="https://github.com/nzbin/photoviewer/archive/master.zip">Download</a>
      </p>
    </div>
    <!-- Getting Started -->
    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30">Getting Started</h2>
    <p>All the pictures come from Flickr website, copyright to the original author.</p>
    <!-- Installation -->
    <h3>Installation</h3>
    <pre class="prettyprint">
$ npm install photoviewer --save
</pre>
    <h3>Quick Start</h3>
    <h4>Step 1: Include files</h4>
    <pre class="prettyprint">
@import 'photoviewer/dist/photoviewer.css';
</pre>
    <pre class="prettyprint">
import PhotoViewer from 'photoviewer';
</pre>

    <p>or</p>

    <pre class="prettyprint">
&lt;!-- Core CSS file --&gt;
&lt;link href=&quot;/path/to/photoviewer.css&quot; rel=&quot;stylesheet&quot;&gt;

&lt;!-- Core JS file --&gt;
&lt;script src=&quot;/path/to/photoviewer.js&quot;&gt;&lt;/script&gt;
</pre>

    <h4>Step 2: Initialize</h4>
    <p>The usage of photoviewer is very simple, the
      <code>PhotoViewer</code> constructor has 2 argument.</p>
    <ol>
      <li>Array with objects of image info.</li>
      <li>Options</li>
    </ol>
    <pre class="prettyprint">
// build images array
var items = [
    {
        src: 'path/to/image1.jpg', // path to image
        title: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
    },
    {
        src: 'path/to/image2.jpg',
        title: 'Image Caption 2'
    }
];

// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // this option means you will start at first image
};

// Initialize the plugin
var viewer = new PhotoViewer(items, options);
</pre>

    <p>At last, binding click event on a button element, you should get the following example.</p>

    <p>
      <button type="button" class="btn default">Open PhotoViewer</button>
    </p>

    <!-- Initializing form a list of links -->
    <h3>Initializing form a list of links</h3>
    <p>The default DOM structure as following:</p>
    <pre class="prettyprint">
&lt;a data-gallery=&quot;manual&quot; href=&quot;big-1.jpg&quot;&gt;
  &lt;img src=&quot;small-1.jpg&quot;&gt;
&lt;/a&gt;
&lt;a data-gallery=&quot;manual&quot; href=&quot;big-2.jpg&quot;&gt;
  &lt;img src=&quot;small-2.jpg&quot;&gt;
&lt;/a&gt;
&lt;a data-gallery=&quot;manual&quot; href=&quot;big-3.jpg&quot;&gt;
  &lt;img src=&quot;small-3.jpg&quot;&gt;
&lt;/a&gt;
</pre>

    <p>You should get the image src and the index of element clicked manually to create the images
      array.</p>
    <pre class="prettyprint">
$('[data-gallery=manual]').click(function (e) {

  e.preventDefault();

  var items = [],
    // get index of element clicked
    options = {
      index: $(this).index()
    };

  // looping to create images array
  $('[data-gallery=manual]').each(function () {
    let src = $(this).attr('href');
    items.push({
      src: src
    });
  });

  new PhotoViewer(items, options);

});
</pre>

    <p>Look at the following example:</p>
    <div class="image-set">
      <a data-gallery="manual" data-title="Slipping Away by Jerry Fryer" data-group="a"
         href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
        <img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
      </a>
      <a data-gallery="manual" data-title="Mi Fuego by albert dros" data-group="a"
         href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
        <img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
      </a>
      <a data-gallery="manual" data-title="Winter Fairytale by Achim Thomae" data-group="a"
         href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
        <img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
      </a>

      <a data-gallery="manual"
         href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg" data-group="b">
        <img src="https://farm5.staticflickr.com/4267/34162425794_1430f38362_s.jpg" alt="">
      </a>
      <a data-gallery="manual"
         href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg" data-group="b">
        <img src="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_s.jpg" alt="">
      </a>
      <a data-gallery="manual"
         href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg" data-group="b">
        <img src="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_s.jpg" alt="">
      </a>
    </div>

    <!-- Options -->
    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30">Options</h2>
    <h3>
      <code>index</code>
      <small>
        <code>number 0</code>
      </small>
    </h3>
    <p>The images array index. If
      <code>0</code>, it will show first image when photoviewer opened.</p>

    <h3>
      <code>draggable</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If ture, it allow modal dragging.</p>

    <h3>
      <code>resizable</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If ture, it allow modal resizing.</p>

    <h3>
      <code>movable</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If ture, it allow image moving.</p>

    <h3>
      <code>keyboard</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>Make photoviewer can be controled by keyboard. The shortcut key is similar to Windows photo
      viewer.</p>
    <ul>
      <li>
        <kbd>←</kbd> prev image
      </li>
      <li>
        <kbd>→</kbd> next image
      </li>
      <li>
        <kbd>+</kbd> zoom in image
      </li>
      <li>
        <kbd>-</kbd> zoom out image</li>
      <li>
        <kbd>Ctrl</kbd> +
        <kbd>Alt</kbd> +
        <kbd>0</kbd> image autual size
      </li>
      <li>
        <kbd>Ctrl</kbd> +
        <kbd>,</kbd> rotate image left
      </li>
      <li>
        <kbd>Ctrl</kbd> +
        <kbd>.</kbd> rotate image right
      </li>
      <li>
        <kbd>Q</kbd> quit the photoviewer
      </li>
    </ul>

    <h3>
      <code>title</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If ture, it will show image title on header.</p>

    <h3>
      <code>fixedModalSize</code>
      <small>
        <code>boolean false</code>
      </small>
    </h3>
    <p>This option will set photoviewer's size when it opened. If false, the modal initialized size
      will fit to image
      size.
      If true, the modal initialized size will be set with modalWidth and modalHeight.</p>

    <h3>
      <code>modalWidth</code>
      <small>
        <code>number 320</code>
      </small>
    </h3>
    <p>It's the modal min width or modal initialized width when opened.</p>

    <h3>
      <code>modalHeight</code>
      <small>
        <code>number 320</code>
      </small>
    </h3>
    <p>It's the modal min height or modal initialized height when opened.</p>

    <h3>
      <code>gapThreshold</code>
      <small>
        <code>number 0.02</code>
      </small>
    </h3>
    <p>The gap size threshold. There will have a gap if modal too large to beyond the browser. Its
      min value is
      <code>0</code>, means the modal's width or height should be equal to browser window if it's
      too large.</p>

    <h3>
      <code>ratioThreshold</code>
      <small>
        <code>number 0.01</code>
      </small>
    </h3>
    <p>Image zoom ratio threshold.</p>

    <h3>
      <code>minRatio</code>
      <small>
        <code>number 0.1</code>
      </small>
    </h3>
    <p>The min ratio to show image.
      <code>0.1</code> means the image can be zoomed 0.1x from original size.</p>

    <h3>
      <code>maxRatio</code>
      <small>
        <code>number 16</code>
      </small>
    </h3>
    <p>The max ratio to show image.
      <code>16</code> means the image can be zoomed 16x from original size.</p>

    <h3>
      <code>headerToolbar</code>
      <small>
        <code>array ['maximize','close']</code>
      </small>
    </h3>
    <p>The buttons display in header toolbar.</p>

    <h3>
      <code>footerToolbar</code>
      <small>
        <code>array ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']</code>
      </small>
    </h3>
    <p>The buttons display in footer toolbar.</p>

    <h3>
      <code>fixedContent</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If true, the document page can not scoll.</p>

    <h3>
      <code>initMaximized</code>
      <small>
        <code>boolean false</code>
      </small>
    </h3>
    <p>If false, the modal size will be set of image size or what you set with modalWidth and
      modalHeight. If true, the
      modal
      size will be set maximized when initialized just like other lightbox.
    </p>

    <h3>
      <code>initAnimation</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If false, it will not have animation at plugin's initialized.</p>

    <h3>
      <code>fixedModalPos</code>
      <small>
        <code>boolean false</code>
      </small>
    </h3>
    <p>If true, the modal position will be fixed when change images.</p>

    <h3>
      <code>zIndex</code>
      <small>
        <code>number 1090</code>
      </small>
    </h3>
    <p>The modal style of z-index, it is useful with multiple instances.</p>

    <h3>
      <code>dragHandle</code>
      <small>
        <code>string | boolean false</code>
      </small>
    </h3>
    <p>The handle of draggable. Default <code>false</code> which whole modal can be dragging.</p>

    <h3>
      <code>multiInstances</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If false, it can only open single photoviewer.</p>

    <h3>
      <code>icons</code>
      <small>
        <code>object</code>
      </small>
    </h3>
    <p>You can customize the icons class in following key.</p>
    <ul>
      <li>minimize: <code>SVG codes</code></li>
      <li>maximize: <code>SVG codes</code></li>
      <li>close: <code>SVG codes</code></li>
      <li>zoomIn: <code>SVG codes</code></li>
      <li>zoomOut: <code>SVG codes</code></li>
      <li>prev: <code>SVG codes</code></li>
      <li>next: <code>SVG codes</code></li>
      <li>fullscreen: <code>SVG codes</code></li>
      <li>actualSize: <code>SVG codes</code></li>
      <li>rotateLeft: <code>SVG codes</code></li>
      <li>rotateRight: <code>SVG codes</code></li>
    </ul>

    <h3>
      <code>i18n</code>
      <small>
        <code>object</code>
      </small>
    </h3>
    <p>You can customize the buttons title in following key.</p>
    <ul>
      <li>minimize: <code>minimize</code></li>
      <li>maximize: <code>maximize</code></li>
      <li>close: <code>close</code></li>
      <li>zoomIn: <code>zoom-in</code></li>
      <li>zoomOut: <code>zoom-out</code></li>
      <li>prev: <code>prev</code></li>
      <li>next: <code>next</code></li>
      <li>fullscreen: <code>fullscreen</code></li>
      <li>actualSize: <code>actualSize</code></li>
      <li>rotateLeft: <code>rotate-left</code></li>
      <li>rotateRight: <code>rotate-right</code></li>
    </ul>

    <h3>
      <code>callbacks</code>
      <small>
        <code>object</code>
      </small>
    </h3>
    <p>
      You can define callbacks in <code>callbacks</code> option.
    </p>
    <pre class="prettyprint">
new PhotoViewer(items, {
  callbacks: {
    beforeOpen: function(context){
      // Will fire before modal is opened
    },
    opened: function(context){
      // Will fire after modal is opened
    },
    beforeClose: function(context){
      // Will fire before modal is closed
    },
    closed: function(context){
      // Will fire after modal is closed
    },
    beforeChange: function(context, index){
      // Will fire before image is changed
      // The argument index is the current image index of image group
    },
    changed: function(context, index){
      // Will fire after image is changed
      // The argument index is the next image index of image group
    }
  }
});
</pre>

    <h3>
      <code>progressiveLoading</code>
      <small>
        <code>boolean true</code>
      </small>
    </h3>
    <p>If true, the image will be rendered progressively.</p>

    <h3>
      <code>appendTo</code>
      <small>
        <code>string 'body'</code>
      </small>
    </h3>
    <p>The DOM element to which viewer will be added.</p>

    <h3>
      <code>customButtons</code>
      <small>
        <code>object {}</code>
      </small>
    </h3>
    <pre class="prettyprint">
new PhotoViewer(items, {
  footerToolbar: [
    ...
    'myCustomButton'
  ],
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      title: 'custom!',
      click: function (context, e) {
        alert('clicked the custom button!');
      }
    }
  }
});
</pre>
    <p>Each <code>customButton</code> entry accepts the following properties:</p>
    <ul>
      <li><code>text</code> - the text to be display on the button itself.</li>
      <li><code>title</code> - the title to be display when hover the button.</li>
      <li><code>click</code> - a callback function that is called when the button is clicked.</li>
    </ul>


    <footer class="footer text-center">
      <p class="text-center">Designed by
        <a href="https://github.com/nzbin" target="_blank">nzbin</a> ❤️ Made with using
        <a href="https://github.com/nzbin/snack" target="_blank">snack</a>
      </p>
    </footer>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/prettify/r298/prettify.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/photoviewer.js"></script>
  <script>
    window.prettyPrint && prettyPrint();

    // initialize with an array of objects
    $('button').click(function () {

      new PhotoViewer([{
        src: 'https://c1.staticflickr.com/3/2136/32571842110_faadf0b1a7_k.jpg',
        title: 'Glendalough Upper Lake by <a href="https://www.flickr.com/photos/desomnis/">Angelika Hörschläger</a>'
      }, {
        src: 'https://c1.staticflickr.com/5/4364/35774111373_187963664b_h.jpg',
        title: 'A foggy summer day by <a href="https://www.flickr.com/photos/desomnis/">Angelika Hörschläger</a>'
      }, {
        src: 'https://c1.staticflickr.com/8/7737/28617607314_170a8e6752_k.jpg',
        title: 'My Silver Lining (explore) by <a href="https://www.flickr.com/photos/desomnis/">Angelika Hörschläger</a>'
      }]);

    });

    // initialize manually with a list of links
    $('[data-gallery=manual]').click(function (e) {

      e.preventDefault();

      var items = [],
        options = {
          index: $(this).index(),
        };

      $('[data-gallery=manual]').each(function () {
        items.push({
          src: $(this).attr('href'),
          title: $(this).attr('data-title')
        });
      });

      new PhotoViewer(items, options);

    });

  </script>
</body>

</html>