10. PackshotCreator - Ortery Capture para sitios web
Integrar una foto animada sencilla
Al incrustar una foto animada (en 360 o 3D) sencilla en el sitio web, le das a los clientes múltiples vistas en una sola ventana. No es necesario hacer clic en diferentes miniaturas para tratar de encontrar la imagen o el ángulo del producto que está buscando. El cliente puede comenzar a interactuar con la foto animada cuando esté listo para ver su vista preferida.
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360({
object: {
name: 'watch',
model: 'cylindrical',
columns: 24,
width: 500,
height: 276
},
path: {
image: './watch/images/'
}
});
});
</script>En esta sección, usamos el lenguaje de programación del lado del servidor (ej. php) para generar la página de foto animada dinámicamente. Primero, necesitamos cambiar la estructura de los archivos, y colocar las fotos animadas juntas. Segundo, agregamos una página .html para listar un producto, después de hacer clic en el enlace del producto, pasamos el parámetro correspondiente al archivo .php. Finalmente, añadimos un fragmento para recibir el parámetro para decidir qué producto mostramos.
// File Structure
- icons/
- *.png
- *.svg
- libs/
- *.js
- *.css
- DBGlassses/
- images/
- *.jpg
- OakleyGlasses/
- images/
- *.jpg
- RedWatch/
- images/
- *.jpg
- HomePage.html
- PHPViewer.php
<!-- HomePage.html -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<li><a href="#" onclick="openAnimation(this)">DBGlasses</a></li>
<li><a href="#" onclick="openAnimation(this)">OakleyGlasses</a></li>
<li><a href="#" onclick="openAnimation(this)">RedWatch</a></li>
<script type="text/javascript">
function openAnimation (pressedBtn) {
var btnValue = pressedBtn.innerText;
window.location = './PHPViewer.php?name=' + btnValue;
};
</script>
</body>
</html> <!-- PHPViewer.php -->
<?php
$objName = $_GET["name"];
?>
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360({
object: {
name: '<?php echo $objName; ?>',
model: 'cylindrical',
columns: 24,
width: 500,
height: 276
},
path: {
image: './<?php echo $objName; ?>/images/'
}
});
});
</script>
Foto animada integrada con viñetas
Esta foto animada integrada utiliza la misma ventana de visualización tanto para las viñetas de su imagen como para las fotos en 360º. Simplemente pasa el ratón por encima de la miniatura de la imagen/foto animada que quieres ver y llena la pantalla más grande. El enfoque sin clic hace que la transición entre las fotos animadas sea suave.
<style>
.embeded-animation-view {
position: relative;
}
.embeded-animation-view ul {
text-align: center;
}
.embeded-animation-view ul li {
position: absolute;
box-sizing: border-box;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
}
.embeded-animation-view ul li:first-child {
display: block;
}
.embeded-animation-view ul li div {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="embeded-animation-view">
<ul>
<li>
<div style="background-image:url(images/mario/Lv2/img02.jpg);"></div>
</li>
<li>
<div style="background-image:url(images/mario/Lv2/img11.jpg);"></div>
</li>
<li>
<iframe src="https://truview.ortery.com/guide.page/samples/mario.html" frameborder="0" width="100%" height="100%"></iframe>
</li>
</ul>
</div>
<div class="embeded-animation-slider">
<div style="background-image:url(images/thumbnail/mario-front.jpg);"></div>
<div style="background-image:url(images/thumbnail/mario-back.jpg);"></div>
<div style="background-image:url(images/360.jpg);"></div>
</div>
<script>
$('.embeded-animation-slider').on('mouseover', '.doc-thumbnail', function () {
var index, items;
// get current index of thumbnail
index = $('.embeded-animation-slider .doc-thumbnail').index(this);
items = $('.embeded-animation-view li');
// hide all <li> elements and show the matched index
items.css('display', 'none').eq(index).css('display', 'block');
});
</script>
Una imagen fija, una foto en 360 grados, un video le dice todo lo que necesita saber sobre el producto y le da al cliente un fácil acceso a su método preferido de medios de comunicación. Los clientes requieren diferentes vías de medios en su proceso de toma de decisiones. Con una imagen algunos clientes pueden hacer esa compra, mientras que otros pueden necesitar ver una foto 360 y/o un video para proceder a la compra.
<style>
.multiple-media-view {
position: relative;
}
.multiple-media-view ul {
text-align: center;
}
.multiple-media-view ul li {
position: absolute;
box-sizing: border-box;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
}
.multiple-media-view ul li:first-child {
display: block;
}
.multiple-media-view ul li div {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="multiple-media-view">
<ul>
<li>
<div style="background-image:url(images/franz/Lv2/img02.jpg);"></div>
</li>
<li>
<iframe src="https://truview.ortery.com/guide.page/samples/franz.html" frameborder="0" width="100%" height="100%"></iframe>
</li>
<li>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/pG82eqNXvew" frameborder="0"></iframe>
</li>
</ul>
</div>
<div class="multiple-media-slider">
<div style="background-image:url(images/thumbnail/franz.jpg);"></div>
<div style="background-image:url(images/360.jpg);"></div>
<div style="background-image:url(images/youtube.jpg);"></div>
</div>
<script>
$('.multiple-media-slider').on('click', '.doc-thumbnail', function () {
var index, items;
// get current index of thumbnail
index = $('.multiple-media-slider .doc-thumbnail').index(this);
items = $('.multiple-media-view li');
// hide all <li> elements and show the matched index
items.css('display', 'none').eq(index).css('display', 'block');
});
</script>
Haga clic para ver la foto animada
Si quieres que la foto animada salga en una ventana separada, este enfoque podría ser el camino a seguir. Puedes usar una buena imagen del producto como puerta de entrada a una foto360 que se abre en una ventana separada. Simplemente dile a tu cliente "Haz clic para ver la vista de 360".
<!--
Implement shadow box effect by colorbox plugin.
(http://www.jacklmoore.com/colorbox/)
-->
<link rel="stylesheet" type="text/css" href="styles/colorbox.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.colorbox.js"></script>
<a class="doc-thumbnail-bumblebee" href="./images/bumblebee/Lv2/img01.jpg">
<div style="background-image:url(./images/thumbnail/bumblebee_front.jpg);"></div>
</a>
<a class="doc-thumbnail-bumblebee" href="./images/bumblebee/Lv2/img20.jpg">
<div style="background-image:url(./images/thumbnail/bumblebee_right.jpg);"></div>
</a>
<a class="doc-thumbnail-bumblebee" href="./images/bumblebee/Lv2/img13.jpg">
<div style="background-image:url(./images/thumbnail/bumblebee_back.jpg);"></div>
</a>
<a class="doc-thumbnail-bumblebee" href="https://truview.ortery.com/guide.page/samples/bumblebee.html">
<div style="background-image:url(images/360.jpg);"></div>
</a>
<script>
// use class to call colorbox method
// use rel property to group elements together for a gallery
// the transition type can be set to "elastic", "fade", or "none"
$('.doc-thumbnail-bumblebee').colorbox({rel: 'doc-thumbnail-bumblebee', transition: 'fade', width:'80%', height:'80%', maxWidth: '80%', maxHeight: '80%'});
// set iframe property true to ask program open last one by <iframe>
$('.doc-thumbnail-bumblebee').last().colorbox({iframe: true});
</script>
Integrar a varias fotos animadas
Quiere comparar visualmente su producto con otros productos similares. Incluir múltiples fotos 360 todas en la misma página simplifica el proceso de comparación visual para el cliente. Se puede utilizar para aumentar la venta de un cliente potencial a un producto más atractivo visualmente o para sugerir otro producto que se ajuste mejor a sus necesidades.
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360([
{ // the first item
object: {
name: 'hat',
model: 'cylindrical',
columns: 20,
width: 500,
height: 321
},
path: {
image: './hat/images/'
}
},
{ // the second item
object: {
name: 'cowboy_hat',
model: 'cylindrical',
columns: 16,
width: 499,
height: 267
},
path: {
image: './cowboy_hat/images/'
}
}
]);
});
</script>Shadow box
Lleva las fotos animadas del producto a la pantalla sin salir de la página del producto. Mantén a los clientes en la página, mantenlos cerca del botón "Comprar ahora".
Related Articles
11. Sitios web PackshotViewer
Integrar una foto animada sencilla Al incrustar una foto animada (en 360 o 3D) sencilla en el sitio web, le das a los clientes múltiples vistas en una sola ventana. No es necesario hacer clic en diferentes miniaturas para tratar de encontrar la ...
04. Magento 2
PackshotCreator - OrteryCapture Paso 1. Instalar la extensión Abre el directorio raíz de Magento, y crea el directorio app/code/. Luego desarchiva el archivo .zip del módulo. Abre "Terminal", y ve al directorio raíz de Magento. Introduce el comando ...
03. Magento
PackshotCreator - OrteryCapture Paso 1. Instalar la extensión Entrar en Magento Connect Manager Descargar la extensión desde el disco local Actualizar los datos Step 2. Configuración de la extensión Entra en el panel de administración de tu pagina ...
06. Volusion
Pasos para la integración Paso 1. Entra en la página "Add a Product'' (Añadir un producto). Haga clic en “Inventory > Products” (Inventario > Productos) en la barra del navegador Haga clic en el botón “Add Products” (Añadir productos). Paso 2. Abrir ...
08. WordPress
Pasos para la integración Paso 1. Añadir un nuevo plugin Haz clic en "Plugins" en el lado izquierdo, y selecciona "Add New'' (Añadir nuevo) Paso 2. Busca e instala el plugin "iframe" Escriba "iframe" en el campo de entrada de la búsqueda, y luego ...