I've been attempting to integrate PhotoSwipe into my Aurelia project, but I'm struggling to get it working.
Within my aurelio.json file under bundles, I've included:
{
"name": "photoswipe",
"path": "../node_modules/photoswipe/dist/",
"main": "photoswipe.min",
"resources": [
"photoswipe-ui-default.min.js",
"photoswipe.css",
"default-skin/default-skin.css"
]
}
In my package.json, I have:
"@types/photoswipe": "^4.0.27",
"photoswipe": "^4.1.1"
In my .ts module, I've added:
import PhotoSwipe from 'photoswipe';
The code snippet I'm using to open the gallery is directly from the documentation:
imageClicked() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// building items array
var items = [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
// defining options (if required)
var options = {
index: 0 // starting at first slide
};
// Initializing and opening PhotoSwipe
var gallery = new PhotoSwipe<PhotoSwipeUI_Default.Options>(pswpElement as HTMLElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
The aurelia project compiles without errors, however, during runtime, I encounter this error:
Uncaught ReferenceError: PhotoSwipeUI_Default is not defined
I attempted adding an export statement in aurelia.json bundle:
"exports": [ "PhotoSwipe", "PhotoSwipeUI_Default" ]
But this did not resolve the issue.
I also experimented with various import statements:
import PhotoSwipeUI_Default from 'photoswipe'; // Now PhotoSwipeUI_Default is of type PhotoSwipe
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default' // Module not found compile error
import PhotoSwipeUI_Default from 'npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7000181f041f030719001530445e415e41">[email protected]</a>/dist/photoswipe-ui-default.min.js'; // Cannot find module
I feel stuck and my attempts to solve this problem are fruitless. What am I overlooking?