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="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:

• To avoid conflicts with third-party modules, slide that has html property, should not have src (image) property.
• PhotoSwipe is designed for images, not as a scroller of text content. Use "custom HTML" feature as an addition, for example for slide with related galleries, an introductory slide, or advertisements BETWEEN images.
• It's strongly not recommended to add video or audio elements using this method (including YouTube, Vimeo etc. iframes). As HTML5 video blocks touch events over it in many mobile browsers (user won't be able to swipe it). If you really need to have video in PhotoSwipe, you may add it as modal that appears when user taps on current slide, you can dynamically create modal in DOM and append it after .pswp__scroll-wrap element.
• If you have initial zoom-in/zoom-out transition enabled, PhotoSwipe will automatically disable it if current slide has html, simple fade transition will be used instead.
• By default PhotoSwipe will allow click event just on links (<a>) and their child elements. To change this behavior look into isClickableElement option or preventDragEvent event.
• Zoom of HTML slides is not supported, yet.

Example:

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