Lightbox error – image appears outside of lightbox and remains after closing

Hi, I’m using the following code to link from a button to a gallery, I found the code at your example here: https://archetyped.com/know/slb-single-link-slideshows/

The code:

<style>
.button1 {
  background-color: #EED422;
  color: #000;
  border: 2px solid black;
}
.button1:hover {
  background-color: #000000;
  color: #EED422;
}
</style>

<a href="https://www.mysite/1.jpg" title="Slide 1"><button class="button button1">Button text</button></a>
<div style="display:none;">
<a href="https://www.mysite/2.jpg" title="x">Slide 2</a>
<a href="https://www.mysite/3.jpg" title="x">Slide 3</a>
</div>

The issue I am having is that the first image, the one at the front outside the div, renders first on the page, and then the lightbox pops up on top…. then once the lightbox has been closed, that image remains.

Have I made a silly error in my code? What could be causing that?

Thank you