SS 7.1 how to display the actual filename of photos in gallery pages

Site URL: https://www.lacascio.com/birds_gallery

How to display the photo file name below photos in SS 7.1 galleries.  I see this question asked often, but can not find a solution.  I believe that code-injection on gallery pages is the way to do this.  I found an old example that I placed in the gallery pages "Page Settings", "Advanced", code-injection space that does not work.  Here is the URL for that example.  https://sf.digital/squarespace-solutions/display-gallery-filenames   I will have thousands of images on my site, and can't manually add this data.

Any guidance is greatly appreciated.

Joe

You can use code this this link (use script code only, don't use CSS code)

14 minutes ago, tuanphan said:

Fantastic, thank you.  I clicked on a gallery page gear icon, clicked on advanced, and added the code you provided in the link.  It is working!  I'm using simple slide and the file numbers are showing up under the images in the slides.  Perfect.  I appreciate the help, thank you.

Here is the jQuery solution I use to accomplish this:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 

  <script>
    // Function to replace image-slide-title content with alt tag for images within sqs-gallery-container using jQuery
    $(document).ready(function() {
      $('.sqs-gallery-container img').each(function(index) {
        $('.image-slide-title').eq(index).html($(this).attr('alt').replace('.jpg', ''));
      });
    });
  </script>