JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Vue Gallery

    :camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
    Filed under 

    • 🔾33%Overall
    • 274
    • 4.5 days
    • 🕩51
    • 👥9

    vue-gallery

    Greenkeeper badge :camera: 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 vue-gallery --save
    

    Yarn

    yarn add vue-gallery
    

    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/blueimp-gallery@2.27.0/js/blueimp-helper.js"></script>
      <script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery.js"></script>
      <script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-fullscreen.js"></script>
      <script type="text/javascript" src="vue-gallery.js"></script>
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/blueimp-gallery@2.27.0/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

    License

    FOSSA Status

    MIT © Igor Ognichenko

    Show All