Skip to content
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Vue HTML JavaScript Shell
Branch: master
Clone or download
Latest commit 6fa09c3 Oct 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Jul 12, 2019
build fix: set node_env to production for both builds Feb 12, 2019
dist/js build Oct 10, 2019
doc add images Sep 17, 2017
example add description for images Feb 8, 2018
src Better default close character Oct 9, 2019
.babelrc refactoring build Feb 6, 2019
.codeclimate.yml confgure project Jun 7, 2017
.editorconfig confgure project Jun 7, 2017
.eslintignore bug fix and add example Sep 13, 2017
.eslintrc.js
.gitignore remove npm-debug.log Jan 5, 2018
.npmignore update npmignore Feb 6, 2019
.travis.yml
CHANGELOG.md confgure project Jun 7, 2017
LICENSE Initial commit Jun 7, 2017
README.md Update README.md Oct 2, 2019
_config.yml Set theme jekyll-theme-cayman Jun 7, 2017
package.json 2.0.1 Oct 10, 2019
yarn.lock

README.md

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

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

You can’t perform that action at this time.