Intégrer des animations HTML5 ImageCreator

12. ImageCreator pour les sites web

Intégration d'une animation 

En intégrant une animation sur votre site web, vous donnez aux clients plusieurs vues d'un produit dans une seule fenêtre. Il n'est pas nécessaire de cliquer sur différentes vignettes pour essayer de trouver l'image ou l'angle du produit que vous recherchez. Le client peut commencer à interagir avec l'animation dès qu'il est prêt à voir son point de vue préféré.



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

Générer une animation dynamique

Dans cette section, nous utilisons un langage de programmation côté serveur (ex. php) pour générer une page d'animation de manière dynamique. Tout d'abord, nous devons modifier la structure des fichiers et placer les animations ensemble. Ensuite, nous ajoutons une page .html pour lister un produit, après avoir cliqué sur le lien du produit, nous passons le paramètre correspondant au fichier .php. Enfin, nous ajoutons un extrait pour recevoir le paramètre permettant de décider quel produit nous affichons.

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

 Télécharger ImageCreator Sample 

Intégration d'animations avec vignettes (miniatures)
Cette animation intégrée utilise la même fenêtre de visualisation pour les deux vignettes de leur image et les animations 360. Il suffit de passer la souris sur la vignette de l'image/animation que vous souhaitez visualiser pour qu'elle remplisse l'écran plus grand. L'approche sans clic rend la transition entre les images et l'animation plus fluide.

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

Médias multiples

Une image fixe, une animation 360, une vidéo vous disent tout ce que vous devez savoir sur le produit et donnent au client un accès facile à sa méthode de média préférée. Les clients ont besoin de différentes supports visuels dans leur processus de décision. Avec une seule image, certains clients peuvent faire cet achat, tandis que d'autres peuvent avoir besoin de voir une animation 360 et/ou une vidéo pour valider leur commande.

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

Cliquer pour visualiser une animation 

Si vous souhaitez que l'animation apparaisse dans une fenêtre séparée, cette approche peut être la bonne. Vous pouvez utiliser une belle image du produit comme point d'accès à une animation à 360 degrés qui s'ouvre dans une fenêtre séparée. Dites simplement à votre client "Cliquez pour voir l'animation en 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>

Intégration de plusieurs animations

Vous souhaitez comparer visuellement votre produit à d'autres produits similaires. Intégrer plusieurs animations sur la même page simplifie le processus de comparaison visuelle pour le client. Elle peut être utilisée pour inciter un client potentiel à choisir un produit plus attrayant ou pour lui suggérer un autre produit qui pourrait mieux répondre à ses besoins.



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

Faites apparaître des animations de produits à l'écran sans quitter la page du produit. Gardez les clients sur la page, gardez-les à proximité du bouton "Acheter maintenant".

<!--
        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. PackshotViewer pour les sites web

      Intégration d'une animation  En intégrant une animation sur votre site web, vous donnez aux clients plusieurs vues d'un produit dans une seule fenêtre. Il n'est pas nécessaire de cliquer sur différentes vignettes pour essayer de trouver l'image ou ...

    • 10. PackshotCreator - Ortery Capture pour sites web

      Intégration d'une animation unique En intégrant une animation autonome dans le site web, vous donnez aux clients plusieurs vues dans une seule fenêtre. Il n'est pas nécessaire de cliquer sur différentes vignettes pour essayer de trouver l'image ou ...

    • 00. Intégration HTML sur AspDotNetStorefront

      Etapes à suivre pour l'intégration Etape 1. Entrez dans la page “Create Product”  Cliquez sur “Products > Create Product” dans la barre de tâches Etapes 2. Ouvrez “HTML Source Editor” Cliquez ensuite sur le bouton “HTML” au bas du formulaire de ...

    • 04. Magento 2

      PackshotCreator - OrteryCapture Etape 1. Installez l'extension Ouvrez le répertoire racine de Magento, et créez le répertoire app/code/directory. Ensuite, désarchivez le fichier .zip du module. Ouvrez "Terminal", et allez dans le répertoire racine de ...

    • 03. Magento

      PackshotCreator - OrteryCapture Etape 1. Installez l'extension Entrez dans ''Magento Connect Manager'' Téléchargez l'extension depuis le disque local Actualisez les données  Etape 2. Paramétrage de l'extension Connectez-vous dans le panneau ...