Lightbox

the scroll to top i only know if you did that on magnific parameters: https://dimsemenov.com/plugins/magnific-popup/documentation.html#aligntop

and if i look to that DOM – and the events on that inline links – i never had so much jQuery on those inline-popups :

• This reply was modified 3 years, 10 months ago by Guenni007.

to avoid the extensive use of using jQuery instead of $ i do use this syntax in my child-theme functions.php:
(so every $ is a jQuery)

function open_inline_popup(){
?>
<script type="text/javascript">
(function($) {
	$(window).load(function(){
		$('.open-popup-link').magnificPopup({
			type:'inline',
			midClick: true,
			callbacks: {
				beforeOpen: function () {
					$('html').css("overflow-y", "hidden");
				},
				close: function() {
					$('html').css("overflow-y", "auto");
				},
			},
		});
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'open_inline_popup');

where did that function come from:

function(e) {
  var current = link.find('img:first'),
    _self = current.get(0),
    outerH = current.outerHeight(),
    outerW = current.outerWidth(),
    pos = current.position(),
    linkCss = link.css('display'),
    overlay = link.find('.image-overlay');
  if (outerH > 100) {
    if (!overlay.length) {
      overlay = $("<span class='image-overlay " + span_class + "'><span class='image-overlay-inside'></span></span>").appendTo(link);
    }
    if (link.height() == 0) {
      link.addClass(_self.className);
      _self.className = "";
    }
    if (!linkCss || linkCss == 'inline') {
      link.css({
        display: 'block'
      });
    }
    overlay.css({
      left: (pos.left - overlay_offset) + parseInt(current.css("margin-left"), 10),
      top: pos.top + parseInt(current.css("margin-top"), 10)
    }).css({
      overflow: 'hidden',
      display: 'block',
      'height': outerH,
      'width': (outerW + (2 * overlay_offset))
    });
    if (cssTrans === false) overlay.stop().animate({
      opacity: opa
    }, 400);
  } else {
    overlay.css({
      display: "none"
    });
  }
}

it is on that click event too

yes – and that is a part of the smoothscroll function on avia.js …

jQuery(window).load(function(){
	jQuery('.open-popup-link').addClass('no-scroll');
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});

that works for me

_____________

i tried to implement as magnific popup described with callback and beforeOpen –
but that will not work on first click – but our trigger class see above will do the job better

that part

callbacks: {
	beforeOpen: function () {
		(this.st.el).addClass('no-scroll');
		$('html').css("overflow-y", "hidden");
	},
	close: function() {
		$('html').css("overflow-y", "auto");
	},
},

• This reply was modified 3 years, 9 months ago by Guenni007.

that was the final code:

that is what you have now:

jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});

replace it with:

jQuery(window).load(function(){
	jQuery('.open-popup-link').addClass('no-scroll');
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});