Integrar una foto animada HTML5 con PackshotViewer

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 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.



    <!-- define an animation container -->
    <div id="sample3d" style="position:relative; width: 600px; height: 600px; top: 0px; left: 0px;">
    <img class="animateThumbnailImg" src="./images/glasses/icon.jpg" />
    </div>

    <!-- include program files -->
    <script type="text/javascript" src="./Programs/HTML5/jQuery.js"></script>
    <script type="text/javascript" src="./Programs/HTML5/HTML5Loader.js" id="animateScript"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            // use id of the elem to call animate3D method
            $('#sample3d').animate3D({
                autoAllocation: false,
                pathProfiles:   './Profiles/Profile.xml'
            });
        });
    </script> 

Generar una foto animada de forma dinámica

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
    - Programs/
    - HTML5/
        - *.js
        - *.css
    - BuzzLightyear/
        - Images/
            - Lv1/
                - *.jpg
            - Lv2/
                - *.jpg
            - *.jpg
        - Profiles/
            - Icons/
                - *.gif
                - *.png
            - *.xml
    - Glove/
        - Images/
            - Lv1/
                - *.jpg
            - Lv2/
                - *.jpg
            - *.jpg
        - Profiles/
            - Icons/
                - *.gif
                - *.png
            - *.xml
    - HomePage.html
    - PHPViewer.php 


    <!-- HomePage.html -->

    <!DOCTYPE html>
    <html>
    <head>
        <title>Home Page</title>
    </head>
    <body>
        <li><a href="#" onclick="openAnimation(this)">BuzzLightyear</a></li>
        <li><a href="#" onclick="openAnimation(this)">Glove</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"];
    ?>

    <!-- define an animation container -->
    <div id="sample3d" style="position:relative; width: 600px; height: 600px; top: 0px; left: 0px;"></div>

    <!-- include program files -->
    <script type="text/javascript" src="./Programs/HTML5/jQuery.js"></script>
    <script type="text/javascript" src="./Programs/HTML5/HTML5Loader.js" id="animateScript"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            // use id of the elem to call animate3D method
            $('#sample3d').animate3D({
                autoAllocation: true,
                pathImages: './<?php echo $objName; ?>/Images/',
                pathIcons: './<?php echo $objName; ?>/Profiles/Icons/',
                pathProfiles:   './<?php echo $objName; ?>/Profiles/Profile.xml'
            });
        });
    </script>

 Descargar PackshotViewer Sample 


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>

Multiple Media

One still image, one 360 animation, one video tell you all you need to know about the product and give the customer easy access to their preferred method of media. Customers require different avenues of media in their decision making process. With one image some customers might make that purchase, while others might need to see a 360 animation and/or a video to proceed to checkout.

<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.



    <!-- define animation containers -->
    <div class="multiple-embeded-animate" style="position:relative;width:600px;height:600px;">
        <img class="animateThumbnailImg" src="./images/hat/icon.jpg" />
    </div>
    <div class="multiple-embeded-animate" style="position:relative;width:600px;height:600px;">
        <img class="animateThumbnailImg" src="./images/cowboy_hat/icon.jpg" />
    </div>

    <!-- include program files -->
    <script type="text/javascript" src="./Programs/HTML5/jQuery.js"></script>
    <script type="text/javascript" src="./Programs/HTML5/HTML5Loader.js" id="animateScript"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            // use class of the elem to call animate3D method
            $('.multiple-embeded-animate').animate3D({
                autoAllocation: true,
                // use array to store multiple xml path and image path
                pathProfiles: ['./xml/hat/Profile.xml', './xml/cowboy_hat/Profile.xml'],
                pathImages:   ['/images/hat/', './images/cowboy_hat/']
            });
        });
    </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".

<!--
        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>

    <!-- use href attribute to assign iframe link -->
    <a class="shadow-box-gallery" href="https://truview.ortery.com/guide.page/samples/mouse.html">
        <div style="background-image:url(./images/thumbnail/logitech_mouse.jpg);"></div>
    </a>
    <a class="shadow-box-gallery" href="https://truview.ortery.com/guide.page/samples/hard_drive.html">
        <div style="background-image:url(./images/thumbnail/hard_drive.jpg);"></div>
    </a>
    <a class="shadow-box-gallery" href="https://truview.ortery.com/guide.page/samples/headphone.html">
        <div style="background-image:url(./images/thumbnail/astroedit.jpg);"></div>
    </a>
    <a class="shadow-box-gallery" href="https://truview.ortery.com/guide.page/samples/printer.html">
        <div style="background-image:url(./images/thumbnail/printer.jpg);"></div>
    </a>

    <script>
        // use class to call colorbox method, and set iframe property true
        $('.shadow-box-gallery').colorbox({iframe:true, width:'80%', height:'80%', maxWidth: '80%', maxHeight: '80%'});
    </script>


    • Related Articles

    • 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 ...

    • 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 ...

    • 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 ...

    • 07. ¿Cómo registrar y activar mi software PackshotViewer?

      Después de instalar el software, se le pedirá un código de 8 números. Para obtenerlo, basta con hacer clic en "Registrarse". Si aparece este mensaje de error:  Haga clic en el siguiente enlace: http://packshot.ishow3d.com/ y introduzca los datos ...

    • 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 ...