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="http://example.com">content</a></h1></div>'
	},

	// slide 2 with image
	{
		src: 'path/to/image.jpg',
		w:600,
		h:200
	}
];


// 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
gallery.init();

Additional important notes:

Example:

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!