🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Featured Gallery

Documentation

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/[email protected]/dist/vue.js"></script>   <script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>   <script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>   <script type="text/javascript" src="https://unpkg.com/[email protected]/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/[email protected]/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


You May Also Like