Methods
PhotoSwipeLightbox methods
PhotoSwipeLightbox
loads PhotoSwipe
and chooses when it should be opened. If you want to use PhotoSwipe
without its lightbox component refer to this section.
const lightbox = new PhotoSwipeLightbox({
// options
});
// initialize lightbox, should be called only once,
// it's not included in the main constructor, so you may bind events before it
lightbox.init();
// Open slide by index
// refer to the section below for more info
lightbox.loadAndOpen(
0,
/* optional data source, */
/* optional click Point */
);
// unbinds all events, closes PhotoSwipe if it's open
lightbox.destroy();
Open lightbox via external button with loadAndOpen
PhotoSwipeLightbox
has a method loadAndOpen
. It accepts three arguments:
- Index of a slide to open (integer)
- Optional data source, see below for more details.
- Optional
Point
that determines where exactly the user clicked on the thumbnail (by default it is{ x: e.clientX, y: e.clientY }
of the correspondingclick
event).
If you use gallery
& children
options and you omit the second argument (do not provide data source), loadAndOpen
won't know which exactly gallery to use, since there might be multiple galleries on a page. To select a specific gallery you can do something like:
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const options = {
gallery: '#gallery--with-button',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();
const btn = document.createElement('button');
btn.type = 'button';
btn.innerText = 'open second image';
document.querySelector('#gallery--with-button').parentElement.prepend(btn);
btn.onclick = () => {
lightbox.loadAndOpen(1, {
gallery: document.querySelector('#gallery--with-button')
});
// You also can just trigger the native click
// document.querySelector('#gallery--with-button a:nth-of-type(2)').click();
};
PhotoSwipe core methods
You can access PhotoSwipe core instance only after lightbox is opened (for example, within beforeOpen
event).
Alternatively, you may use PhotoSwipe core without Lightbox, see example on Data Sources page.
const lightbox = new PhotoSwipeLightbox({
// options...
});
lightbox.init();
lightbox.on('beforeOpen', () => {
const pswp = lightbox.pswp;
// go to slide by index
pswp.goTo(3);
// go to next slide
pswp.next();
// go to previous slide
pswp.prev();
// close the PhotoSwipe (with animation, if enabled)
// PhotoSwipe will automatically destroy after it's closed
pswp.close();
// instantly close and destroy the PhotoSwipe
pswp.destroy();
// zoom slide to
pswp.currSlide.zoomTo(
1, // slide zoom level, 1 - original image size
{ x: 0, y: 0 }, // zoom center point
2000, // transition duration, can be 0
false // wether pan/zoom bounds should be ignored
);
// pan slide to
pswp.currSlide.panTo(
100, // x position
100, // y position
);
});
Dynamically adding or removing slides
PhotoSwipe parses and renders only nearby slides based on preload
option (but not less than 2 nearby).
The data about slides is stored within pswp.options.dataSource
and its structure depends on the source. If you initialize PhotoSwipe from DOM elements (via gallery
and children
options) the dataSource
will be:
pswp.options.dataSource = {
gallery: <Gallery element>
items: [
<Child element>,
<Child element>,
<Child element>,
// etc.
]
}
And if you pass array as a dataSource
, it'll be just an array and you may modify it the same way:
pswp.options.dataSource = [
{ src: 'image1.jpg', width: 100, height: 50 },
{ src: 'image2.jpg', width: 100, height: 50 },
{ src: 'image3.jpg', width: 100, height: 50 }
]
You may modify pswp.options.dataSource
array however you wish - push new items, replace, sort, pop, shift, etc.
If you modified slides that are currently active (current, next or previous) - call method refreshSlideContent(slideIndex)
to reload a slide by index. For example:
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
dataSource: [
{ src: 'https://dummyimage.com/800x600/555/fff/?text=1', width: 800, height: 600 },
{ src: 'https://dummyimage.com/800x600/555/fff/?text=2', width: 800, height: 600 },
{ src: 'https://dummyimage.com/800x600/555/fff/?text=3', width: 800, height: 600 },
{ src: 'https://dummyimage.com/800x600/555/fff/?text=4', width: 800, height: 600 },
{ src: 'https://dummyimage.com/800x600/555/fff/?text=5', width: 800, height: 600 },
],
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.on('uiRegister', () => {
const { pswp } = lightbox;
let replacedCount = 0;
pswp.ui.registerElement({
name: 'replaceCurrentSlide',
className: 'pswp__button--test-button',
order: 9,
isButton: true,
html: 'Replace Current Slide',
onClick: (event, el) => {
replacedCount++;
pswp.options.dataSource[pswp.currSlide.index] = {
src: 'https://dummyimage.com/800x600/555/fff/?text=New%20Slide%20' + replacedCount, width: 800,
height: 600
};
pswp.refreshSlideContent(pswp.currSlide.index);
}
});
let addedCount = 0;
pswp.ui.registerElement({
name: 'addSlide',
className: 'pswp__button--test-button',
order: 9,
isButton: true,
html: 'Add Slide',
onClick: (event, el) => {
addedCount++;
pswp.options.dataSource.push({
src: 'https://dummyimage.com/800x600/555/fff/?text=Added%20slide%20' + addedCount, width: 800,
height: 600
});
pswp.refreshSlideContent(pswp.getNumItems() - 1);
}
});
});
lightbox.init();
document.querySelector('#btn-add-remove-test').onclick = () => {
lightbox.loadAndOpen(0);
};
button.pswp__button--test-button {
background: #136912 !important;
font-size: 20px;
color: #fff;
}
Alternatively, you may omit dataSource
option entirely and use filters to supply data and number of items, example on the Data Sources page.
UI
Refer to Styling page on how to adjust the UI (add buttons, modify icons, etc).