Making captions appear only in lightbox for 7.1 grid gallery

I'm helping set up a new site for my mom who is an artist. Our goal is to format her galleries so that image captions are not visible in the grid gallery overview, but do appear when an image is enlarged into lightbox. This was easy to do on my older 7.0 site, but we're having trouble on her newer 7.1 site.  Any help on how to do this?  Or is it possible to opt for 7.0 when setting up a new site currently? 

Hi. This will require Business Plan + script code. Can you share link to your site?

On 3/29/2021 at 2:45 AM, tuanphan said:

Hi. This will require Business Plan + script code. Can you share link to your site?

Hi @tuanphan

I have the same issue, can you help me??

Site https://radish-poodle-5ftl.squarespace.com/is-this-my-habitat

Password: pandele

Have this code from before, but it does not work?

<style>
  .lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-family: europa;
  }
</style>
<script>
  $(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});
</script>

On 4/19/2021 at 11:17 AM, mathildenicoline said:

Hi @tuanphan

I have the same issue, can you help me??

Site https://radish-poodle-5ftl.squarespace.com/is-this-my-habitat

Password: pandele

Have this code from before, but it does not work?

<style>
  .lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-family: europa;
  }
</style>
<script>
  $(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});
</script>

 

Ok! I fixed my own problem, I had to paste it to the footer and not header code injection 🙈

But! I have a new problem of course. The text appears on top of the pictures, any way to either move the text down or the image up? Tried to add some margin to the code, but I dont know enough. 

Any thoughts? @tuanphan

(I added a transparent background to the text just for now)

4 hours ago, mathildenicoline said:

Ok! I fixed my own problem, I had to paste it to the footer and not header code injection 🙈

But! I have a new problem of course. The text appears on top of the pictures, any way to either move the text down or the image up? Tried to add some margin to the code, but I dont know enough. 

Any thoughts? @tuanphan

(I added a transparent background to the text just for now)

 

Now I am just talking to myself, found the solution from TuanPhan himself here: