How to use the photoswipe/dist/photoswipe function in photoswipe

To help you get started, we’ve selected a few photoswipe examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github TaleLin / lin-cms-vue / src / components / base / preview / preview.vue View on Github external
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) {
github bravelin / bravelin.github.io / source / src / components / Preview.vue View on Github external
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)
                    })
                }
            }
        },
github LS1231 / vue-preview / src / index.js View on Github external
} 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
github rap2hpoutre / vue-picture-swipe / src / VuePictureSwipe.vue View on Github external
}
          } 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;
        };
github 826327700 / vue-photo-preview / src / lib / index.js View on Github external
} else {
						options.index = parseInt(index, 10);
					}

					// exit if index not found
					if(isNaN(options.index)) {
						return;
					}
					options=this.extend(options,opts)

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

					// Pass data to PhotoSwipe and initialize it
					gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
					Vue.prototype.$preview.self=gallery
					// see: http://photoswipe.com/documentation/responsive-images.html
					var realViewportWidth,
						useLargeImages = false,
						firstResize = true,
						imageSrcWillChange;

					gallery.listen('beforeResize', function() {

						var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
						dpiRatio = Math.min(dpiRatio, 2.5);
						realViewportWidth = gallery.viewportSize.x * dpiRatio;

						if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
							if(!useLargeImages) {
								useLargeImages = true;
github CoderMikeHe / vue-wechat / src / components / previewer / Previewer.vue View on Github external
let options = objectAssign(
        {
          history: false,
          shareEl: false,
          counterEl: false,
          arrowEl: false,
          closeEl: false,
          captionEl: false,
          fullscreenEl: false,
          tapToClose: true,
          zoomEl: false,
          index: index
        },
        this.options
      );
      this.photoswipe = new PhotoSwipe(this.$el, UI, this.imgs, options);

      this.photoswipe.listen("gettingData", function(index, item) {
        console.log("gettingData");
        if (!item.w || !item.h || item.w < 1 || item.h < 1) {
          const img = new Image();
          img.onload = function() {
            item.w = this.width;
            item.h = this.height;
            self.photoswipe.updateSize(true);
          };
          img.src = item.src;
        }
      });

      this.photoswipe.init();
github LS1231 / vue-preview / src / plugins / preview / preview.vue View on Github external
captionEl: false,
        fullscreenEl: false,
        history: false,
        shareEl: false,
        tapToClose: true
      }) {
        let options = Object.assign({
          index: index,
          getThumbBoundsFn (index) {
            let thumbnail = document.querySelectorAll('.preview-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        }, params)
        this.photoswipe = new PhotoSwipe(this.$el, UI, list, options)
        this.photoswipe.init()
      },
      close () {

photoswipe

JavaScript gallery

MIT
Latest version published 5 months ago

Package Health Score

75 / 100
Full package analysis