npm's personal messenger

    @chantouchsek/vue-photoswipe

    0.0.1-beta-2 • Public • Published

    vue-photoswipe

    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

    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

    Install

    npm i @chantouchsek/vue-photoswipe

    DownloadsWeekly Downloads

    11

    Version

    0.0.1-beta-2

    License

    MIT

    Unpacked Size

    143 kB

    Total Files

    10

    Last publish

    Collaborators

    • chantouchsek