Lightbox for Blog Post Element

show me a test page where you like to open those links in a lightbox.
is it a page like this:
https://kriesi.at/themes/enfold-2017/elements/blog-posts/
or
https://kriesi.at/themes/enfold-2017/blog/blog-default/
And you want to open not the posts on a new page but as iframe in a lightbox?

you can see here on top of that page a masonry with portfolio links.
If you click to open it – it will open that portfolio in a lightbox ( but the complete page )
https://webers-testseite.de/lightboxes/
Is it the way you like to have it?

i gave to the alb element itself a custom-class ( in my case ) : open-in-lightbox

then i put this to child-theme functions.php:

function posts_iframe_popup() { 
?>
<script type="text/javascript">
(function($) {
$(window).on('load', function(){
  $('.open-in-lightbox a.av-masonry-entry').magnificPopup({
    type:'iframe',
    mainClass: 'spezial-masonries',
  }); 

  $('.open-in-lightbox a.slide-image, .open-in-lightbox .slide-entry-title > a').magnificPopup({
    type:'iframe',
    mainClass: 'spezial-blogposts',
  }); 

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

the mainClass is only to have a way to select f.e. the iframe-scaler specifically for that usage – you will have that class on mfp-wrap container.
to have the links from both ( the image and the slide title – we have in that rule two selectors).

PS : on that blog-posts the first link “iframe-lightbox” leads to an iframe which can open a new iframe on top :lol:

try:

function posts_iframe_popup() { 
?>
<script type="text/javascript">
(function($) {
	if (top === self) { 
		// no frame
	} else { //frame 
		$('#header, #footer, #socket').hide();
		$('#main').attr('style', 'padding-top: 0px !important');  
	};
	
	$(window).on('load', function(){
	  $('.open-in-lightbox a.av-masonry-entry').magnificPopup({
	    type:'iframe',
	    mainClass: 'spezial-masonries',
	  }); 

	  $('.open-in-lightbox a.slide-image, .open-in-lightbox .slide-entry-title > a').magnificPopup({
	    type:'iframe',
	    mainClass: 'spezial-blogposts',
	  }); 
	});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'posts_iframe_popup');

see testpage: https://webers-testseite.de/lightboxes/

should it be prevented for real mobile devices or for small screen sizes?
If it is for small screen sizes is only to avoid ? it must respond to resize?