How to add an inline Magnific-Pop? – CreaboxThemes Support

This topic has 5 replies, 2 voices, and was last updated 8 years, 8 months ago by CreaboxThemes.

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

Author

Posts
September 25, 2014 at 5:59 pm #4011

Celso
Participant

How to I add a inline Magnific-Pop to the template?

I have included the call in the head:
<script type=”text/javascript”>
$(‘.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.
});
</script>

The link:

Show inline popup

And the div that should open in the body:
<div id=”test-popup” class=”white-popup mfp-hide”>
<script type=’text/javascript’ src=”https://paywhirl.com/js/widget.js”></script>
<iframe frameBorder=”0″ style=’width:100%; height:auto; border:0; overflow:hidden;’ id=’paywhirl_frame’ scrolling=’no’ src=”https://paywhirl.com/widget?api_key=PW495CBB61AE5CA74C16FE76E307BE4BCA”></iframe>
</div>

Thanks,

September 25, 2014 at 10:27 pm #4017
CreaboxThemes
Keymaster
Hi Celso,

can you send me your url website to check the error?

Anyway, the script magnificPopup is used to show the images in the galley. It’s used in the file custom.js in this way:
```
/* ==============================================
    /* MAGNIFIC POPUP FOR PORTFOLIO
	================================================== */
	$('.portfolio-popup').magnificPopup({
		type: 'image',
		removalDelay: 500, //delay removal by X to allow out-animation
		callbacks: {
		beforeOpen: function() {
			   this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
			   this.st.mainClass = 'mfp-zoom-in';
			}
		},
		closeOnContentClick: true,
		fixedContentPos: false
	});
```
Regards
September 27, 2014 at 1:59 am #4025

Celso
Participant

This is the link: https://www.flooxa.com/index_offline.html

I’ve read on the magnific site how to implement it. I did notice your implementation on the custom.js, but I’m not entirely sure how to make it work with the inline or iframe mode.

September 27, 2014 at 6:47 am #4026

CreaboxThemes
Keymaster

Hi,

this template use Bootstrap 3 and you can add a modal easily. You can view the examples here: http://bit.ly/1t3RtYl
I have seen you are from Puerto Rico. Es más fácil para mí explicarme en español si no te importa.

Mira el ejemplo del pop-up de Bootstrap y si te gusta te ayudo a ponerlo, o dime si prefieres con el script de Magnific.

Regards

September 27, 2014 at 6:49 pm #4027

Celso
Participant

Muchas gracias, traté la versión de Bootstrap y funcionó muy bien.

September 28, 2014 at 6:51 am #4028

CreaboxThemes
Keymaster

Ok, si necesitas alga más, aquí estamos 😉

Saludos
Author

Posts

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

You must be logged in to reply to this topic.