Support › Forums › Cian – HTML Template › How to add an inline Magnific-Pop?
- This topic has 5 replies, 2 voices, and was last updated 9 years, 6 months ago by CreaboxThemes.
-
AuthorPosts
-
September 25, 2014 at 5:59 pm #4011CelsoParticipant
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:
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 #4017CreaboxThemesKeymasterHi 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 #4025CelsoParticipantThis 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 #4026CreaboxThemesKeymasterHi,
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 #4027CelsoParticipantMuchas gracias, traté la versión de Bootstrap y funcionó muy bien.
September 28, 2014 at 6:51 am #4028CreaboxThemesKeymasterOk, si necesitas alga más, aquí estamos 😉
Saludos
-
AuthorPosts
- You must be logged in to reply to this topic.