Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #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

    #198736

    Hi,

    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,
    Josue

    #619241

    Hi 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!

    #621135

    Hi!

    do the 2.) version.

    Cheers!
    Andy

    #693089

    Hi, 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

    #693128

    Hi, 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

    #939993

    Is there an updated solution to this problem running the current Enfold theme?

    I would appreciate anyone help! Thank you.

    #940042

    Hi!


    @wep_management_inc
    Please go to Enfold theme options > Advanced Styling and edit “Linked image overlays” and disable it :)

    Regards,
    Yigit

    #940695

    HI 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?

    #941117

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

    #941123

    Hey!


    @wep_management_inc
    Glad it is working fine now and thanks for sharing your solution :)

    Best regards,
    Yigit

    #1100670

    Hi 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 working

    Regards,
    Yigit

    #1101619

    Hi,

    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,
    Ismael

    #1101692

    I did and nothing is changing (see homepage)

    #1102354

    Hi,

    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,
    Ismael

    #1102403

    Thank you ismael!

    #1102604

    Hey frankbarthen,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Disable image overlay function?’ is closed to new replies.