I think this is the same/similar problem.

– Firefox only: An image uploaded via Advanced Layout Editor goes from right to left after clicked or hoovered:

Screenshot: http://demo.globalads24.com/wp-content/uploads/2013/05/Picture26adj.jpg

Live site: http://babyblueshelp.com

Can we use the same code or wait for the updated version?

thx

jasmine

Open up the /js/avia.js file in your enfold folder, find lines 245-287 that look like:

elements.on('mouseenter', function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

url		 	= link.attr('href'),

span_class	= "overlay-type-video",

opa			= 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:'inline-block'}); }

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

}

});

and replace the entire block above with the block below

elements.each(function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

url		 	= link.attr('href'),

span_class	= "overlay-type-video";



overlay = link.find('.image-overlay');



if(!overlay.length)

{

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

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

}

});



elements.on('mouseenter', function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

opa			= 0.7;



overlay = link.find('.image-overlay');



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

}

});

I’ll ask Kriesi to implement this fix in the next version.

Hi!

Fix can be found here: https://kriesi.at/support/topic/image-moves-from-right-to-left-firefox

Best regards,

Peter

It seems like you insert the code at the very top of avia.js. http://www.wafbmuseum.org/wpdocs/wp-content/themes/enfold/js/avia.js

Please revert the change and don’t insert the code at the very top but replace the (already existing) line

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

with

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline'}); }

All icons which are used by the theme are stored in an array in functions.php:

/*

* These are some of the font icons used in the theme, defined by the entypo icon font. the font files are included by the new aviaBuilder

* common icons are stored here for easy retrieval

*/

$avia_config['font_icons'] = array(

'search'  	=> '🔍',       	//36

'standard' 	=> '✎',        	//6

'link'    	=> '🔗',       	//40

'image'    	=> '📷',      	//46

'audio'    	=> '♪',        	//51

'quote'   	=> '❞',        	//33

'gallery'   => '🌄',     	//145

'video'   	=> '🎬',       	//146

'info'    	=> 'ℹ',         	//120

'next'    	=> '',        	//190

'prev'    	=> '',        	//187

'behance' 	=> '',			//246

'dribbble' 	=> '',			//223

'facebook' 	=> '',			//212

'flickr' 	=> '',			//206

'gplus' 	=> '',			//215

'linkedin' 	=> '',			//221

'pinterest' => '',			//217

'skype' 	=> '',			//238

'tumblr' 	=> '',			//219

'twitter' 	=> '',			//210

'vimeo' 	=> '',			//208

'rss' 		=> '',			//98

'mail' 		=> '✉',			//5

'cart' 		=> '',

'reload'	=> '🔄',

'details'	=> '📄',

'clipboard' => '📋'

);

If the unicode of the icons didn’t change you don’t need to modify the array, otherwise replace the cuurent codes with the new codes (take them from the custom charmap).

My images jump too. I added them through the Add Media when editing in display mode. I am not using columns, so how do I stop the jumping? It does it in Chrome, IE and Firefox….

Hi,

Try following – open up enfold/js/avia.js and replace:

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

with

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline'}); }

Hey!

Yes sure – especially if you add many image layers to the slider. Simple text layers won’t affect the performance.

Regards,

Peter