![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
February 18, 2024 at 9:37 pm #1434705
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 #1434709Hey 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,
MikeFebruary 18, 2024 at 10:11 pm #1434714HI .. 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 #1434723do 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 #1434741Hi,
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,
IsmaelFebruary 19, 2024 at 10:03 am #1434752OK, let me specify that.
– With the yellow box i mean the alt=”” atribute that is shown when going with mouse over imageThis 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 #1434754Again 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 #1434758Thanks 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 #1434765Hi,
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,
MikeFebruary 19, 2024 at 9:54 pm #1434817i 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 #1434819Hello
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?
ThanksFebruary 19, 2024 at 11:49 pm #1434824Looks 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 #1434834Hi,
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,
IsmaelFebruary 20, 2024 at 8:54 am #1434863yes – please excuse me for not explicitly mentioning this.
February 20, 2024 at 10:44 am #1434876PERFECT. Many many thanks for this support.
..we can close this here
February 20, 2024 at 11:28 am #1434880Hi,
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 -
AuthorPosts
- The topic ‘Image caption and lightbox’ is closed to new replies.