vue-gallery-slideshow-bisom-health-care
v0.1.0
Published
Lightweight and responsive image gallery for Vue.js.
Downloads
36
Maintainers
Readme
vue-gallery-slideshow-bisom-health-care
This repository is a fork of https://github.com/KitchenStories/vue-gallery-slideshow
Lightweight and responsive image gallery for Vue.js. Here, we add a zoom effect hovering over the image, and the possibility to rotate image.
Live Demo
https://jsfiddle.net/headione/szk73x45/show/
Installation
By package manager
npm i vue-gallery-slideshow-bisom-health-care
Usage
HTML
<div id="app">
<img
:class="
`image ${
image.hasOwnProperty('rotate')
? 'rotate' + image.rotate
: ''
}`"
v-for="(image, i) in images"
:src="image"
:key="i"
@click="index = i"
/>
<vue-gallery-slideshow
:images="images"
:index="index"
@close="index = null"
@rotate="rotate"
></vue-gallery-slideshow>
</div>
JavaScript
import VueGallerySlideshow from "vue-gallery-slideshow";
const app = new Vue({
el: "#app",
components: {
VueGallerySlideshow
},
data: {
images: [
"https://placekitten.com/801/800",
"https://placekitten.com/802/800",
"https://placekitten.com/803/800",
"https://placekitten.com/804/800",
"https://placekitten.com/805/800",
"https://placekitten.com/806/800",
"https://placekitten.com/807/800",
"https://placekitten.com/808/800",
"https://placekitten.com/809/800",
"https://placekitten.com/810/800"
],
index: null
}
});
Options
Adding alt text
If you want to add alt tags to the images, you can do by wrapping it in an object and adding an alt
property:
images: [
{ url: 'https://placem.at/places?w=800&h=600&random=1', alt:'My alt text' },
...
]
Adding rotate image
If you want to add the possibility to rotate the images, you can do by wrapping it in an object and adding an rotate
property equal to 0:
data: {
images: [
{ url: 'https://placem.at/places?w=800&h=600&random=1', rotate:0 },
...
],
index: null
},
methods: {
rotate(img) {
this.images[img.index].rotate = img.newAngle;
}
}
Adding description under image
If you want to add the possibility to show description under image, you can do by wrapping it in an object and adding an description
:
data: {
images: [
{ url: 'https://placem.at/places?w=800&h=600&random=1', description: 'my description here' },
...
],
index: null
},
Usage with Nuxt.js
When used with server-side rendering frameworks like Nuxt.js, please wrap the component in a <client-only>
element like shown below:
...
<img
class="image"
v-for="(image, i) in images"
:src="image"
:key="i"
@click="index = i"
/>
<client-only placeholder="Loading...">
<vgs :images="images" :index="index" @close="index = null" />
</client-only>
...
Contributing
Please refer to each project's style guidelines and guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.
- Fork the repo on GitHub
- Clone the project to your machine
- Commit changes to your branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes
NOTE: Be sure to merge the latest from "upstream" before making a pull request!
Author
Norman Sander and contribution of Mahieu Laurent
License
vue-gallery-slideshow is available under the MIT license. See the LICENSE file for more info.