Adicionar Efeito 3d em foto

Layout
11

Sem problemas, faz um teste então, modifica o estilo e o Script, adicionando width: 100% ao .pano-container e $(this).html('') após a função each():
Visual > Incluir código HTML (Tipo: HTML)

<style>
    /* Copiado da página de exemplo da marca enviada */
    .pano-container {
        width: 100%;
        height: 600px;
    }

    @media (max-width: 1199px) {
        .pano-container {
            height: 500px;
        }
    }

    @media (max-width: 767px) {
        .pano-container {
            height: 300px;
        }
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js"></script>
<script>
    //Copiado da página de exemplo da marca enviada
    $(document).ready(function() {
        var panorama = [];
        var viewer = [];

        $('.pano-container').each(function(index) {
            $(this).html('');
            
            panorama[index] = new PANOLENS.ImagePanorama($(this).data('image'));
            viewer[index] = new PANOLENS.Viewer({ container: $(this).get(0) });
            viewer[index].add(panorama[index]);
            viewer[index].addUpdateCallback(function() {
                viewer[index].panorama.rotation.y -= -0.001;
                viewer[index].OrbitControls.noZoom = true;
            });
        });
    });
</script>

Ou se quiser somente usando JS:

//Os Scripts serão carregados somente nas páginas de produto em que o elemento tiver sido inserido
//Caso queira verificar a marca, é possível também: if($('[itemprop=brand] [itemprop=name]').attr('content') === 'PLAXMETAL')
if($('.pano-container').length) {
    $('head').append('<style>.pano-container{width:100%;height:600px}@media (max-width:1199px){.pano-container{height:500px}}@media (max-width:767px){.pano-container{height:300px}}</style>');

    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js').done(function() {
        $.getScript('https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js').done(function() {
            //Copiado da página de exemplo da marca enviada
            var panorama = [];
            var viewer = [];

            $('.pano-container').each(function(index) {
                $(this).html('');

                panorama[index] = new PANOLENS.ImagePanorama($(this).data('image'));
                viewer[index] = new PANOLENS.Viewer({ container: $(this).get(0) });
                viewer[index].add(panorama[index]);
                viewer[index].addUpdateCallback(function() {
                    viewer[index].panorama.rotation.y -= -0.001;
                    viewer[index].OrbitControls.noZoom = true;
                });
            });
        });
    });
}

*Obs: Escolha somente um dos 2 acima.

2 curtidas