ImageViewer

• Getting started
• Options
• API
• FAQ
• HTML in slides
• Responsive images
• Performance tips
• demo

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();
});