Embedding HTML5 animations ImageCreator

12. Website for ImageCreator

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.



    <!-- include program files -->
    <link rel="stylesheet" type="text/css" href="styles/HTML5Viewer.css" />
    <script type="text/javascript" src="scripts/jQuery.js"></script>
    <script type="text/javascript" src="scripts/jQueryPlugin.js"></script>
    <script type="text/javascript" src="scripts/HTML5Loader.js"></script>
    <script type="text/javascript" src="scripts/HTML5Viewer.js"></script>

    <!-- define an animation container -->
    <div id="sample360" class="animateCreatorContainer" style="width:600px; height:600px;"></div>
    <script>
        jQuery(function ($) {
            // use id of the elem to call animate360 method
            $('#sample360').animate360({
                centerInWindow: true,
                xmlPath:  './',
                iconPath: './HTML5/Images/',
                objPath:  './Images/'
            });
        });
    </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
    - HTML5/
        - Images/
            - *.gif
            - *.png
        - *.js
        - *.css
    - Images/
        - DBGlassses/
            - Lv2/
                - *.jpg
        - OakleyGlasses/
            - Lv2/
                - *.jpg
        - RedWatch/
            - Lv2/
                - *.jpg
    - Profiles/
        - DBGlassses/
            - Profile.xml
        - OakleyGlasses/
            - Profile.xml
        - RedWatch/
            - Profile.xml
    - 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" type="text/css" href="styles/HTML5Viewer.css" />
    <script type="text/javascript" src="scripts/jQuery.js"></script>
    <script type="text/javascript" src="scripts/jQueryPlugin.js"></script>
    <script type="text/javascript" src="scripts/HTML5Loader.js"></script>
    <script type="text/javascript" src="scripts/HTML5Viewer.js"></script>

    <!-- define an animation container -->
    <div id="sample360" class="animateCreatorContainer" style="width:600px; height:600px;"></div>
    <script>
        jQuery(function ($) {
            // use id of the elem to call animate360 method
            $('#sample360').animate360({
                centerInWindow: true,
                xmlPath:  './<?php echo $objName; ?>/',
                iconPath: './HTML5/Images/',
                objPath:  './Images/'
            });
        });
    </script>                        

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



    <!-- include program files -->
    <link rel="stylesheet" type="text/css" href="styles/HTML5Viewer.css" />
    <script type="text/javascript" src="scripts/jQuery.js"></script>
    <script type="text/javascript" src="scripts/jQueryPlugin.js"></script>
    <script type="text/javascript" src="scripts/HTML5Loader.js"></script>
    <script type="text/javascript" src="scripts/HTML5Viewer.js"></script>

    <!-- define animation containers -->
    <div class="animateCreatorContainer" style="width:600px; height:600px"></div>
    <div class="animateCreatorContainer" style="width:600px; height:600px"></div>

    <script>
        jQuery(function ($) {
            // use class of the elem to call animate360 method
            $('.multiple-embeded-animate').animate360({
                centerInWindow: false,
                // use array to store multiple xml path
                xmlPath:  ['./xml/hat/', './xml/cowboy_hat/'],
                iconPath: './icons/',
                objPath:  './images/'
            });
        });
    </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>
                


    • Related Articles

    • 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 ...
    • 10. Website for PackshotCreator - Ortery Capture

      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 ...
    • 04. Magento 2

      PackshotCreator - OrteryCapture Step 1. Install the extension Open Magento root directory, and create app/code/ directory. Then unarchive module .zip file. Open “Terminal”, and go to Magento root directory. Input “php -f bin/magento module:enable -c ...
    • 03. Magento

      PackshotCreator - OrteryCapture Step 1. Install the extension Enter Magento Connect Manager Upload the extension from local disk Refresh data Step 2. Extension setting Login in admin panel in your Magento website, then enter system -> configuration, ...
    • 07. Wix

      Steps to embed Step 1. Create a “Embed a Site” Component Click “Add” button, select “More” tab, and select “Embed a Site” Step 2. Open “HTML Settings” Click “Enter Website Address” to open “HTML Settings” panel Step 3. Input Animation Link Select ...