Custom Button Icons

[topherbuckley]

Is there any way of making the content of a custom button something other than a text string? Or would I have to create a subdiv with some external js?

I tried using a path to an image for the "content" parameter while initializing the navbar but it doesn't resolve to anything but a text string inside the button div.

Here is the PSV init code for that trial:

viewer = new PhotoSphereViewer({
  container: 'photosphere',
  panorama: '/src/images/2.jpg',
  navbar: [
    'autorotate',
    'zoom',
    {
      id: 'room1',
      title: 'room1',
      className: 'button',
      content: '/src/images/icon.svg',
      onClick: function() {
       alert('Room 1');
      }
    },
    'caption',
    'fullscreen',
  ]
});

I also tried to assign an image path to the "icon" member of PSVNavBarbutton shown in the API , but that also didn't appear to work, which was expected due it being labeled readonly, but thought I'd try.

Here is my init for the PSV element for that trial:

viewer = new PhotoSphereViewer({
  container: 'photosphere',
  panorama: '/src/images/2.jpg',
  navbar: [
    'autorotate',
    'zoom',
    {
      id: 'room1',
      title: 'room1',
      className: 'button',
      icon: '/src/images/icon.svg',
      content: ' R1 ',
      onClick: function() {
       alert('Room 1');
      }
    },
    'caption',
    'fullscreen',
  ]
});

Let me know if you need the HTML or a live demo, but I don't get anything of use towards debugging from the console in either Firefox or Chrome.

npm packages: photo-sphere-viewer@3.2.3 three@0.86.0

web browser versions Firefox 54.0 (32 bit) Chrome 59.0.3071.115 (Official Build) (64-bit)

[topherbuckley]

Just updating: I also tried using CSS to fill the content with:

.button{
    content: url("/src/images/icon.svg");
}

This also did not work, although the image shows up just fine in the inspector for Chrome when inspecting the button.

[mistic100]

content is only applicable to ::before and ::after https://developer.mozilla.org/fr/docs/Web/CSS/content

---

use a background in CSS or set the button content to <img src="..."/>

[topherbuckley]

Got it! Thank you very much.