 
	
		
		
		
		
			
- 
		AuthorPosts
- 
		
			
				
January 18, 2022 at 1:58 am #1335929Hi, 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 
 JohnJanuary 18, 2022 at 6:03 am #1335970Hi 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, 
 NikkoJanuary 18, 2022 at 11:36 am #1336003remember 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. January 18, 2022 at 12:12 pm #1336013January 19, 2022 at 12:48 am #1336097Many 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 
 johnJanuary 19, 2022 at 8:32 am #1336138Hi 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, 
 NikkoJanuary 19, 2022 at 6:31 pm #1336253this 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 3 years, 9 months ago by Guenni007. 
 January 19, 2022 at 11:43 pm #1336275Once 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 
 JohnJanuary 20, 2022 at 5:02 am #1336286Hi 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
- 
		This reply was modified 3 years, 9 months ago by 
- 
		AuthorPosts
- The topic ‘Hide image file names in Gallery / Portfolio’ is closed to new replies.
