3

I'm trying to use the PhotoSwipe library in my JSPM and TypeScript project with no success (I'm bleeding here.. ).

Using a modified version definition file for the PhotoSwipe from DefinitelyTyped (the original didn't work - got "PhotoSwipe not defined"), I came up with this:

declare var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
declare var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;

declare module PhotoSwipe {
    ...
    interface IPhotoSwipeStatic {

        new <T extends Options> (pswpElement: HTMLElement,
            uiConstructor: (new (pswp: PhotoSwipeInstance<T>, framework: UIFramework) => UI<T>) | boolean,
            items: PhotoSwipe.Item[],
            options: T): PhotoSwipeInstance<T>;
    }
}

declare class PhotoSwipeInstance<T extends PhotoSwipe.Options> {
    ...
}


declare module PhotoSwipeUI_Default {
    ...
    interface IPhotoSwipeUI_DefaultStatic {

        new (pswp: PhotoSwipeInstance<Options>, framework: PhotoSwipe.UIFramework): PhotoSwipeUI_DefaultInstance;
    }
}

declare class PhotoSwipeUI_DefaultInstance implements PhotoSwipe.UI<PhotoSwipeUI_Default.Options> {
    ...
}

Trying to import it, I can't seem to figure how to create an instance of PhotoSwipe with:

const photoSwipe = new PhotoSwipe(pswpElement, PhotoSwipe.PhotoSwipeUI, items, options);

1) 

declare module "photoswipe" {
    export = { PhotoSwipe, PhotoSwipeUI_Default };
}

and import "photoswipe"; => I get ReferenceError: PhotoSwipe is not defined

2) 

declare module "photoswipe" {

    export var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
    export var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;
}

and import { PhotoSwipe, PhotoSwipeUI_Default } from "photoswipe"; => I get TypeError: photoswipe_1.PhotoSwipe is not a constructor

Anyone ?

dror
  • 3,759
  • 6
  • 31
  • 45

3 Answers3

0

I know it's late maybe, but here's solution:

require([ 
        'path/to/photoswipe.js', 
        'path/to/photoswipe-ui-default.js' 
    ], function( PhotoSwipe, PhotoSwipeUI_Default ) {

    //      var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default ...
    //      gallery.init() 
    //      ...

});

source - http://photoswipe.com/documentation/getting-started.html

Also don't forget to import in some files before:

import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';

I was trying to do it by TypeScript way with global types and simple that:

import { PhotoSwipe, PhotoSwipeUI_Default } from 'photoswipe';

But it didn't work. I was having the same errors as you had.

Good luck!

PS - and yeah, I tested it with webpack but not JSPM.

Sergey Zykov
  • 687
  • 2
  • 9
  • 15
0
npm install photoswipe
npm install --save @types/photoswipe

install photoswipe and it's type defination from npm.

import photoSwipe from 'photoswipe'

then you can use it using above import statement.

hope this will help.

bhavin jalodara
  • 1,470
  • 9
  • 12
0

Install deps:

npm i photoswipe
npm i -D @types/photoswipe

Use it with:

import PhotoSwipe from 'photoswipe'
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
krisanalfa
  • 6,268
  • 2
  • 29
  • 38