Custom HTML Content in Slides

To make PhotoSwipe display HTML content in slides you need to define html property in slide object. It should contain HTML string or DOM element object.

var items = [
    // slide 1 with HTML
        html: '<div><h1>Any HTML <a href="">content</a></h1></div>'

    // slide 2 with image
        src: 'path/to/image.jpg',

// initialise as usual
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

// You don't necessarily need to have "html" property in slide object initially.
// You may create it dynamically in gettingData event:
    gallery.listen('gettingData', function(index, item) {
        if(index === 3) {
            item.html = '<div>Dynamically generated HTML ' + Math.random() + '</div>';


// Note that init() method is called after gettingData event is bound

Additional important notes:


Tip: you may download the example from CodePen to play with it locally (Edit on CodePen -> Share -> Export .zip).

Know how this page can be improved? Suggest an edit!

</> with <3 in by @dimsemenov