How to add an inline Magnific-Pop?

Support Forums Cian – HTML Template How to add an inline Magnific-Pop?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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&gt;
    <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&gt;
    </div>

    Thanks,

    #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

    #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.

    #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

    #4027
    Celso
    Participant

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

    #4028
    CreaboxThemes
    Keymaster

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

    Saludos

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.