ResolvedImage popup in single product page

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22963
    guacha
    Participant

    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

    #22980
    Althemist
    Keymaster

    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.

    #22994
    guacha
    Participant

    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

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

You must be logged in and have valid license to reply to this topic.

License required for any item belonging to this account
AlThemist

AlThemist

sales 13887, followers 699
Login and Registration Log in · Register