How to enable Flickity in a modal window when clicking on an IMG from a regular gallery?

Question

JavaScript

Good afternoon.
I'm trying to make a gallery so that when you click on each of the pictures (not on the button), the Flickity library opens to the full screen exactly from this clicked picture. And further, so that you can scroll through the entire gallery as a slider.
Those. the idea is to turn on Flickity by clicking in the window. When closed, turn it off.

I started to pick the script, but it looks like I'm doing something wrong.

my html:

<div class="gallery">
<span><img src="pictures/slide-1.jpg" alt=""></span>
<span><img src="pictures/slide-2.jpg" alt=""></span>
<span><img src="pictures/slide-3.jpg" alt=""></span>
<span><img src="pictures/slide-4.jpg" alt=""></span>
<span><img src="pictures/slide-5.jpg" alt=""></span>
</div>

CSS:

.gallery{
  font-size:0;
  text-align:center;
}
.gallery span{
  width:calc(25% - 1px);
  margin-right:1px;
  margin-bottom:1px;font-size:16px;
  display:inline-block;
  cursor:pointer;
  overflow:hidden;
}
.gallery span:nth-of-type(4n){
  margin-right:0;
}
.gallery img{
  max-width:100%;
  width:100%;
  display:block;
}

JS:

var flkty = new Flickity('.gallery');
  var galleryImg = document.querySelector('.gallery span');

  galleryImg.addEventListener("click", function(){
    if (galleryImg.clicked == true){
      
      new Flickity(flkty, {
        // options
      });

    } else if (galleryImg.clicked == true){

      flkty.destroy();

    }
  });