Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Making captions appear only in lightbox for 7.1 grid gallery


Recommended Posts

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? 

Link to comment
  • 2 weeks later...
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 3 weeks later...
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>

 

Edited by mathildenicoline
Wrong code
Link to comment
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)

 

 

Edited by mathildenicoline
removing copyrighted photo
Link to comment
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)

 

Skjermbilde 2021-04-20 kl. 15.43.08.png

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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...