Just a moment – i see that the gallery will show by this code each lightbox twice
so i had to thing about that a while … and because maybe not all images on the page got hidden bios – i inserted if clauses:

function button_for_biography(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () {	
	(function($) {
		$('#people').each(function(){
		var that = this;
			$('.flex_column', this).each(function(i){
				if($(this).find('.mfp-hide').length){
					$(this).find('.avia-button').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup');
				}
			});
		});

		$('#people .flex_column').find('.avia-button[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'mfp-fade',
			gallery: { 
				enabled:true,
			},
		});

		$('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'mfp-fade',
			gallery: { 
				enabled:true,
			},
		});

	})(jQuery);
}); 	
</script>
<?php
}
add_action( 'wp_footer', 'button_for_biography');

PS: i see on your developer page that on click the lightbox opens and the background scrolls a bit.
so i inserted on those links the class: no-scroll to hamper that

don’t know why this makes the difference ;)

see all code and example page on : https://enfold.webers-webdesign.de/sky19er/

by the way @Mike – for your team-member ALB solution – i tried to find a gallery enabled solution – but did not find yet.
And for that page of the participant – i recommend an additonal css

yes Mike is right – and for a layerslider – you can see here a page of mine: https://webers-webdesign.de/
This video will play – and autostart the background-video. I don’t know if this is due to layerslider or by using on that layer a html5 video code.

<video playsinline autoplay loop muted preload="metadata" style="min-width:1600; min-height:900;" >
<source src="/wp-content/uploads/YOUR-VIDEO.mp4" type="video/mp4">
<img src="/wp-content/uploads/video-fallback.jpg" width="1600" height="900" alt="video-fallback-image" title="Your browser does not support the video tag">
</video>

BUT: keep in mind that videos on a page will cause a huge loss of performance. This page is ranked on gtmetrix on B 89% 88% – but with that background-video it will be : D 53% 82%

We Webdesigners in Europe and to be more precise : in Germany suffer a little bit under that GDPR ( DSGVO ) Rules. Because a third party hosted Video will have better performance values – and even CDN do not fullfill all Need for the GDPR Compliance. So – without optin this will be illegal.

PS : that part:

/****  
// re-appends controls inside the main container
		callbacks: {
		  buildControls: function() {
			this.arrowLeft.appendTo(this.contentContainer);
			this.arrowRight.appendTo(this.contentContainer);
		  },
		},
****/

if you like to have that – just get rid of those two lines with those asterisks

you can completely remove. This is only to have the left and right arrows inside the mfp-content container.

PPS:
if you are loading your jQuery in the footer do not forget to set a priority for that function in the last line:
add_action( 'wp_footer', 'button_for_biography', 999 );

and to have the image of your team-member inside the lightbox – just place the image into your text-block ( that with the mfp-hide class ) – on my test it is a float left setting.

Comming soon …
I just wanted to ask before investing time in a solution again and then not producing what you wanted to have after all.

can you try this in your child-theme functions.php:

function inline_popup_for_toggles() { 
?>
<script type="text/javascript">
(function($){
	$(window).on('load', function(){

		$('#people .toggler').off('click');

		$('#people .single_toggle').each(function() {
		    $(this).magnificPopup({
				type:'inline',
				midClick: true,
				items: {
					src: $(this).find('.toggle_content').addClass('white-popup'),
				}
		    });
		});
	});
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'inline_popup_for_toggles');

and this in quick css:

.mfp-content  .white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 800px;
  margin: 50px auto;
}

you see that selector – it is only for your ID set by yourself: #people
so if you like to have that on different places you had to adjust that selector –
PS: the .off(‘click’) removes the initial event on the toggles

i use this in my child-theme functions.php:

function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}
add_action( ‘init’, ‘enfold_customization_switch_fonts’ );

but since Enfold 4.4.1. there is that filter – and i guess you can use that either.

function my_output_google_webfonts_script( $activate ){
  return false;
}
add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );

