Image caption and lightbox - Support | Kriesi.at

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
February 18, 2024 at 9:37 pm #1434705
xeovision
Participant
Hi,
need to palce a caption below the image. Activate the caption in the image settings and use this css:
```
.av-image-caption-overlay {
  bottom: -20px !important;
  font-size: 10px !important;
  height: auto !important;
  left: 50% !important;
  transform: translate(-50%) !important;
  width: 100% !important; 
  text-align: justify !important;
}
```
…works fine but when i activate the Lightbox, it dissapear.
February 18, 2024 at 9:55 pm #1434709

Mike
Moderator

Hey Sebastian,
The lightbox uses the image title not the caption, check the media library for the image and ensure the title field contains the text.

Best regards,
Mike

February 18, 2024 at 10:11 pm #1434714

xeovision
Participant

HI .. i have always added text to all media field types. But only the yellow alt text block is shown .. i need such caption under some images. Without making the image clickable (zoom) the script works…

February 19, 2024 at 1:51 am #1434723

Guenni007
Participant

do you like to see only the caption in the light box – or only caption if present – if not show title – or show both title and caption?

February 19, 2024 at 5:37 am #1434741

Ismael
Moderator

Hi,

What do you mean by “yellow alt text block”? Please provide a screenshot and the link to the page so that we can review it properly. Please note that you need to manually enable the Content > Image Caption settings and specify the text in the Caption field in order to display captions above the images.

Best regards,
Ismael

February 19, 2024 at 10:03 am #1434752

xeovision
Participant

OK, let me specify that.
– With the yellow box i mean the alt=”” atribute that is shown when going with mouse over image

This is the setting i use in the image

This is the view on the page.
Left= sub texte added + activated lightbox => but no sub text visible
Right= sub text added, no lightbox activated => sub text visible

I would like to use the lightbox AND the sub text on the images

February 19, 2024 at 10:23 am #1434754

Guenni007
Participant

Again my question : you like to have on lightbox only your caption – or do you like to have a combination of title + caption or alt + caption ?
see: https://webers-testseite.de/images-with-caption/

The trick is to have an own lightbox behavior on that links.
In the script, I first tested preventing the original event with preventDefault. This sometimes worked – but sometimes not. I therefore set the noLightbox class for these links. This removes the class lightbox-added and I can then program a new behavior. Including a new markup (here, however, it is the standard markup).

February 19, 2024 at 10:56 am #1434758

xeovision
Participant

Thanks for the prototype, i would say, if caption is activated then it should be displayed below the image, also nice in the lightbox itself.
If no caption is activated then show nothing.

But both behavoir should work with lightbox and without lightbox function

February 19, 2024 at 11:42 am #1434765

Mike
Moderator

Hi,
The lightbox uses the image title not the caption by default, these are two different things, this is the caption:

you misunderstand what I meant by the image title in the media library:

this is the title showing in the lightbox:

this is the intended behavior because sometimes you don’t want a caption but still want a lightbox title.
So if you want the caption to so in the lightbox were the title goes, please follow Guenni007’s example.

Best regards,
Mike

February 19, 2024 at 9:54 pm #1434817

Guenni007
Participant

i changed the code on my example page – but i do not know how to hide mfp-bottom-bar if mfp-title is empty.

February 19, 2024 at 10:24 pm #1434819

mustafa-alani
Participant

Hello
The cell image in the grid view does not display fully in mobile view. How can I make it show fully stretched, as it currently shows cropped?
Thanks

February 19, 2024 at 11:49 pm #1434824

xeovision
Participant

Looks good but as i understand, every image ID needs to be added to the css right? There is no possibility to set it for all lightbox images?!

February 20, 2024 at 3:53 am #1434834
Ismael
Moderator
Hi,

every image ID needs to be added to the css right?

Are you referring to @Guenni007’s modification? You can remove the .page-id-xxxxx selector from the css code if you want the changes to apply globally.
```
#top .with-lightbox-caption .avia_image {
  overflow: visible !important;
}

#top .av-image-caption-overlay {
  bottom: -30px !important;
  font-size: 10px !important;
  height: auto !important;
  width: 100% !important; 
  text-align: justify !important;
}

#top .avia-image-overlay-wrap:hover .av-image-caption-overlay,
#top .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
  opacity: 1 !important;
}
```
You should also remove the is_page conditional function from the animated_enfold_lightbox callback.
```
function animated_enfold_lightbox() {
?>
<script type="text/javascript">
(function($){
 // rest of the code
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'animated_enfold_lightbox', 999);
```
Best regards,
Ismael
February 20, 2024 at 8:54 am #1434863

Guenni007
Participant

yes – please excuse me for not explicitly mentioning this.

February 20, 2024 at 10:44 am #1434876

xeovision
Participant

PERFECT. Many many thanks for this support.

..we can close this here

February 20, 2024 at 11:28 am #1434880

Mike
Moderator

Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Image caption and lightbox’ is closed to new replies.