[guacha]

Hi,

I’m inserting an image in the product page, using a woocommerce hook (the image is different for every product, that’s why I’m not using the Single Product Page Custom Popup option).

But, I’d like that the image open with the same popup effect you use for the “SIZE & FIT GUIDE” in your demo.

Is there a way to do that? I could insert any code, class or script to the image in my action code.

Thanks

[Althemist]

Hello guacha,

You’d need to use the magnific popup and style it the same way we did for the default popup (make it full screen etc.) The script is obviously included in the theme, so you’d just need to call it with a simple JS function.

Should you need more info, just let us know.

[guacha]

Thanks!

This is the code I used and worked well, in the case someone else needs it:

<div class="my-magnific-popup">
    <a href="http://domain.com/big-image.jpg">
        <img src="http://domain.com/thumbnail.jpg" alt="Size Chart" width="300" height="171" class="alignnone size-medium">
    </a>
</div>
<script type='text/javascript'>(function ($) {
		$(document).ready(function () {
			$('.my-magnific-popup a').magnificPopup({
				mainClass: 'grosso-product-popup-content mfp-fade',
				type: 'image',
				midClick: true
			});
		});
	})(window.jQuery);
</script>

Magnific Popup documentation: https://dimsemenov.com/plugins/magnific-popup/documentation.html

[Author]

Posts