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:


View example on CodePen →

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!