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
Produto incluido
Bom dia!!
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:
<div class="pano-container" data-image="https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg"></div>
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;
});
});
});
});
}
Espero ter ajudado, até mais!!
cara voce como sempre me salvando. só tira uma duvida
Deu uma bugada kkkk
quando atualizo a pagina ele fica uma imagem manchada
Ele ficou tambem com ess aborda preta tem como centralizar na caixa
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.
desculpa produto errado to testando neste
ta assim
ta dando esses erros no console tbm
Access to XMLHttpRequest at ‘https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg’ from origin ‘https://www.evimero.com.br’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Tá o antigo aqui:
Você tem que pesquisar o produto (Produtos > Listar produtos), acessar ele, remover esse antigo, adicionar o novo e salvar.
Ja alterei esperando propagar, tem hora que demora.
Essa borda preta, é por causa de um espaço, que tá aqui:
<div class="pano-container" data-image="https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg"> </div>
Vê se é o editor que tá salvando dessa maneira, o correto é ficar sem espaço:
<div class="pano-container" data-image="https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg"></div>
eu salvo sem o espaço,e o editor inseri novamente
o tenso é isso só carrega a imagem se eu inspeciono a pagina.
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.
Java ou Css qual na usa opinião, é melhor? velocidade de execução, e eficacia.
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.
Cometi um erro no Script acima, editei ele.
Exato, será carregado somente na página que você inserir o elemento na Descrição do Produto.
