This component is a simple wrapper for the awesome Photoswipe. It's a Vue 3 plugin that displays a gallery of image with swipe function (and more). Includes lazy (smart) loading (mobile friendly) and thumbnails.
npm install --save vue3-picture-swipe
You can use it as you want. Here are some examples if you want to use it inline, or in a .vue
file component or even with Laravel.
You can using it inline:
<vue-picture-swipe :items="[
{src: 'http://example.org/xl.jpg',thumbnail: 'http://example.org/sm1.jpg',w: 600,h: 400, title: 'Will be used for caption'},
{src: 'http://example.org/xxl.jpg',thumbnail: 'http://example.org/sm2.jpg',w: 1200,h: 900}
]"></vue-picture-swipe>
Just remember to register the component:
import VuePictureSwipe from 'vue3-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);
new Vue({
el: '#app'
})
Create a component Example.vue
. Then paste this:
<template>
<vue-picture-swipe :items="items"></vue-picture-swipe>
</template>
<script>
import VuePictureSwipe from 'vue3-picture-swipe';
export default {
data() {
return {
items: [{
src: 'http://via.placeholder.com/600x400',
thumbnail: 'http://via.placeholder.com/64x64',
w: 600,
h: 400,
alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
},
{
src: 'http://via.placeholder.com/1200x900',
thumbnail: 'http://via.placeholder.com/64x64',
w: 1200,
h: 900,
htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>' // optional, insert your html after tag <a> if you need it
}
]};
}
}
</script>
Edit resources/assets/js/app.js
and add this just before the new Vue
lines.
import VuePictureSwipe from 'vue3-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);
Use options
for Photoswipe options.
<!-- Disable "share" buttons. -->
<vue-picture-swipe :options="{shareEl: false}"></vue-picture-swipe>
You can access the PhotoSwipe instance via setting a ref, the instance object is exposed as pswp
.
<vue-picture-swipe ref="pictureSwipe"></vue-picture-swipe>
this.$refs.pictureSwipe.pswp
open | Attributes | Listen to | Description |
---|---|---|---|
Open | none | @open | Emitted after gallery opens |
Close | none | @close | Emitted after gallery closes |
- Fork this repository.
- Create new branch with feature name.
- Run
npm install
andnpm run dev
. - Create your feature.
- Commit and set commit message with feature name.
- Push your code to your fork repository.
- Create pull request. 🙂
If you like this project, You can support me with starring ⭐ this repository.
Developed with ❤️ and ☕️