How to use the 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 Uintra / Uintra / src / Uintra20 / Content / src / app / feature / reusable / ui-elements / image-gallery / image-gallery.service.ts View on Github external
//     {
    //         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();
  }
}
github jirokun / survey-designer-js / lib / runtime / components / plain / ImagePopup.js View on Github external
$(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;
github kittn / generator-kittn / app / templates / src / skeletons / starterpack / general / js / init-photoswipe.js 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, options);
    gallery.init();
  };
github devld / go-drive / web / src / views / HandlerViews / ImageView.vue View on Github external
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
github RocketChat / Rocket.Chat / packages / rocketchat-ui / client / views / app / photoswipe.js View on Github external
const initGallery = (items, options) => {
		if (!currentGallery) {
			currentGallery = new PhotoSwipe(document.getElementById('pswp'), PhotoSwipeUI_Default, items, options);
			currentGallery.listen('destroy', () => {
				currentGallery = null;
			});
			currentGallery.init();
		}
	};
github w-ui / wui / packages / photoswipe / src / photoswipe.vue View on Github external
openPhotoSwipe(items, options) {
      let pswpElement = this.$el
      this.pswp = new PhotoSwipeFn(
        pswpElement,
        PhotoSwipeUIDefault,
        items,
        options
      )
      events.forEach(e => {
        this.pswp.listen(e, (...args) => {
          args.unshift(this)
          this.$emit(e, [...args])
        })
      })
      this.pswp.init()
    },
    close() {
github RocketChat / Rocket.Chat / app / ui / client / views / app / photoswipe.js View on Github external
const initGallery = (items, options) => {
		if (!currentGallery) {
			currentGallery = new PhotoSwipe(document.getElementById('pswp'), PhotoSwipeUI_Default, items, options);
			currentGallery.listen('destroy', () => {
				currentGallery = null;
			});
			currentGallery.init();
		}
	};

photoswipe

JavaScript gallery

MIT
Latest version published 3 months ago

Package Health Score

77 / 100
Full package analysis