Stop the multiple display of an element in VueJS - Fancybox

Question

I am looking for how to correctly integrate fancybox on a Vuejs carousel image gallery. But somehow i don't know, I get a display of multiple image items (actually all images in my array) from carousel to swipe instead of only displaying the chosen item in the carousel? Thumbails display fine.

Here is my html code

  <div class="fancybox" data-fancybox="gallery" 
    v-for="(image, index) in images"
    :key="index"
    :href="image">
  <!-- <a class="fancybox" data-fancybox="gallery" :href="currentImage"> -->
    <img id="featured" :src="currentImage" alt="">
  </div>

  <div id="slide-wrapper">
    <img id="slideLeft" class="arrow" src="./images/arrow-left.png" alt="">
    <div id="slider">
      <img v-for="(image, index) in images" :src="image" alt="" :key="index"
        :class="['thumbnail', (activeImage == index) ? 'active' : '']" @click="activateImage(index)">
    </div>
    <img id="slideRight" class="arrow" src="./images/arrow-right.png" alt="">
  </div>
</div>

Here is the script

new Vue({
  el: '#app',
  data: {
    images: [
      './images/lordea-home-01-min.jpg',
      './images/lordea-home-02-min.jpg',
      './images/lordea-home-03-min.jpg',
      './images/lordea-home-04-min.jpg',
      './images/lordea-home-05-min.jpg',
      './images/lordea-home-06-min.jpg',
      './images/lordea-home-07-min.jpg',
      './images/lordea-home-08-min.jpg',
      './images/cam-house-01.jpg',
      './images/cam-house-02.jpg',
    ],
    activeImage: 0
  },
  
  computed: {
      currentImage() {
          return this.images[this.activeImage];
      }
  },
  methods: {
      // nextImage() {
      //     var active = this.activeImage + 1;
      //     if(active >= this.images.length) {
      //         active = 0;
      //     }
      //     this.activateImage(active);
      // },
      // prevImage() {
      //     var active = this.activeImage - 1;
      //     if(active < 0) {
      //         active = this.images.length - 1;
      //     }
      //     this.activateImage(active);
      // },
      activateImage(imageIndex) {
          this.activeImage = imageIndex;
      }
  },
  mounted() {

    let thumbnails = document.getElementsByClassName('thumbnail')
    
    let activeImages = document.getElementsByClassName('active')

    for (var i=0; i < thumbnails.length; i++ ) {

      thumbnails[i].addEventListener('click', function () {
        // console.log(activeImages)

        if (activeImages.length > 0) {
          activeImages[0].classList.remove('active')
        }

        this.classList.add('active')
        document.getElementById('featured').src = this.src
      })
    }

    let buttonRight = document.getElementById ('slideRight');
    let buttonLeft = document.getElementById ('slideLeft');

    buttonLeft.addEventListener('click', function () {
      document.getElementById('slider').scrollLeft -= 400
    })

    buttonRight.addEventListener('click', function () {
      document.getElementById('slider').scrollLeft += 400
    }),


    $(document).ready(function() {
      $(".fancybox").fancybox(
        {
          infobar: false,
          buttons: [
            "zoom",
            "share",
            "slideShow",
            "fullScreen",
            "download",
            "thumbs",
            "close"
          ]
        }
      );
    });
    
    // $(".fancybox").fancybox ({
    //   infobar: false,
    //   buttons: [
    //     "zoom",
    //     "share",
    //     "slideShow",
    //     "fullScreen",
    //     "download",
    //     "thumbs",
    //     "close"
    //   ]
    // });
  },
});

Thank you for your help.

Answer 1

I don't really know FancyBox but is it a Jquery component?

Do you really have to integrate FancyBox?

I'd suggest you to create your own carrousel, you seem to have the correct logic to do it