Magnific Popup & Enfold conflicts - Support | Kriesi.at

Tagged: MAGNIFIC POP UP

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
August 23, 2017 at 4:23 am #842839
gocreative
Participant
I’ve created a custom post type with custom templates and using Enfolds version of magnificPopup to create a popup gallery in my post list.

The gallery initializes correctly and works as intended if I click the image inside the initialized gallery element to open the pop up, but if I use jQuery to open the gallery with a button the popup style changes, does not animate and I’ve had to overwrite the .mfp-figure element in CSS to opacity: 1 to show the images in the popup, overwriting a style in Enfold’s layout.css.

Perhaps there is some Enfold style that doesn’t get added when opening the popup using magnificPopup(‘open’)?

I initialize each gallery on the page using:
```
$('.go_products-popup-gallery').each(function() {
		$(this).magnificPopup({
			delegate: 'a',
			type: 'image',
			tLoading: 'Loading image #%curr%...',
			mainClass: 'mfp-img-mobile',
			gallery: {
				enabled: true,
				navigateByImgClick: true,
				preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
			},
			image: {
				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
			}
		});
});
```
And open the gallery with the button using:
```
$('.go-gallery-btn').click(function(e) {
	e.preventDefault();
	var id = $(this).data('id').toString();
	$(".go_products-popup-gallery[data-id='"+id+"']").magnificPopup('open');
});
```
August 26, 2017 at 4:47 am #844271
Ismael
Moderator
Hey Grant,

Thank you for using Enfold.

Please add this code in the Quick CSS field.
```
.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
```
Best regards,
Ismael
October 27, 2018 at 9:29 am #1026986

Raphael
Participant

Hi,
is the avia popup ( the magnific Popup ) kicked out on the newest Version of enfold?

My inline popup enabler isn´t working anxy more? I cxan not find the Popup

October 27, 2018 at 6:58 pm #1027163
Mike
Moderator
Hi,
The popup is still working, try testing with this code:
```
<script type="text/javascript">
jQuery(window).load(function(){
  jQuery('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });
});
</script>

<a href="#test-popup" class="open-popup-link">Click this button to open a lightbox</a>

<div id="test-popup" class="white-popup mfp-hide">
THIS IS A LIGHTBOX
</div>
<style>
/*css*/
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
</style>
```
Paste all of it in a code block element on a page, it will create a link and popup on just that page.
If this doesn’t work then please include admin login in the Private Content area.

Best regards,
Mike
December 17, 2018 at 6:58 am #1046182

Dave
Participant

This reply has been marked as private.

December 17, 2018 at 11:31 am #1046241

2011apuchin
Participant

Hi, I have updated WordPress and Enfold theme to the latest versions and the function of Magnific popup Enfold has disappeared, I have tried with the code reached and it does not work, can you help me please.

December 18, 2018 at 4:04 am #1046718

Mike
Moderator

Hi,

@2011apuchin, thanks for the login, I added the popup function to your functions.php, it was probably overwritten when you updated.
Then I created a test page /magnificpopup-test/ where I created a test popup that works good. Please check.
Feel free to delete the test page as you wish.

@big-webdesign, please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

December 18, 2018 at 6:04 am #1046735

Dave
Participant

This reply has been marked as private.

December 18, 2018 at 7:13 am #1046742

Mike
Moderator

Hi,

@big-webdesign I first enabled all builder elements to be loaded at: Enfold Theme Options > Performance > Disable Template Builder Elements > Always load all elements Then your page gave the error: jQuery is not defined with this clue I noticed that your jQuery options are not showing in the theme options:

so I believe your webhost has added the function to load your jQuery after the footer in your wp-config.php file, some Managed WordPress Hosts do this to speed up the site.
Please ask your webhost to help you remove the code so your jQuery loads in the header.
I also recommend updating your Enfold to version 4.5.1 so you can switch to the advanced layout builder on the pages, you should have a button like this at the top of your pages:

Best regards,
Mike

December 18, 2018 at 12:38 pm #1046824

2011apuchin
Participant

@Mike

Thank you very much, I saw my mistake.

Now I can not activate the debug mode to be able to copy the shortcode to place the pop up.
The accesses that reach you are still active.

Thanks again.

December 18, 2018 at 1:40 pm #1046851
Mike
Moderator
Hi,
The code for debug mode needs to be placed after line 17 in the functions.php, right after this line:
```
if(isset($avia_config['use_child_theme_functions_only'])) return;
```
I added it for you, please check.

Best regards,
Mike
December 18, 2018 at 2:23 pm #1046867

2011apuchin
Participant

@Mike.

Mike, Thank you very much you are great, please I need one last help: that the pop up opens a few seconds after loading the web and also when clicking buttons

December 19, 2018 at 4:43 am #1047097

Mike
Moderator

Hi,

@2011apuchin I took a look at your functions.php and it looks like you have a function to open a popup automatically with a delay.

Best regards,
Mike

December 19, 2018 at 6:33 am #1047110

Dave
Participant

This reply has been marked as private.

December 19, 2018 at 2:40 pm #1047201
Mike
Moderator
Hi,

@big-webdesign are you using WP Engine? If not which webhost are you using?
The modification of the wp-config.php that I’m thinking of is adding:
```
define('CONCATENATE_SCRIPTS', false);
```
Perhaps if I could FTP in and see your wp-config.php I could be of more assistance.
I recommend opening a new thread, and include your admin login & ftp access in the Private Content area, but as this is not your thread your login info will not be private if posted here.
You can link to the new thread here so we can find it easier.

Best regards,
Mike
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.