vue-photoswipe-directive
An image previewer for vue, powered by PhotoSwipe.
Demo
Requirements
Advantages
- Simple API.
- Small bundle size: 15.3KB (5.6KB gzipped, without PhotoSwipe & Promise polyfill).
Installation
yarn add photoswipeyarn add vue-photoswipe-directive
Usage
Registration
Base
; directives: preview: ;
Options
; directives: preview: ;
Vue Directive
Base
Scope
Lazy Load
Support vue-lazyload
Origin Image
Example
Include PhotoSwipe dependencies by external links
index.html
<!-- Core CSS file --> <!-- Skin CSS file (styling of UI - buttons, caption, etc.) In the folder of skin CSS file there are also: - .png and .svg icons sprite, - preloader.gif (for browsers that do not support CSS animations) --> <!-- Core JS file --> <!-- UI JS file -->
*.vue
<template> <div id="app"> <img v-preview:scope-a src="path/to/images/01.jpg" alt="image 01" /> <img v-preview:scope-a src="path/to/images/02.jpg" alt="image 02" /> <img v-preview src="path/to/images/03.jpg" alt="image 03" /> </div></template> <script>import createPreviewDirective from "vue-photoswipe-directive"; export default { directives: { preview: createPreviewDirective() }};</script>
Include PhotoSwipe dependencies by modules
*.vue
<template> <div id="app"> <img v-preview:scope-a src="path/to/images/01.jpg" alt="image 01" /> <img v-preview:scope-a src="path/to/images/02.jpg" alt="image 02" /> <img v-preview src="path/to/images/03.jpg" alt="image 03" /> </div></template> <script>import PhotoSwipe from 'photoswipe/dist/photoswipe'import PhotoSwipeUI from 'photoswipe/dist/photoswipe-ui-default'import 'photoswipe/dist/photoswipe.css'import 'photoswipe/dist/default-skin/default-skin.css'import createPreviewDirective from "vue-photoswipe-directive"; export default { directives: { preview: createPreviewDirective(null, PhotoSwipe, PhotoSwipeUI) }};</script>
Development
yarn serve
Build
yarn build:lib
Todo
- Expand the advanced API.
- Add test files.
License
MIT © zh-rocco