Skip to main content

Caption

For now, PhotoSwipe does not support caption out of box, example below shows how to add it via API.

Please make sure that important captions are always accessible without PhotoSwipe — the lightbox is disabled in unsupported browsers.

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const options = {
gallery:'#gallery--with-custom-caption',
children:'.pswp-gallery__item',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.on('uiRegister', function() {
lightbox.pswp.ui.registerElement({
name: 'custom-caption',
order: 9,
isButton: false,
appendTo: 'root',
html: 'Caption text',
onInit: (el, pswp) => {
lightbox.pswp.on('change', () => {
const currSlideElement = lightbox.pswp.currSlide.data.element;
let captionHTML = '';
if (currSlideElement) {
const hiddenCaption = currSlideElement.querySelector('.hidden-caption-content');
if (hiddenCaption) {
// get caption from element with class hidden-caption-content
captionHTML = hiddenCaption.innerHTML;
} else {
// get caption from alt attribute
captionHTML = currSlideElement.querySelector('img').getAttribute('alt');
}
}
el.innerHTML = captionHTML || '';
});
}
});
});
lightbox.init();
.pswp__custom-caption {
background: rgba(75, 150, 75, 0.75);
font-size: 16px;
color: #fff;
width: calc(100% - 32px);
max-width: 400px;
padding: 2px 8px;
border-radius: 4px;
position: absolute;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
}
.pswp__custom-caption a {
color: #fff;
text-decoration: underline;
}
.hidden-caption-content {
display: none;
}
<div class="pswp-gallery pswp-gallery--with-caption" id="gallery--with-custom-caption">
<div class="pswp-gallery__item">
<a
href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
data-pswp-width="1669"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="Caption 1" />
</a>
<div class="hidden-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="https://example.com" target="_blank" rel="nofollow">Test link &rarr;</a></div>
</div>

<div class="pswp-gallery__item">
<a
href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1666"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" alt="Caption 2" />
</a>
</div>

<div class="pswp-gallery__item">
<a
href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-200.jpg" alt="Caption 3" />
</a>
</div>

<div class="pswp-gallery__item">
<a
href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1668"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-200.jpg" alt="Caption 4" />
</a>
</div>


</div>

// TODO