Node Popular Man

    jackmartin-vue-gallery

    2.0.2 • Public • Published

    vue-gallery

    Greenkeeper badge 📷 VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.

    Example

    jsFiddle - image

    jsFiddle - video

    Install

    CDN

    Recommended: https://unpkg.com/vue-gallery, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-gallery/

    NPM

    npm install jackmartin-vue-gallery --save

    Development Setup

    # install dependencies
    npm install
     
    # build dist files
    npm run build

    Usage

    VueJS single file (ECMAScript 2015)

    <template>
      <div>
        <gallery :images="images" :index="index" @close="index = null"></gallery>
        <div
          class="image"
          v-for="(image, imageIndex) in images"
          :key="imageIndex"
          @click="index = imageIndex"
          :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
        ></div>
      </div>
    </template>
     
    <script>
      import VueGallery from 'vue-gallery';
      
      export default {
        data: function () {
          return {
            images: [
              'https://dummyimage.com/800/ffffff/000000',
              'https://dummyimage.com/1600/ffffff/000000',
              'https://dummyimage.com/1280/000000/ffffff',
              'https://dummyimage.com/400/000000/ffffff',
            ],
            index: null
          };
        },
     
        components: {
          'gallery': VueGallery
        },
      }
    </script> 
     
    <style scoped>
      .image {
        float: left;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border: 1px solid #ebebeb;
        margin: 5px;
      }
    </style> 
     

    Browser (ES5)

      <script type="text/javascript" src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script> 
      <script type="text/javascript" src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script> 
      <script type="text/javascript"
        src="https://unpkg.com/jackmartin-blueimp-gallery@2.36.2/js/blueimp-helper.js"></script> 
      <script type="text/javascript"
        src="https://unpkg.com/jackmartin-blueimp-gallery@2.36.2/js/blueimp-gallery.js"></script> 
      <script type="text/javascript"
        src="https://unpkg.com/jackmartin-blueimp-gallery@2.36.2/js/blueimp-gallery-fullscreen.js"></script> 
      <link rel="stylesheet" type="text/css"
        href="https://unpkg.com/jackmartin-blueimp-gallery@2.36.2/css/blueimp-gallery.min.css">
      
     
    <div id="app">
      <gallery :images="images" :index="index" @close="index = null"></gallery>
      <div
        class="image"
        v-for="image, imageIndex in images"
        @click="index = imageIndex"
        :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
      ></div>
    </div>
     
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: function () {
          return {
            images: [
              'https://dummyimage.com/800/ffffff/000000',
              'https://dummyimage.com/1600/ffffff/000000',
              'https://dummyimage.com/1280/000000/ffffff',
              'https://dummyimage.com/400/000000/ffffff'
            ],
            index: null
          };
        },
     
        components: {
          'gallery': VueGallery
        }
      });
    </script> 

    Props

    Props Type Default Description
    images Array [] Urls list
    index Number null Opened image index
    options Object blueimp-gallery options

    Events

    Name Params Description
    onopen
    onopened
    onslide
    onslideend
    onslidecomplete
    onclose
    onclosed

    Other my Vue JS plugins

    Project Status Description
    vue-ls npm Vue plugin for work with local storage, session storage and memory storage from Vue context
    vue-popper npm VueJS popover component based on popper.js

    Contributors

    Code Contributors

    This project exists thanks to all the people who contribute. [Contribute].

    Financial Contributors

    Become a financial contributor and help us sustain our community. [Contribute]

    Individuals

    Organizations

    Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

    License

    FOSSA Status

    MIT © Igor Ognichenko

    Install

    npm i jackmartin-vue-gallery

    DownloadsWeekly Downloads

    1

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    31.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • jackmartin