Search code examples
javascriptmagento2galleryfotoramapdp

How to add external image in magento2 pdp


How can we add an external image for magento2 product detail page(not from the magento2 backend). I tried some stuff in the galley.phtml but not succeed. Is there anybody who can fix this, help me please.


Solution

  • add this code to gallery.phtml

    <script>
        require(['jquery'], function ($) {
            $(document).on('gallery:loaded', function () {
                var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
                var fotorama = $fotorama.data('fotorama');
                $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                    if (extra.frame.type === 'iframe') {
                        extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                    }
                });
                fotorama.push({
                    thumb: '<set your thumbnail image path>',
                    'src': '<set your image/video url>',
                    type: 'iframe',
                    caption: '<set your caption>'
                });
            });
        });
    </script>
    

    this fix my requirement.