-
AuthorPosts
-
January 18, 2022 at 1:58 am #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
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 2 years, 10 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 -
AuthorPosts
- The topic ‘Hide image file names in Gallery / Portfolio’ is closed to new replies.