Hi Ismael,
Thank you for the update, but it’s not working as expected.
Premise: no cache plugins, browser cache always empty, enfold minifications all disabled.
Added “a” to your code:
jQuery(‘open-popup-link-button a, .open-popup-link’).addClass(‘no-scroll’);
jQuery(‘open-popup-link-button a, .open-popup-link’).magnificPopup({

The strange thing is that the code works every now and then. Let’s say once every 15/20 attempts. In another installation I have it never works.
My code now is:

function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link-button a, .open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
	});
});
</script>
<?php }

add_action('wp_head', 'popup_inline');

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

If you want to take a look, in private content you will find the credentials to enter the website.

Best Regards
Manu

Yigit,

Thanks, that worked.

We also wanted the same ‘look’ on the Home page with the same 4 pics, so we used your code and changed the page ID to 19. It doesn’t seem to be working (we cleared all the caches). Did we do something wrong?:

@media only screen and (max-width: 480px) {
.responsive #top.postid-19 #wrap_all .slide-entry {
width: 100%;
margin-left: 0;
padding-bottom: 30px;
}
}

ALSO, there is still no space above the third pic down on the Blog page (on mobile and only in ‘portrait’ orientation).

So, here is both the Quick CSS And the Custom CSS file for you to look at.

Thanks for your help on this!
Mark Besh
Visual Impact Systems

=========================

QUICK CSS:
#top #header .av-main-nav > li > a, #top #header .av-main-nav > li > a > .avia-menu-text {
background-color: transparent !important;
color: #333333 !important;
font-size:18px !important;
}

.html_elegant-blog #top .avia-content-slider .blog-categories {
display: none;
}

#top .container_wrap {
border: none;
}

.main_color input[type=’submit’]:hover {
background-color: rgba(0,100,168,0.2);
}

.slide-content .av-vertical-delimiter {
display: none;
}

.current-menu-item > a > .avia-menu-fx {
opacity: 0;
}

.slide-meta{
display:none!important;
}

span.avia-menu-fx {
height: 5px;
}

.postid-240 .iconbox_content {
background: #f9f9f9 !important;
border: 2px solid #dddddd;
}

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}}

.postid-31 .avia_layout_row {
max-width: 1310px !important;
margin: 0 auto !important;
border: none !important;
}

=========================

CUSTOM CSS:
/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 989px) {
/* Add your Mobile Styles here */

}

@media only screen and (max-width: 989px) {
#top.home #av-layout-grid-1 .avia-builder-el-8,
#top.home #av-layout-grid-1 .avia-builder-el-11,
#top #av-layout-grid-1 .avia-builder-el-5,
#top #av-layout-grid-1 .avia-builder-el-8 {
display: none;
padding: 0 !important;
}
#top h3 a {
font-size: 18px;
text-transform: none;
}

.responsive #top.postid-25 #wrap_all .flex_column {
margin-bottom: 0;
}
#top.postid-25 .content {
padding-bottom:0;
}
}

@media only screen and (max-width: 989px) {
#top .no_margin.av_three_fifth.avia-builder-el-6 {
padding: 30px 50px 0 !important;
}
}

@media only screen and (max-width: 989px) {
#top .no_margin.av_three_fifth.avia-builder-el-9 {
padding: 30px 50px 0 !important;
}
}

@media only screen and (max-width: 480px) {
.responsive #top.postid-25 #wrap_all .slide-entry {
width: 100%;
margin-left: 0;
padding-bottom: 30px;
}
}

@media only screen and (max-width: 480px) {
.responsive #top.postid-19 #wrap_all .slide-entry {
width: 100%;
margin-left: 0;
padding-bottom: 30px;
}
}

=========================

I’ve tried my hardest to get this to work by adding in default_args and get nothing but errors

					static public function default_args( array $sc_defaults = array() )
		{
			$default = array(
						'size'				=> 'featured',
						'lightbox_size'		=> 'large',
						'animation'			=> 'slide',
						'transition_speed'	=> '',				//	in ms - empty for default
						'conditional_play'	=> '',
						'ids'				=> '',
						'video_counter'		=> 0,
						'autoplay'			=> 'false',
						'bg_slider'			=> 'false',
						'slide_height'		=> '',
						'handle'			=> '',
						'interval'			=> 5,
						'class'				=> '',
						'el_id'				=> '',
						'css_id'			=> '',
						'scroll_down'		=> '',
						'control_layout'	=> '',
						'content'			=> array(),
						'custom_markup'		=> '',
						'perma_caption'		=> '',
						'autoplay_stopper'	=> '',
						'image_attachment'	=> '',
						'min_height'		=> '0px',
						'lazy_loading'		=> 'disabled'
				);
			
			if( empty( $sc_defaults ) )
			{
				return $default;
			}
			
			/**
			 * Override the defaults from shortcode options for backwards comp.
			 */
			return array_merge( $sc_defaults, $default );
		}

