Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 21, 2022 at 7:54 pm #1377040
    spooniverse

    Dear Support Members, I found this code in a forum thread:

    function remove_title_attr(){
?>
<script>
jQuery(window).load(function(){
  jQuery('#wrap_all img.avia_image, #wrap_all .avia-gallery-thumb img, #wrap_all .avia-gallery-thumb a').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'remove_title_attr');

    It works as expected. Thanks! I am wondering how I could achive the same effect for a masonry element. With the above code in place the titles of the images are still displayed on hover. Any chance to add that to the code above?

    All the best, Daniel

    December 22, 2022 at 1:05 am #1377063
    Ismael

    Hey spooniverse,

    Thank you for the inquiry.

    We modified the code a bit and added the .av-masonry-image-container selector. This should remove the title attribute of the masonry items. 

    function remove_title_attr(){
?>
<script>
jQuery(window).load(function(){
  jQuery('#wrap_all img.avia_image, #wrap_all .avia-gallery-thumb img, #wrap_all .avia-gallery-thumb a, .av-masonry-image-container').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'remove_title_attr');

    We hope this helps! Let us know if you have any questions.

    Best regards,
    Ismael

    December 22, 2022 at 9:59 am #1377077
    spooniverse

    Hey Ismael, thanks for letting me know but I tried to add several iterations already:

    .av-masonry-image-container
.av-masonry-entry a
.av-masonry-image-container img
.av-masonry-entry a .av-masonry-image-container img

    And more stuff like that. Nothing worked. Image title is still displayed on hover. Any other idea or solution?

    • This reply was modified 1 year, 11 months ago by spooniverse.
    December 22, 2022 at 10:07 am #1377079
    Guenni007

    think of – that 

     jQuery(window).load(function(){

    since jQuery 3.x is now:

    jQuery(window).on('load', function(){

    and : if you use the title to show info on mfp-bottom in the lightbox – to change to a different source ( description etc. )

    December 22, 2022 at 10:14 am #1377080
    spooniverse

    Thanks Guenni, that is making it more tidy:

    function remove_title_attr(){
?>
<script>
jQuery(window).on('load', function(){
	'#wrap_all img.avia_image, #wrap_all .avia-gallery-thumb img, #wrap_all .avia-gallery-thumb a, .av-masonry-image-container').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'remove_title_attr');

    But still the image title is displayed on hover. It is all about the original image title that is visible if you hover over an image. No actual titles are hidden. See the linked thread in my first post. Lightbox works as it should.

    December 22, 2022 at 11:56 am #1377091
    Guenni007

    is there a link i can see?

    I use this snippet to remove the title tag only temporarily on hover. On click and on mouseout it is restored.

    function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img, *[title]');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');
    December 22, 2022 at 12:31 pm #1377099
    spooniverse

    Nice, that does the trick! Why do you just remove it temporarily?

    December 22, 2022 at 7:30 pm #1377142
    Guenni007

    the lightbox script uses on default the title to show at the bottom of the lightbox the info about that image. If title is totaly removed – there will be no info for that mfp-bottom.
    On some alb elements you have the choice to take a different source for those mfp-bottom text. ( Gallery, Masonry ) – but for images this is not the case.

    December 23, 2022 at 8:14 pm #1377269
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, shall we close this then?

    Best regards,
    Mike

    January 25, 2023 at 5:44 pm #1395215
    spooniverse

    I am using the code Guenni007 provided. Thanks again! You may close this.

    All the best, Daniel

    January 26, 2023 at 8:02 am #1395319
    Ismael

    Hi,

    Great! Let us know if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Hide titles and descriptions when you hover on images or thumbnails in masonry’ is closed to new replies.