by the way, I don’t know if Google Fonts support is now disabled by default in the advanced Layerslider. So please have a look there as well on Layerslider Settings Page.

• This reply was modified 2 years, 7 months ago by Yigit.
• This reply was modified 2 years, 7 months ago by Yigit.

Your question doesn’t quite make it clear where the parallax effect was used on your part. Does it affect the color sections (background-images)? Or do you already have the latest Enfold installed and mean the parallax that can be activated for columns and images.

______
if you are talking about that last parallax setting:
the first screen on the left is for the default setting and therefore applies to all screen widths. If you leave it on “none” no parallax will be applied. Only if you then edit the individual “Media Query Screens” the effect is applied there. ( Same with positioning – on “use theme default )

i needed a sidebar on my search results page – so i think you had to modify only the if clause for your case:

function avia_change_sidebar_layout($layout, $post_id) {
    if( is_search() ) {
        $layout['current'] = $layout['sidebar_right'];
        $layout['current']['main'] = 'sidebar_right';
    }
    return $layout;
}
add_filter('avia_layout_filter', 'avia_change_sidebar_layout', 10, 2);

if you like to place a custom side bar there ( pay attention it is case-sensitive ):

add_filter("avf_custom_sidebar", function($custom_sidebar) {
    if( is_search() ) {
        $custom_sidebar = "Your Custom Sidebar Name"; 
    }
    return $custom_sidebar;
}, 10, 1);

guess it is not a bug – it is standard behavior – but you can switch it on/off:

press that little three dots and switch on / off fullscreen mode.

hm – how did you manage it without that snippet before?
The CPT’s aren’t included to advanced layout builder before Enfold 5.0 too …

Very often it is caused by WordPress autop function.
Can you try these filters if it will solve that issue:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
remove_filter( 'widget_text_content', 'wpautop');

refresh merging of enfold js and css rules – and refresh all cachings ( browser or optimization tools)

____

Sometimes it is caused by manually make some errors in f.e. editor by adding tags yourself.
W3C it is not allowed to have block-elements inside p-tag ( including p-tag itself)
see here a list of allowed elements inside p-tag: https://html.spec.whatwg.org/#phrasing-content
f.e. no ul nor ol tag etc.

and btw: i do not see any errors on your starting page! : Link
only warnings are present

it was exactly your error i recognized on my installation – so did you refresh all merging files and delete all cache ( Browser-Cachings, Optimizing Plugins (Cachify) etc) ?

and PS: my last version is 4.5.8 ! not 4.5.2

But:

It does not make a difference which blogstyle i use (standard, elegent or modern business) – its always linked.
I am using a page with “masonry element” to pull the blogposts but why should this affect how a single blopgost looks like?

on the other posting you are talking about the single posts. So this code has no influence on this link.
there I think in a blog it makes sense to also link the image to the single post.

look to : https://kriesi.at/support/topic/remove-link-from-featured-image-3/#post-1360722 to only remove the mouse action – ( but : you had to adjust the selector on different blog-styles etc. )

.slide-entry .slide-image,
.post-entry .small-preview,
.post-entry .big-preview a {
  pointer-events: none;
}

or you had to edit the loop … ( with all its blog-style cases )

ok – thanks Ismael – on my testinstallation this code works.
this will immediately be added to my large collection of snippets.

And thanks – i did not see that i missed one closing curly bracket ! -Sorry
But i thought that the link function has to be hampered – and not redefine the image source for that image.
Both could be done by echo that new image definition:

function av_remove_featured_image_link($image) {
    if (is_single()) {
        $image = get_the_post_thumbnail( $current_post['the_id'], 'featured' );
    }
    // return : if you only want to have a different image source for that f.e. : entry_with_sidebar
    echo $image; 
}
add_filter('avf_post_featured_image_link','av_remove_featured_image_link', 10, 1);

and if you choose a different image-size source for this image it might be good to shift the image again to the center of its container:
( but even here there are a lot of possible selectors depending on the blog settings )

.template-single-blog .wp-post-image {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}