Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 14, 2023 at 12:30 pm #1425563
    MM

    Hi,
    I added the following code to my child theme functions.php, so that I could use the Magnific lightbox for pop-ups from button clicks on the same page:

    // add inline popup/lightbox functionality
function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
       jQuery('.pu-link a').addClass('open-popup-link');
	jQuery('.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');

    It does exactly what I want it to do on desktop, that is; it opens the contents of a hidden color section on the same page in a lightbox when a button is clicked in another color section. However, the styling still needs lot of work (the lightbox covers the full screen currently – left to right), but I would like it to look like a popup that only fills the device screen to about 75% of the space on desktop, but 100% of the space on mobile. It currently looks terrible on mobile devices, in that the color section doesn’t seem to follow breakpoints (my color section that is loaded into the lightbox uses 2 columns – a 2/5 and a 3/5. I have an image on the left in a 2/5 column and a text block on the right in a 3/5 column. I’ve played around with CSS for hours, but can’t get it to look good on mobile).

    I’m using the following CSS currently:

    /* style inline popup box width */
@media only screen and (min-width: 767px) {
.mfp-container.mfp-s-ready.mfp-inline-holder {
padding:0 300px!important;
}
#pu-splash.container.av-section-cont-open {
    padding-left: 0!important;
}
}
.mfp-content #pu-splash{
border-radius:15px!important;
}

    Do you have any suggestions please?

    Cheers,
    Matt

    November 14, 2023 at 12:44 pm #1425567
    MM

    Here is an image of what I am trying to achieve…

    November 14, 2023 at 12:48 pm #1425569
    Guenni007

    first: on jQuery 3.x. the
    jQuery(window).load(function(){
    is deprecated – use instead:
    $(window).on('load', function(){

    now: a link to that page it concerns would be the best way to give you advice

    November 14, 2023 at 12:50 pm #1425570
    MM
    This reply has been marked as private.
    November 14, 2023 at 2:02 pm #1425571
    MM

    Thanks Guenni007, I changed the deprecated bit and it stopped working completely!
    I’ve added links privately, but happy to share with you if you have a safe space I can connect to you with?

    November 14, 2023 at 5:30 pm #1425587
    Guenni007

    sorry for your setting of allways use jQuery instead of $

    use instead:
    jQuery(window).on('load', function(){

    i do always use the jQuery in a different way – wrapping it inside a jQuery function allows me to use $ instead of jQuery:

    function popup_inline() { 
?>
<script type="text/javascript">
(function($) {
	$(window).on('load', function(){
		$('.pu-link a').addClass('open-popup-link');
		$('.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.
		});
	});
})(jQuery);
</script>
<?php 
}
add_action('wp_head', 'popup_inline');
    November 15, 2023 at 5:14 am #1425642
    Ismael

    Hi,

    Thank you for the update.

    but I would like it to look like a popup that only fills the device screen to about 75% of the space on desktop, but 100% of the space on mobile

    To adjust the size of the lightbox container on desktop view, try to use this css code instead.

    @media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */
  .mfp-ajax-holder .mfp-content,
  .mfp-inline-holder .mfp-content {
    width: 75%;
  }
}

    On mobile view, you can add this css to make the lightbox full width again.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .mfp-ajax-holder .mfp-content,
  .mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto;
  }
}

    Please make sure to remove the previous css modifications to get rid of the padding or space around the lightbox.

    Best regards,
    Ismael

    November 20, 2023 at 5:58 am #1426034
    MM

    Thanks both for all the help. I have got the popup how I want it on desktop, but on mobile it still needs some styling, and it appears to put the content of the colour section in a column the same width as is set in the css snippet you gave me (so width 75%).

    How can I style the two columns in the colour section (one with an image, one with a textblock) that is called from the popup link, to fill the width of the popup?

    Cheers,
    Matt

    November 20, 2023 at 8:25 am #1426038
    Ismael

    Hi,

    How can I style the two columns in the colour section (one with an image, one with a textblock) that is called from the popup link, to fill the width of the popup?

    Please add this code inside the css media query (max-width: 767px) for mobile view.

    #top .mfp-content .flex_column_table .flex_column {
    width: 100%;
}

    Best regards,
    Ismael

    November 22, 2023 at 12:05 am #1426222
    MM

    Thanks Ismael, this does the trick! You can close this ticket.

    November 22, 2023 at 5:44 pm #1426292
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Inline popup/lightbox styling’ is closed to new replies.