-
AuthorPosts
-
January 12, 2023 at 5:37 pm #1378453
I wish to create a link that triggers a popup lighbox with content of which I have full control regarding layout.
My hope is to call a Color Section on the same page to present itself in the lightbox.I have added this to the functions.php file:
…………………………………………………..
function inline_popup_enabler(){
?>
<script>
(function($){
$(window).load(function() {
$(‘.inline_popup’).magnificPopup({
type:’inline’,
midClick: true
});
});
})(jQuery);
</script>
<?php
}
add_action(‘wp_footer’, ‘inline_popup_enabler’);
…………………………………………………
And the link looks like this:
Popup testThe color section Custom ID Attribute is: popup
And the Custom CSS Class is: mfp-hide (which makes the color section only show once the ID is triggered.But it does not work – what am I missing?
It is important that I manage to trigger at color section so that I can present different content and layouts in the popup. Such as an Easy slider, text box etc.
Hope you can help…January 12, 2023 at 10:40 pm #1378497replace in your code:
$(window).load(function() { // with: $(window).on('load', function(){
so that there is then:
function inline_popup_enabler(){ ?> <script> (function($){ $(window).on('load',function(){ $('.inline_popup').magnificPopup({ type:'inline', midClick: true }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'inline_popup_enabler');
January 12, 2023 at 11:12 pm #1378498Thank you very much – it did the job :-)
Is there a way to manage the width of the popup lightbox? Right now it’s fullwidth – and not very nice.January 13, 2023 at 1:32 am #1378509i’m participant as you are – so if there is a private content link – i can not see.
but you can try:.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 80vw; }
January 13, 2023 at 10:28 am #1378552Wow, thank you very much – it works.
Do you by any chance have a solution on how to manage the width separately for smartphone versus desktop?I tried this – but it didn’t work:
@media only screen and (min-width: 990px) {
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 40vw;
}@media only screen and (max-width: 767px) {
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 80vw;
}January 13, 2023 at 4:41 pm #1378614Hi,
It looks like you are missing the closing curly bracket in both your media queries, maybe that’s the problem?
Best regards,
RikardJanuary 13, 2023 at 6:08 pm #1378633Of course – my bad – thank you guys. Great support :-)
Now I just realized a new issue when using a smartphone:
The background seem to scroll to the top when clicking the trigger link. The popup is there alright but you have to scroll down in order to actually see it on a smaller screen.
Try it here on your smartphone: https://fyrholtrejser.dk/rejser/st-johann/#indkvartering
Click on the link: “Se evt. mere om hotellet her”
What to do?- This reply was modified 1 year, 10 months ago by RasMaster.
January 14, 2023 at 10:22 am #1378661first try this filter in your child-theme functions.php :
add_filter( 'avf_default_lightbox_no_scroll', '__return_true' );
if it does not work –you can give in your case to that text manuall the second custom class: no-scroll
Just put to that place where you entered your inline-popup class
so enter : inline-popup no-scroll_____________
Why do I mention : “in your case”.
Mostly you can’t assign the trigger class directly to the link. e.g. a button ALB – the custom class would go to a parent element of the link ( so it’s not at the anchor).
So I mostly enter the trigger class to a parent element – and noted this inline popup snippet like this way:function inline_popup_enabler(){ ?> <script> (function($){ $(window).on('load',function(){ $('.inline-popup').find('a').addClass('no-scroll'); $('.inline_popup').magnificPopup({ delegate: 'a', type:'inline', midClick: true }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'inline_popup_enabler');
But now since Enfold 5.1 there is this filter: avf_default_lightbox_no_scroll
January 14, 2023 at 1:56 pm #1378673Thank you Guenni007 – you have been very helpful – I really appreciate it :-)
All I had to do in this case was to add the second custom class; no-scroll to this:
PopupAnd now it looks good on both desktop and smartphone with no scrolling behind the popup :-)
January 14, 2023 at 3:49 pm #1378679by the way – you can set the submenu :
on Content Tab “Sticky Submenu” to stick to the header when it scrolls down. ;)
January 15, 2023 at 5:49 pm #1378763Great idea – thank you Guenni007
Have a look at https://fyrholtrejser.dk/rejser/test/ where you see the Sticky Submenu in action.
I am controlling the font size in this menu with the following CSS:#top .av-subnav-menu li a {
font-size: 17px;
}How do I make the active menu item underlined only in this Sticky Submenu?
January 18, 2023 at 8:48 pm #1393994your script is working – but i would play a bit with your colors to get a better usability:
#top #wrap_all .av-subnav-menu > li.current-menu-item a { text-decoration: none !important; } #top #wrap_all .av-subnav-menu > li.current-menu-item a > .avia-menu-text { background-color: #678908; border-color: #678908; }
January 19, 2023 at 1:05 pm #1394340Hi,
When I test your page the menu highlighting seems to work but some of the lower sections are not very high so sometimes two sections will show at once and the menu will highlight the lower second on desktop.
Try making each second 100 percent high so when you click on a menu item the section will fill the screen.
Best regards,
MikeJanuary 23, 2023 at 11:44 pm #1394851Thank you – it’s all working just fine now that I have put some more content around the anchor elements.
You can close this thread now.
Great support :-)January 24, 2023 at 10:24 am #1394891 -
AuthorPosts
- The topic ‘Lightbox popup on Enfold’ is closed to new replies.