Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
vlightbox
Simple native Vue.js lightbox
Demo
https://olitaylor.github.io/vlightbox/
Install
Vue Compatibility
Compatible with Vue 2.0
NPM
$ npm install vlightboxRegister 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"