# vue-simple-lightbox-optimized

> A Vue.js component for touch-friendly image lightbox

Latest version **1.1.1** (published 2018-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-simple-lightbox-optimized
pnpm add vue-simple-lightbox-optimized
yarn add vue-simple-lightbox-optimized
bun add vue-simple-lightbox-optimized
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-04-25 |
| First published | 2018-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 54 |
| Author | vaibhavraj Roham |
| Maintainers | tsandu |
| Keywords | vue, lightbox, preview, image |

## Links

- npm: https://www.npmjs.com/package/vue-simple-lightbox-optimized
- Repository: https://github.com/vrajroham/vue-simple-lightbox
- Homepage: https://github.com/vrajroham/vue-simple-lightbox#readme
- Issues: https://github.com/vrajroham/vue-simple-lightbox/issues
- npm.io page: https://npm.io/package/vue-simple-lightbox-optimized

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.0.0
- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [simplelightbox](https://npm.io/package/simplelightbox.md) ^1.10.7

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.1.1 (latest) — 2018-04-25
- 1.1.0 — 2018-04-25
- 1.0.0 — 2018-04-25

## 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!
````vue
<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

---
_Source: https://npm.io/package/vue-simple-lightbox-optimized · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._