停止在Vuejs -Fancybox中的多个元素显示

Question

我正在寻找如何正确集成fancybox在Vuejs旋转木马图像库上。但是我不知道，我从轮播到滑动的多个图像项目（实际上是所有阵列中的所有图像）的显示，而不仅仅是在轮播中显示所选项目？ 缩略图很好。

这是我的HTML代码，

  <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>

这是脚本

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"
    //   ]
    // });
  },
});

谢谢您的帮助。

Answer 1

我真的不知道花哨的盒子，但是它是jQuery组件吗？

您真的必须集成花式盒吗？

我建议您创建自己的携带，您似乎有正确的逻辑