@ctmobile/ui-imageviewer

1.0.1 • Public • Published

ImageViewer

Getting started

请参考photoswipe的Getting started

Options

请参考photoswipe的Options

API

请参考photoswipe的API

FAQ

请参考photoswipe的FAQ

HTML in slides

请参考photoswipe的HTML in slides

Responsive images

请参考photoswipe的Responsive images

Performance tips

http://photoswipe.com/documentation/performance-tips.html 请参考photoswipe的Performance tips

例子

html

js


import ImageViewer from '@ctmobile/ui-imageviewer';

// build items array
const items = [
  {
    src: 'http://pic37.nipic.com/20140110/17563091_221827492154_2.jpg',
    w: 600,
    h: 400
  },
  {
    src: 'http://pic18.nipic.com/20120204/8339340_144203764154_2.jpg',
    w: 1200,
    h: 900
  }
];

document.getElementById('photo1').addEventListener('click', () => {
  const imageviewer = ImageViewer(document.getElementById('imageviewer'), items, {
    index: 0
  });
  imageviewer.photoswipe.init();
});

document.getElementById('photo2').addEventListener('click', () => {
  const imageviewer = ImageViewer(document.getElementById('imageviewer'), items, {
    index: 1
  });
  imageviewer.photoswipe.init();
});

Package Sidebar

Install

npm i @ctmobile/ui-imageviewer

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

70.5 kB

Total Files

11

Last publish

Collaborators

  • playerljc