Yes, i tried it up, under, next to other codes. It just not work. Caching is disabled in developer view in chrome.

Thats all CSS i use currently:

/* Socket (Fusszeile) sichtbar */
@media only screen and (min-width:959px){
#top #socket {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
}}
/* Text und Ausrichtung Masonry (Blog, Datenbank) */
.av-inner-masonry-content {
	min-height: 80px;
	text-align: center;
}
.minitext {display: none !important}
/* Nach oben Scollen Knopf auf iPhone, iPad */
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block !important;
}}
/* Vollbild Bilder scrollen unterdrücken */
.avia-fullscreen-slider .avia-slideshow {
max-height: 86vh!important;
}
/* Farbe für die Masonry Beschriftungen */
.main_color .container .av-inner-masonry-content, .main_color .container .av-inner-masonry-content .avia-arrow {
background: #fafafa;
}
/* Masonry maximal 4 Spalten */
@media only screen and (min-width: 1800px) {
.responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry.av-landscape-img {
    width: 49.80%; 
}
.responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry {
    width: 24.90%;
}}
/* Inhalte in der Fußzeile am Rand behalten und Kosmetik */
#socket {
   left: 0;
}
#socket .container {
   max-width: 96%;
   padding-left: 0;
   padding-right: 0;
   margin: 0 auto;
}
footer#socket.container_wrap.socket_color{
border:0px!important;
}
/* Senden Button unter Kontakt volle Breite*/
#top .avia_ajax_form .button {
    width: 100%;
}
/* Comment labels on top of the forum fields */
#top #commentform label {
    position: relative;
    left: 0;
}
/* Kommentarsenden Button in voller Breite*/
#commentform .form-submit input {
  width:100%;
height:46px;
}

/* Kommentarfeld Webseite ausblenden */
#top #wrap_all .comment-form-url {
  display: none;
}
/* Kommentarfelder nebeneinander */
#commentform p.comment-form-author,
#commentform p.comment-form-email
{ 
  display:inline-block;
}
/* Kommentarfeld-Breite */
p.comment-form-author, p.comment-form-email {
      width: 49,7%;
}
p.comment-form-author input, p.comment-form-email input, p.comment-form-url {
      width: 100%;
}
/* Kommentarfeld Privacy Checkbox korrekt platzieren */
#top #commentform .form-av-privatepolicy.comment-form-av-privatepolicy  label {
    left: 20px;
    top: -28px;
}

• This reply was modified 4 years, 10 months ago by Pako.

Hi Victoria,
unfortunately it isn’t working, I think because of the other css. This is in it:

#avia-menu a .avia-menu-text{
font-size:13px!important;
text-align: center;
}

#header .mega_menu_title { text-align: center; }

div.av-masonry-sort {
background: #000;
}
#top .av-masonry {
background-color: black !important;
}

div.av-masonry-sort .inner_sort_button span {
color: #fff;
}

.html_header_sidebar .main_menu {
margin-bottom: 400px;
}

.html_header_sidebar .logo {
width: 60%;
margin: 0 20%;
}

/*remove padding from bottom of logo */
.html_header_sidebar .logo {
position: relative;
padding: 40px 40px 110px 40px!important;
}
/*remove padding from top & bottom for menu */
.html_header_sidebar #header .av-main-nav {
padding: 0!important;
}
/* make sidebar scroll */
.html_header_left #top #header {
overflow: auto!important;
}

.html_header_left #main {
border: none;
}

.main_color .av-masonry {
background-color: #000;
}

.av-masonry-entry { visibility: visible !important; opacity: 1 !important; }

@media only screen and (max-width: 767px) {
.responsive.html_header_sidebar #header .av-main-nav > li {
padding-top: 30px; !important;
}
}

I put the iframe inside of a div tag and that made a difference. Now I’m wrestling with getting the height to be 100% as the width is. It’s filling the width at 100% but the height is being cut off. Here is the code that shows the iframe inside a div and the height/width issue.

<div class="twitch">
  <div class="twitch-video">
    <iframe
      src="https://player.twitch.tv/?channel=midheaven_network&parent=vashoncenterforthearts.org&autoplay=false"
      frameborder="0"
      scrolling="no"
      allowfullscreen="true"
      width="100%"      
      height="100%">
    </iframe>
</div></div>

No worries on the delay. I am not familiar with jquery at all. These changes would need to be made in the code placed in my php file?

Whichever you recommend.

Honestly if we could even just have the portfolio default to open without autoscrolling to the section, that would work fine. The site is basically a single page with anchor links in the menu. I just need the user to treat the first ajax portfolio preview like a section, and then have the other portfolios available to open if needed.