Git Product home page Git Product logo

vlightbox's Introduction

Build Status

vlightbox

Simple native Vue.js lightbox

Demo

https://olitaylor.github.io/vlightbox/

Install

Vue Compatibility

Compatible with Vue 2.0

NPM

$ npm install vlightbox

Register the component

import lightbox from 'vlightbox';
Vue.use(lightbox);

Basic markup should look like this

<lightbox :currentImage="currentImageFather"
          :overlayActive="overlayActiveFather"
          >
          <div v-for="(image, index) in images" :key="image.id">
                <img src="image.src" v-on:click="clickImage(index)">
          </div>
</lightbox>

<script>
export default {
    data () {
        return {
             images: [
                {
                    id: 1,
                    src:"path/to/image"
                },
            ],
            currentImageFather: null,
            overlayActiveFather: false,
        }
    },
    methods: {
        clickImage(index) {
            this.currentImageFather = index
            this.overlayActiveFather = true
        }
    }
}
</script>

Other options are;

Remove all styles to the image gallery, overlay not included

  • Default: false
:resetstyles="false" 

Loop back to the first image when at the end of the gallery

  • Default: true
:loop="true" 

Show next, back and close buttons on overlay

  • Default: true
:nav="true" 

Show captions on images with the caption property

  • Default: true
:caption="true"

More features coming soon!

vlightbox's People

Contributors

olitaylor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

vlightbox's Issues

Missing script dev

After install
npm install vlightbox
and
npm init
try:
npm run dev
and got:
npm ERR! missing script: dev

Npm install issue

When installing as a package, the module is not found. May need to add an index.js and link to the dist folder

load youtube video too

It would be gread if we could load both youtube videos and images in the same lightbox...
any chance?
:)

download image

hello,
how can I add the option to download the image when I open the image

thanks

Accessability

Add links to images to make it keyboard friendly.

caption is not displayed

In overlay mode, caption is not displayed, from the keyword default misspelled

I want to create pull request, but i don't understand how do this.

Change deftault: true from caption props to default: true on src/components/Lightbox.vue

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.