Photoswipe adding close button to photo and hiding button bar - button

Question

I would like to remove the button bar at the top (I can't get it to display anyway) and replace it with a simple close button on the top right corner of the photo. How wis this best done? Thanks.

Answer 1

Please show your code or give more information as to why you can't get the top bar to display if you want help with that.
The best way to do what your asking is to simply remove all buttons except for close from the HTML code on the page with your gallery.
See this code in the example documentation:
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
You want to delete or comment out the lines with the buttons you don't want. I prefer to comment it out so they are recoverable if you decide you want them later. In that case if you only want the close button it should look like this:
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
<!--<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>-->
<!--<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>-->