Articles in this section

See more

Add caption below lightbox gallery item

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

To place a caption below the thumbnail image in the Gallery Grid (captions within Lightbox are already supported), follow this hack.

lightbox-caption.png


Step 1: Caption your image file

You can add a caption when uploading the image, or add it later in your Media Library.

Step 2: Add custom code

 you can place this code in the Global Javascript Editor located under Customize > Advanced:

jQuery('.semplice-lightbox').find('.lightbox-item').after(function() {
  return jQuery('<p class="lightbox-grid-caption">').text(
    jQuery(this).attr('caption')
  );
});


Step 3: Style the caption with CSS

Style the caption with CSS by targeting the 'lightbox-grid-caption' class name. Now you're done!

 

Check out our Semplice Playground to find more hacks like this :)

Related articles