Caption not updated on gallery image change

[mowabidev]

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>

[dimsemenov]

I don't see what's wrong at first glance, please provide a reduced test case.

[mowabidev]

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.

[dimsemenov]

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

[mowabidev]

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!