vsl
vue-simple-lightbox-optimized
npm i vue-simple-lightbox-optimized
vsl

vue-simple-lightbox-optimized

A Vue.js component for touch-friendly image lightbox for mobile and desktop with simple-lightbox

by Vaibhavraj Roham

1.1.1 (see all)License:MITTypeScript:Not Found
npm i vue-simple-lightbox-optimized
Readme

#vue-simple-lightbox-optimized Based on vue-simple-lightbox: https://github.com/vrajroham/vue-simple-lightbox Added a tweak to use different image sources for previews. Big props to the original creator!

Example

Use src_min to add a smaller preview of the big image for optimized performance!

<template>
  <div id="app">
    <p>Welcome to your Vue.js lightbox!</p>

    <lightbox
      id="mylightbox"
      :images="images"
      :image_class=" 'img-responsive img-rounded' "
      :album_class=" 'my-album-class' "
      :options="options">
    </lightbox>

  </div>
</template>

<script>
  import Lightbox from 'vue-simple-lightbox'

  export default {
    components: {
      Lightbox
    },
    data(){
        return{
          images : [
            {
                src_min: 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
                src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
                title : 'Image 2'
            },
            {
                src_min: 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',//the preview will look like the first picture
                src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
                title : 'Image 3'
            }
          ],
          options : {
            closeText : 'X'
          }
        }
      }
  }
</script>

Props

Refer to: https://github.com/vrajroham/vue-simple-lightbox

Options

Refer to: https://github.com/vrajroham/vue-simple-lightbox

Development

Refer to: https://github.com/vrajroham/vue-simple-lightbox

Downloads/wk

6

GitHub Stars

58

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

9

OPEN PRs

0
VersionTagPublished
1.1.1
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate