Skip to content

zh-rocco/vue-photoswipe-directive

Repository files navigation

vue-photoswipe-directive

An image previewer for vue, powered by PhotoSwipe.

vue-js downloads GitHub stars devDependencies npm-version Github tag Build Status GitHub license

Demo

DEMO

Try it out

Requirements

Advantages

  • Simple API.
  • Small bundle size: 15.3KB (5.6KB gzipped, without PhotoSwipe & Promise polyfill).

Installation

yarn add photoswipe
yarn add vue-photoswipe-directive

Usage

Registration

Base

import createPreviewDirective from "vue-photoswipe-directive";

export default {
  directives: {
    preview: createPreviewDirective()
  }
};

Options

import createPreviewDirective from "vue-photoswipe-directive";

export default {
  directives: {
    preview: createPreviewDirective(photoswipeOptions)
  }
};

Vue Directive

Base

<img v-preview src="path/to/image.jpg" alt="image" />

Scope

<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" />

Lazy Load

Support vue-lazyload

<div v-lazy-container="{ selector: 'img' }">
  <img v-preview:scope-a data-src="path/to/images/01.jpg" alt="image 01" />
  <img v-preview:scope-a data-src="path/to/images/02.jpg" alt="image 02" />
  <img v-preview data-src="path/to/images/03.jpg" alt="image 03" />
</div>

Origin Image

<img v-preview src="path/to/image.jpg" data-origin="path/to/origin-image.jpg" alt="image" />

Example

Include PhotoSwipe dependencies by external links

index.html

<!-- Core CSS file -->
<link rel="stylesheet" href="https://unpkg.com/photoswipe/dist/photoswipe.css" />

<!-- 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) -->
<link rel="stylesheet" href="https://unpkg.com/photoswipe/dist/default-skin/default-skin.css" />

<!-- Core JS file -->
<script src="https://unpkg.com/photoswipe/dist/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="https://unpkg.com/photoswipe/dist/photoswipe-ui-default.min.js"></script>

*.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