@chantouchsek/vue-photoswipe

vue-photoswipe

An image previewer for vue, powered by PhotoSwipe.

Demo

Try it out

Requirements

• Vue.js 2.x
• PhotoSwipe

Advantages

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

Installation

Yarn

yarn add photoswipe @chantouchsek/vue-photoswipe

Npm

npm install photoswipe @chantouchsek/vue-photoswipe

Usage

Registration

Base

import createPreviewDirective from "@chantouchsek/vue-photoswipe";

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

Options

import createPreviewDirective from "@chantouchsek/vue-photoswipe";

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 "@chantouchsek/vue-photoswipe";

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 "@chantouchsek/vue-photoswipe";

export default {
  directives: {
    preview: createPreviewDirective(null, PhotoSwipe, PhotoSwipeUI)
  }
};
</script>

Use with options scope

<template>
  <div id="app">
    <img v-preview="{ name: 'a' }" src="path/to/images/01.jpg" alt="image 01" />
    <img v-preview="{ name: 'a' }" src="path/to/images/02.jpg" alt="image 01" />
    <img v-preview="{ name: 'b' }" src="path/to/images/03.jpg" alt="image 01" />
    <img v-preview="{ name: 'b' }" src="path/to/images/04.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>

Options name must be defined.

Development

yarn dev

Build

yarn build:lib

Todo

• Expand the advanced API.
• Add test files.

License

MIT © Chantouch