Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1377040

    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

    #1377063

    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

    #1377077

    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 month, 1 week ago by spooniverse.
    #1377079

    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. )

    #1377080

    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.

    #1377091

    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');
    #1377099

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

    #1377142

    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.

    #1377269

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

    Best regards,
    Mike

    #1395215

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

    All the best, Daniel

    #1395319

    Hi,

    Great! Let us know if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

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.