Custom navbar | Photo Sphere Viewer

autoload: true
title: PSV Navbar Demo

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

new Viewer({
    container: 'viewer',
    panorama: baseUrl + 'sphere.jpg',
    caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
    navbar: [
        'zoom',
        'move',
        {
            id: 'change',
            title: 'Change image',
            content: document.querySelector('#icon').innerText,
            onClick(viewer) {
                viewer.setPanorama(baseUrl + 'sphere-test.jpg', {
                    caption: '',
                    description: null,
                });
                viewer.navbar.getButton('change').hide();
            },
        },
        'caption',
        'fullscreen',
    ],
});

<script type="text/template" id="icon">
    <svg viewBox="160 160 432 432" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M376 162.89c-117.52 0-213.11 95.6-213.11 213.11 0 117.52 95.6 213.11 213.11 213.11 117.52 0 213.11-95.6 213.11-213.11 0-117.52-95.6-213.11-213.12-213.11zm0 390.7c-97.92 0-177.6-79.67-177.6-177.59S278.08 198.41 376 198.41c97.92 0 177.6 79.67 177.6 177.59S473.92 553.59 376 553.59zm149.43-195.35-25.1 25.1-17.77-17.75V376c0 58.77-47.8 106.56-106.55 106.56S269.45 434.75 269.45 376 317.25 269.45 376 269.45c20.8 0 40.16 6.07 56.57 16.4l-26.18 26.2a70.24 70.24 0 0 0-30.39-7.08c-39.16 0-71.04 31.86-71.04 71.04 0 39.17 31.88 71.03 71.04 71.03s71.05-31.86 71.05-71.04c0-3.24-.54-6.33-.97-9.45l-16.8 16.8-24.9-24.9L465 297.82z"/></svg>
</script>

# Custom navbar