Bom dia caros amigos.
Trabalho com moveis de escritorio e uma das fabricas que trabalho disponibiliza em seu site, fotos em 3d das cadeiras, queria incluir ela na descrição dos produtos, tentei incorporar porém a imagem ficou preta não carregou em 3d.
Estudando o site a biblioteca usada por eles foi a Panolens , ja até inclui ela mais ficou preto
Sim, pelo que eu vi, utilizam o Plugin Panolens.js, mas analisando aqui, o que foi adicionado na Descrição do Produto, é apenas o elemento já trabalhado por ele, sem nenhum evento e nem nada do tipo.
O que pode-se fazer é adicionar o elemento antes da ação do Plugin dentro da Descrição do Produto:
Após isso, adicione o código no painel:
Visual > Incluir código HTML (Tipo: HTML)
<style>
/* Copiado da página de exemplo da marca enviada */
.pano-container {
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) {
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>
Funcionaria também com o Tipo: JavaScript
//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{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) {
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;
});
});
});
});
}
Deve ser porque o HTML da Descrição do Produto que foi copiado do site deles não foi substituído pelo que eu passei na minha resposta, substitui e faz o teste.
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;
});
});
});
});
}
Na minha opinião, carregar os Scripts via JS tem uma vantagem, que se eles não forem ser usados na página (não ter o elemento .pano-container), eles não vão ser carregados. Agora se carregá-los dentro do HTML, sempre vão ser carregados, independente do seu uso ou não.