Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1335929

    Hi,

    I am having some difficulty in removing the file names of images for the gallery / portfolio I have for the projects page.

    When I hover on the images on this page the file name appears. This is the same when you then click into a portfolio item to view more images.

    I have tried different code in the Quick CSS and also the function.php area. Neither seem to work?

    I presently have the following in the functions.php :

    /*----------------------------------------
    // CSS -  hide file names on hover
    //--------------------------------------*/
    
    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');
    

    Any assistance is appreciated.

    Cheers
    John

    #1335970

    Hi John,

    Thanks for posting the code as well as giving us admin access.
    I have slightly modified the code to this one:

    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, #wrap_all .av-masonry .av-masonry-image-container, #wrap_all .av-masonry .av-masonry-entry').removeAttr('title');
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'remove_title_attr');

    Please review your site.

    Best regards,
    Nikko

    #1336003

    remember that since jQuery 3.0 and later will not have the

    jQuery(window).load(function(){
    

    it is deprecated since jQuery 1.8 and removed since jQuery 3.0
    you must now use:

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

    And if you don’t just temporarily remove the titles on hover, then remember for any lightboxes not to use the title for the caption.

    #1336013

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1336097

    Many thanks for the input from all.

    I modified the code per @guenni007 suggestion:

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

    However, I still have when on hover the image title showing.

    If I click an image to bring up the lightbox the filename is there as well so I then added the following in Quick CSS:

    
    /*----------------------------------------
    // CSS -  hide file names in gallery view
    //--------------------------------------*/
    .mfp-title {
        display: none !important;
    }
    
    .mfp-counter {
        display: none !important;
    }

    This removed the image title in the lightbox :)

    So, it is just the on-hover image title I now need to remove. See link below for one of the galleries.

    Thanks
    john

    #1336138

    Hi john,

    I have slightly tweaked your code again:

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

    please review your site. :)

    Best regards,
    Nikko

    #1336253

    this here is a temporarly remove of the title tag
    you must adopt your selector to what you need ! ( var links )

    function temporary_removal_title_tags(){
    ?>
    <script>
      window.onload = function() {
        //var links = document.querySelectorAll('a,img,div[title]');
          var links = document.getElementsByTagName("img");
          for (var i = 0; i < links.length; i++) {
              var link = links[i];
              link.onmouseover = function() {
                  this.setAttribute("org_title", this.title);
                  this.title = "";
              };
              link.onmouseout = function() {
                  this.title = this.getAttribute("org_title");
              };
              link.onclick = function() {
                  this.title = this.getAttribute("org_title");
              };
          }
      };
    </script>
    <?php
    }
    add_action('wp_footer', 'temporary_removal_title_tags');

    you see what the code does: it saves the original title to another attribute : org_title
    now if the mouse hovers – the title is empty but the original title is saved to another attribute.
    if you leave it ( mouseout ) the title is there again.
    And on click the title will be there for lightbox captions.
    the code above is only for images – but you see the commented line – you can have more selctors here.
    you can use the selectors Nikko mentioned above.

    See in action here with the enfold tooltip on the images: https://webers-testseite.de/gallery-with-8-images/
    normal behavior is here on Gallery with preview ( hove the thumbnails ): https://kriesi.at/themes/enfold-2017/elements/gallery/

    there will be both : enfold tooltip and browser tooltip by titles

    • This reply was modified 2 years, 10 months ago by Guenni007.
    #1336275

    Once again guys, many thanks for all your assistance. It would appear to be working.

    Will keep the code that @guenni007 outlaid for future. Handy to have.

    Please close thread.

    Cheers
    John

    #1336286

    Hi John,

    Great, I’m glad that you got things working, and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Hide image file names in Gallery / Portfolio’ is closed to new replies.