-
AuthorPosts
-
December 10, 2013 at 3:16 pm #198550
HI,
I know that I can use the following CSS to apparently disable the image overlay effect
.image-overlay { display: none!important; }
but I need to disable any other code relating to this,in order to use the following plugin:
http://codecanyon.net/item/wp-easy-social-hover/3771834
to help me increase site social interaction.Right now the plugin will not function as expected.
Any help would be most appreciated.kindest regards,
PPCHound
December 11, 2013 at 12:01 am #198736Hi,
Open js/avia.js and comment from line to 674 to 746:
/*if(container == 'body') { var elements = $('#main a img').parents('a').not('.noLightbox, .noLightbox a, .avia-gallery-thumb a, .avia-layerslider a, .noHover, .noHover a').add('#main .avia-hover-fx'); } else { var elements = $('a img', container).parents('a').not('.noLightbox, .noLightbox a, .avia-gallery-thumb a, .avia-layerslider a, .noHover, .noHover a').add('.avia-hover-fx', container); } var overlay = "", isMobile = 'ontouchstart' in document.documentElement; if(isMobile) return; //hover overlay for mobile device doesnt really make sense. in addition it often slows done the click event elements.each(function(e) { var link = $(this), current = link.find('img:first'); if(current.hasClass('alignleft')) link.addClass('alignleft').css({float:'left', margin:0, padding:0}); if(current.hasClass('alignright')) link.addClass('alignright').css({float:'right', margin:0, padding:0}); if(current.hasClass('aligncenter')) link.addClass('aligncenter').css({float:'none','text-align':'center', margin:0, padding:0}); if(current.hasClass('alignnone')) { link.addClass('alignnone').css({margin:0, padding:0});; if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); } } }); elements.on('mouseenter', function(e) { var link = $(this), current = link.find('img:first'), url = link.attr('href'), span_class = "overlay-type-video", opa = link.data('opacity') || 0.7; overlay = link.find('.image-overlay'); if(!overlay.length) { if(current.outerHeight() > 100) { if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; } if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); } if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'block'}); } if(url) { if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image"; if(!url.match(/(jpg|gif|jpeg|png|\.tif|\.mov|\.swf|vimeo\.com|youtube\.com)/) ) span_class = "overlay-type-extern"; } overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link); } } if(current.outerHeight() > 100) { overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)}) .css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400); } else { overlay.css({display:"none"}); } }).on('mouseleave', elements, function(){ if(overlay.length) { overlay.stop().animate({opacity:0}, 400); } });*/
Regards,
JosueApril 21, 2016 at 4:20 pm #619241Hi guys,
this solved a problem I had with a plugin slider.
Now my question is to be update safe, where should I move the avia.js file in the child-theme?
1. under the root file enfold-child/avia.js
or
2. create a js folder and put it in there enfold-child/js/avia.js?Thank You!
April 25, 2016 at 10:36 am #621135Hi!
do the 2.) version.
Cheers!
AndySeptember 29, 2016 at 1:53 pm #693089Hi, I have the exact same issue now with Enfold v3.6.1 and I tried your suggestion about commenting out the image overlay function, but there was no change in the result.
There is definitely a conflict with the Enfold theme because the plugin works with the twenty(n) themes and others.
Can you please provide some help to determine the conflict so that I may fix it?
I’ve supplied my private login info for you.
Thanks.
Aaron
September 29, 2016 at 3:02 pm #693128Hi, for anyone looking to fix the same problem. The issue is with the avia_hover_effect function in the avai.js file on line 619. The elements declaration is too broad and applies the hover effect to all $(“#main a img”) elements on the page which breaks the BXSlider used in RealtyPress. By narrowing the scope a little, you can keep the hover effect and get the slider working as well. $(‘#main .rps-property-result a img’).
Cheers.
Aaron
April 10, 2018 at 7:54 pm #939993Is there an updated solution to this problem running the current Enfold theme?
I would appreciate anyone help! Thank you.
April 10, 2018 at 10:11 pm #940042Hi!
@wep_management_inc Please go to Enfold theme options > Advanced Styling and edit “Linked image overlays” and disable it :)Regards,
YigitApril 12, 2018 at 12:09 am #940695HI Yigit,
Thanks for reaching out.
Unfortunately, your solution did not work. I disabled the linked image overlay and the image still doesn’t show.
see here: example
Any other ideas?
April 12, 2018 at 8:11 pm #941117This issue has been resolved with help from the RealtyPress team.
Added this code to functions.php
if(!is_admin()) add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100); function avia_register_child_frontend_scripts() { $child_theme_url = get_stylesheet_directory_uri(); wp_dequeue_script('avia-default'); //register js wp_register_script( 'avia-default-child', $child_theme_url.'/js/avia.js', array('jquery'), 1, true); wp_enqueue_script( 'avia-default-child' ); }
And this code to style.css:
.bootstrap-realtypress .rps-property-photo-row .bx-slider li img { position: absolute !important; }
I’m using a Child Theme so the code reflects that.
- This reply was modified 6 years, 7 months ago by WEP_Management_Inc.
April 12, 2018 at 8:17 pm #941123Hey!
@wep_management_inc Glad it is working fine now and thanks for sharing your solution :)Best regards,
YigitMay 14, 2019 at 4:49 pm #1100670Hi Yigit,
I also can’t get the ovelay disabled. Codes and advanced styling both arent working. I have no special plugins installed.
@wep_management_inc Please go to Enfold theme options > Advanced Styling and edit “Linked image overlays” and disable it :) = not workingRegards,
YigitMay 17, 2019 at 4:16 am #1101619Hi,
Thanks for the update.
Did you toggle the Enfold > Performance > File Compression settings after adjusting the “Linked image overlays” advanced styling? That will only work for images with links.
Best regards,
IsmaelMay 17, 2019 at 9:21 am #1101692I did and nothing is changing (see homepage)
May 20, 2019 at 3:56 am #1102354Hi,
Thanks for the update.
We have added the following css code in the Quick CSS field.
.avia-image-overlay-wrap a.avia_image .image-overlay { display: none !important; }
Please don’t forget to remove the browser cache prior to checking the page.
Best regards,
IsmaelMay 20, 2019 at 8:06 am #1102403Thank you ismael!
May 20, 2019 at 10:11 pm #1102604Hey frankbarthen,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Disable image overlay function?’ is closed to new replies.