How to use photoswipe - 10 common examples

//     {
    //         src: 'https://placekitten.com/1200/900',
    //         w: 1200,
    //         h: 900
    //     }
    // ];

    // define options (if needed)
    let options = {
        // optionName: 'option value'
        // for example:
        index: index // start at first slide
    };

    // Initializes and opens PhotoSwipe
    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
  }
}

$(this.el).on('click', 'img[data-popup-url]', (e) => {
      const $targets = $('#content').find('img[data-popup-url]');
      const urls = $targets.map((i, imgEl) => ({ src: $(imgEl).data('popup-url'), w: 0, h: 0 }));
      const items = urls.toArray();
      const options = {
        history: false,
        focus: false,
        showAnimationDuration: 0,
        hideAnimationDuration: 0,
      };

      const container = document.getElementsByClassName('pswp')[0];
      const gallery = new PhotoSwipe(container, PhotoSwipeUIDefault, items, options);
      gallery.listen('imageLoadComplete', (index, item) => {
        const img = new Image();
        img.onload = () => {
          // itemのwidth, heightが必須なのでここで設定する
          item.w = img.width;
          item.h = img.height;
          gallery.updateSize(true);
        };
        img.src = item.src;
      });

      gallery.init();
      gallery.listen('afterChange', () => {
        const target = $(this.el).find('img[data-popup-url]').filter((i, imgEl) => {
          const src = $(imgEl).data('popup-url');
          return src === gallery.currItem.src;

}
    } else {
      options.index = parseInt(index, 10);
    }

    // exit if index not found
    if( isNaN(options.index) ) {
      return;
    }

    if(disableAnimation) {
      options.showAnimationDuration = 0;
    }

    // Pass data to PhotoSwipe and initialize it
    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
  };

const items = await this.transThumbnailElements()
      let photoSwipeOptions = {
        galleryUID: this.radom,
        getThumbBoundsFn: function(index) {
          let thumbnail = items[index].el
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          let rect = thumbnail.getBoundingClientRect()
          return {
            x: rect.left,
            y: rect.top + pageYScroll,
            w: rect.width,
          }
        },
        ...options,
      }
      this.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, photoSwipeOptions)
      this.gallery.init()
      loadingInstance.close()
      // Gallery starts closing
      this.gallery.listen('close', () => {
        if (this.gallery) {
          this.gallery.close()
          this.gallery = null
          this.slides = []
        }
        that.$emit('close')
      })
    },
    async getWH(elem) {

isShow (newVal, oldVal) {
                const that = this
                if (newVal) {
                    let gallery = new PhotoSwipe(that.$el, PhotoSwipeUI, that.list, {
                        index: that.index || 0
                    })
                    gallery.init()
                    gallery.listen('close', () => { // 关闭的时候isShow置为false
                        that.$emit('update:isShow', false)
                    })
                }
            }
        },

} else {
                // in URL indexes start from 1
                photoSwipeOptions.index = parseInt(index, 10) - 1
              }
            } else {
              photoSwipeOptions.index = parseInt(index, 10)
            }
            // exit if index not found
            if (isNaN(photoSwipeOptions.index)) {
              return
            }
            if (disableAnimation) {
              photoSwipeOptions.showAnimationDuration = 0
            }
            // Pass data to PhotoSwipe and initialize it
            gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, photoSwipeOptions)
            gallery.init()
            // Gallery starts closing
            gallery.listen('close', function () {
              self.$emit('close')
            })
          }
          // loop through all gallery elements and bind events

}
          } else {
            options.index = parseInt(index, 10);
          }

          // exit if index not found
          if (isNaN(options.index)) {
            return;
          }

          if (disableAnimation) {
            options.showAnimationDuration = 0;
          }

          // Pass data to PhotoSwipe and initialize it
          gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, Object.assign(options, that.options));
          gallery.listen('gettingData', function(index, item) {
            if (item.w < 1 || item.h < 1) { // unknown size
              let img = new Image();
              img.onload = function() { // will get size after load
                item.w = this.width; // set image width
                item.h = this.height; // set image height
                gallery.invalidateCurrItems(); // reinit Items
                gallery.updateSize(true); // reinit Items
              };
              img.src = item.src; // let's download image
            }
          });
          gallery.init();
          that.pswp = gallery;
        };

}
		} else {
			options.index = parseInt(index, 10)
		}

		// exit if index not found
		if (isNaN(options.index)) {
			return
		}

		if (disableAnimation) {
			options.showAnimationDuration = 0
		}

		// Pass data to PhotoSwipe and initialize it
		gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options)
		gallery.init()
		// gallery.bg.style.backgroundColor = gallery.currItem.bgColor

		// gallery.listen('beforeChange', () => {
		//   gallery.bg.style.backgroundColor = gallery.currItem.bgColor
		// })
	}

}
    } else {
      options.index = parseInt(index, 10)
    }

    // exit if index not found
    if (isNaN(options.index)) {
      return
    }

    if (disableAnimation) {
      options.showAnimationDuration = 0
    }

    // Pass data to PhotoSwipe and initialize it
    let gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, options)
    gallery.init()
  }

initPhotoSwipe() {
      this.index = this.images.findIndex((f) => f.name === this.filename)
      const basePath = dir(this.path)
      const ps = new PhotoSwipe(
        this.$refs.ps,
        PhotoSwipeUIDefault,
        this.images.map((i) => ({
          src: fileUrl(pathJoin(basePath, i.name), i.meta.access_key),
          w: 0,
          h: 0,
        })),
        {
          history: false,
          index: this.index,
          loop: false,
        }
      )
      ps.listen('gettingData', (index, item) => {
        // https://github.com/dimsemenov/PhotoSwipe/issues/796
        if (item.w > 0 && item.h > 0) return