v5-Beta Option to hide or replace the counter

[acwolff]

Is there an option to hide the counter in the upper left corner of the lightbox?

In fact I like to use that field to show other information, for instance the filename, see my PhotoSwipe 4 test album

Is there an option to display my own text for instance in the change event?

[dimsemenov]

you can do counter:false, or hide it via CSS. Default one is pretty simple https://github.com/dimsemenov/PhotoSwipe/blob/v5-beta/src/js/ui/counter-indicator.js

[acwolff]

Thanks for your hint @dimsemenov.

I tried this:

    lightbox.on('change', () => {
        const x = document.querySelector('.pswp__counter');
        x.innerHTML += " extra text";
    });

but I see no effect.

Why is this not working?

Upate:

I have it finally working with this code:

import PhotoSwipeLightbox from './res/photoswipe-lightbox.esm.js'; 
const options = { 
  gallerySelector: '#gallery', 
  childSelector: 'a', 
  counter: false,
  pswpModule: './photoswipe.esm.js'
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.on('uiRegister', function() {
    lightbox.pswp.ui.registerElement({
      name: 'Mycounter',
      title: 'Extra information',
      order: 5,
      isButton: false,
      onInit: (counterElement, pswp) => {
          pswp.on('change', () => {
          	  slide_index=lightbox.pswp.currSlide.index;
          	  counterElement.innerHTML = "";
          	  counterElement.innerHTML += (pswp.currIndex + 1)  + "/"  + pswp.getNumItems()  + " ";
          	  counterElement.innerHTML += infoFn[slide_index]+ " ";
          });
      }

and this CSS:

.pswp__Mycounter {
    color: #ffffff;
    background: rgba(51,51,51,0.49803922);
    font-size:20px;
    height: 60px;
    line-height: 60px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0px;
    margin-left: 0px;
    opacity: 0.85;
    margin-right: auto; /* align left */
}

You can see the result in this test album.

@dimsemenov is this the correct way to do this or is there a better method?