11. Website for PackshotViewer

            Single Embedded Animation

            By embedding a standalone animation into the website you give customers multiple views in one window. There is no need to click through different thumbnails to try to find the image or angle of the product you are looking for. Customer can start interacting with the animation whenever they are ready to see their preferred view.


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

            Generate Animation Dynamically

            In this section, we use server-side programming language (ex. php) to generate animation page dynamically. First, we need to change the file structure, and place animations together. Second, we add a .html page to list a product, after click the link of product, we pass the corresponding parameter to .php file. Finally, we add snippet to receive the parameter to decide which product we display.


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

             Download PackshotViewer Sample 


            Embedded Animation with Thumbnails
            This embedded animation uses the same viewing window for both thumbnails of their image and 360 animations. You simply mouse over the image/animation thumbnail you would like to view and it fills the larger screen. The no click approach makes transitioning between the images and animation smooth.

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

            Click to View animation

            If you want the animation to pop out into a separate window this approach might be the way to go. You can use a nice image of the product as a gateway to a 360 animation that opens in a separate window. Simply tell your customer “Click to see 360 view”.

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

            Multiple Embedded Animation

            Want to visually compare your product to other similar products. Including multiple embedded animations all on the same page simplifies the process of visually comparing for the customer. Can be used to upsell a potential customer to a more visually appealing product or suggest another product that might better fit their needs.


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

            Bring product animations to the screen without leaving the product page. Keep customers on the page, keep them close to the buy now button.

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

            Helpful?  
            Help us to make this article better
            0 0