Have image overlay always display - Support | Kriesi.at

Here – http://greaterclarity.staging.wpengine.com/ (hosted on WPengine)

October 30, 2013 at 1:37 am #182301

Ismael

Moderator

Hey!

Please try to add this on your custom.css or Quick CSS;

.image-overlay .image-overlay-inside {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
content: '\E897';
font-family: 'entypo-fontello';
border-radius: 10px !important;
line-height: 60px !important;
height: 60px !important;
background-color: #DD0303 !important;
font-size: 24px;
}

Regards,
Ismael

October 30, 2013 at 8:12 am #182347

No, i need them to appear before anyone has hovered. I figured out how to make them stay, i just need a way for them to be there always, even when nobody has hovered yet.

October 30, 2013 at 6:52 pm #182522

? Is there something i can do to the php to modify the image overlay to always be there?

October 30, 2013 at 7:44 pm #182539

Hey!

I found a way, can you create an administrator account and post it here as a private reply?

Best regards,
Josue

October 30, 2013 at 9:34 pm #182595

This reply has been marked as private.

October 30, 2013 at 9:36 pm #182598

websitegurus

I am working on this exact same thing here.
I do not have a website for you to login to because I’m developing on Localhost here.
If you have code snippets you could paste here I will be able to figure it out. It’s irrelevant if the element ID’s and CSS properties relate to another site’s code – whether it involves PHP, Javascript, CSS, or a combination of these, I will probably be able to figure it out.

Thanks.

October 30, 2013 at 9:38 pm #182601

Yigit

Keymaster

Hi!

I tagged Josue in the topic. He can post his solution here :)

Regards,
Yigit

October 30, 2013 at 11:05 pm #182647

Hey!

It is done: http://greaterclarity.staging.wpengine.com/ (hosted on WPengine)

I modified js/avia.js, replaced this (431-490):

	   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.3;

			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);
			}
		});

With this (431-479):

elements.each(function(e)
       {
            var link        = $(this),
                current     = link.find('img:first'),
                url         = link.attr('href'),
                span_class  = "overlay-type-video",
                opa         = link.data('opacity') || 0.3;

            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'}); }
            }

            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"});
            }

        });

Final file: http://greaterclarity.staging.wpengine.com/wp-content/themes/enfold/js/avia.js?ver=1

Cheers!
Josue

October 30, 2013 at 11:22 pm #182657

Great, thank you so much! : )

October 30, 2013 at 11:31 pm #182664

Glad we could help, in the future remember to backup avia.js before updating :)

Regards,
 Josue

October 31, 2013 at 1:57 am #182725

thank you for all the help. they work great : ) However i’ve encountered a bug, seems like the arrows dont show up sometimes, and sometimes only some of them show up. Seems like sometimes they randomly disappear. What could be causing that?

October 31, 2013 at 3:49 am #182788

Hey!

Can you post a link to a post where the icon isn’t showing up?

Cheers!
Josue

November 5, 2013 at 5:05 am #184619

websitegurus

Hi Josue,
Late to the party and getting back with you. Thanks for posting the code. I will look at it soon, but I’m up to my neck in some other parts of the site. When fandragon, gets back with you, feel free to close the thread.

Thx.

November 5, 2013 at 5:08 am #184620

We looking forward to hearing from you :)

Regards, 
Josue

November 5, 2013 at 5:23 am #184624

It’s the same link. Only sometimes when i open the page arrows dont all show up or only some of them show up. Its random so hard to reproduce…

November 5, 2013 at 5:27 am #184626

Hello,

Hard to reproduce indeed, have you tried to deactivate all third party plugins to see if it gets fixed?

Regards,
Josue

November 27, 2013 at 2:10 am #193655

brycenagels