Lightbox: Displaying 'alt' tag below image

Maybe you could change it not to alt attribut but to description of image

A line break ind <br/> in alt -tag does not work. So my advice is to get here instead the description. But i don’t know how to adress it.

Thanks, Guenni007 — just what I needed to pull from the alt tags instead of titles!

Thanks, Victoria. Actually, Guenni007’s script seems to duplicate the alt tag to the title tag, if the title tag’s left blank. But that causes the tool tips to show when hovering over thumbnails in the masonry gallery. What I really need is to somehow have the lightbox actually pull the captions from the alt tags, so I can leave the title fields blank and thus prevent the tooltips from showing. Do happen to have a function or filter that tells the lightbox captions to pull from the alt tags instead of title tags?

Thanks again!! Here’s an example of the galleries I’m working on http://l2f.0b8.myftpupload.com/natural-and-organic-oil-paintings/

Yes, but it seems to still be pulling from the title tag — the script seems to just duplicate the alt tag to the title field, and the captions still pull from the title — I was asking if you had a snippet that would actually pull from the alt tag, so I could maybe get rid of the titles and thereby avoid having the tooltips pop up over the thumbnails.

do you have a link for me to the gallery?

it seems that the standard html tooltip has its source on the av-masonry-image-container title tag
So it may work to have on hover an empty title tag there but on click again the original title tag.

Try this in your child-theme functions.php :

just a moment – i had to proof the code first

• This reply was modified 5 years, 6 months ago by Guenni007.

on the reason i mentioned above ( change from img to background-image ) the gallery fix will not work anymore to have alt attribute instead of title shown under the lightbox images.
Please find an alternative way to have that !!!

to solve the problem with the tooltip ( only for the new masonry Enfold 4.5.7 ! ) you can have an empty title attribute on hover:
this to child-theme functions.php

function remove_standard_tooltip(){
?>
<script>
(function($) {
$(window).load(function(){
$('a.lightbox-added .av-masonry-image-container').hover( 
  function() {
        $(this).attr("orig_title", $(this).attr('title'));
        $(this).attr('title', '');
  }, function() {
        $(this).attr('title', $(this).attr("orig_title"));
  }
);
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_standard_tooltip');

on before Enfold 4.5.7 the masonry gallery was created by imgs !
That is why i could select them by : .lightbox-added img
now the masonry is built with containers and these containers have background-images! On default – these background-images havn’t an alt tag.
So no chance to replace the title tag by alt tag.

That’s why I’m a little pissed off now because I have to come up with something new for a lot of pages. ;)

The second code will work : https://webers-testseite.de/masonrygallerie/

The mfp-title ( lightbox text under the popup image ) gets his content from title tag. So to solve it till they find a way to have a different source for mfp-title you have to put in the title input field you info. This is indeed a little bit sad because these images are important content and not an embellishing element – like color-section background etc.

the gallery title fix is ok for Enfold 4.5.6 and then try this for tooltip remove:`

function remove_standard_tooltip(){
?>
<script>
(function($) {
$(window).load(function(){
	$('a.lightbox-added .av-masonry-image-container img').hover( 
	  function() {
	        $(this).attr("org_title", $(this).attr('title'));
	        $(this).attr('title', '');
	  }, function() {
	        $(this).attr('title', $(this).attr("org_title"));
	  });

	$('a.lightbox-added .av-masonry-image-container img').click( 
	  function() {
	        $(this).attr('title', $(this).attr("org_title"));
	});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_standard_tooltip');

this is now a solution for you. If you update the code before will do the trick – but gallery title fix is then obsolete. You then have to work with title input on Media Gallery

Actually, sorry to confuse you, but for me, using the title fields would be ok — there’s an advantage there for me in that I can use some html in the title fields (html gets stripped out of the alt fields), so I can italicize the title of the artwork in these galleries. SO, if I can just hide the tooltips, that’s all I really need. So I updated to 4.5.7, but the remove tooltip function still doesn’t seem to be working — I’m using the title field on the first image here http://l2f.0b8.myftpupload.com/f-r-a-g-m-e-n-t-s-chaos-mixed-media/ and the tooltip is showing.

I had already removed the gallery-title fix. I’ve now also now set the Javascript file merging and compression to Disabled, checked the box to Delete old CSS and JS files, cleared the Managed WordPress cache and browser cache several times — no luck; the tooltip still shows on the first image on http://l2f.0b8.myftpupload.com/f-r-a-g-m-e-n-t-s-chaos-mixed-media/ . This is the correct function, right — just this?

function remove_standard_tooltip(){
?>
<script>
(function($) {
$(window).load(function(){
$('a.lightbox-added .av-masonry-image-container').hover( 
  function() {
        $(this).attr("orig_title", $(this).attr('title'));
        $(this).attr('title', '');
  }, function() {
        $(this).attr('title', $(this).attr("orig_title"));
  }
);
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_standard_tooltip');

Oh, I’m sorry, I thought you said the code in https://kriesi.at/support/topic/lightbox-displaying-alt-tag-below-image/#post-1107168 was for 4.5.7 — anyway, this new code works like a charm!! Thanks, Guenni007!! Have you considered becoming a moderator? :)