Caption not updated on gallery image change
mowabidev opened this issue · comments
Hello,
I try to use the plugin in a Vue application. The gallery itself works fine. But when I try to use the caption plugin, the caption is not updated when the gallery image changes. Can you tell me how to proceed? Here is my code.
<template>
<div id="projects" class="projects col-12 col-md-8 offset-md-2">
<div v-for="project in projects" :key="project.id" :id="'project-' + project.id" class="project" data-aos="fade-in">
<div v-html="project.name"></div>
<p>
<button class="btn btn-open-pswp" :data-project="project.id" @click="initGallery">{{ lang == 'fr' ? 'Voir quelques images' : 'See some images' }}</button>
</p>
</div>
</div>
</template>
<script>
import PhotoSwipeLightbox from '../lib/photoswipe/photoswipe-lightbox.esm';
import PhotoSwipeDynamicCaption from '../lib/photoswipe/photoswipe-dynamic-caption-plugin.esm';
import '../lib/photoswipe/photoswipe.css';
import '../lib/photoswipe/photoswipe-dynamic-caption-plugin.css';
export default {
name: 'ProjectsList',
setup() {
const projects = ref([]);
const lang = document.documentElement.getAttribute('lang')
function initGallery(e) {
let btn = e.target
let id = e.target.dataset.project;
let source = [];
fetch('/api/projects/'+ id + '/gallery')
.then(resp => resp.json())
.then(function(data){
let images = data['hydra:member'];
console.log(images)
images.forEach(image => {
let src = {
src: '/assets/img/projects/' + image.image,
width: image.width,
height: image.height,
alt: image.name ? image.name : 'Image de gallerie',
caption: image.caption ? image.caption : 'My text Caption'
}
source.push(src)
})
setTimeout(() => {
const options = {
dataSource: source,
pswpModule: () => import('../lib/photoswipe/photoswipe.esm.js'),
};
const lightbox = new PhotoSwipeLightbox(options);
let captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
// Plugins options, for example:
type: 'auto',
captionContent: () => {
return lightbox.pswp.currSlide.data.caption;
}
});
lightbox.init();
lightbox.loadAndOpen(0); // defines start slide index
}, 500)
})
.catch(function(e){
console.log(e)
})
}
onMounted(() => {
fetch('/api/projects?lang=' + lang)
.then(resp => resp.json())
.then(function(data){
projects.value = data['hydra:member']
})
.catch(function(e){
console.log(e)
})
})
// expose to template and other options API hooks
return {
lang,
projects,
initGallery,
}
},
}
</script>
I don't see what's wrong at first glance, please provide a reduced test case.
Thank @dimsemenov you for your quick response.
I just created a codepen that you can find here https://codepen.io/mowabi/pen/WNzdgae.
But strangely, on the codepen, I notice that the captions change, but not with the correct images. First, for a few seconds, it maintains the same caption for all images and then they change, but do not match the images.
You're using currSlide
for captionContent
option, because of that nearby slides get "current" slide caption too. Should be something like:
captionContent: (slide) => slide.data.author
You are right @dimsemenov . That's the problem. But I remember using slide
and it was returning slide is undefined
error. I must have used it wrong. Thank you very much. It works like a charm!