Dit artikel is uit het Engels vertaald. De Engelse versie is via deze link te raadplegen.
Goed om te weten; de genoemde 360 viewer is met onze licentie kosteloos en onbeperkt te gebruiken.
Belangrijk om te weten!
Weebly staat het uploaden van mappen met 360-productafbeeldingen naar hun hosting niet toe, dus een apart webhosting account is vereist. Je kunt bijvoorbeeld een bestaande website gebruiken die al buiten Weebly wordt gehost, een extra hosting account instellen of onze geoptimaliseerde PixRiot-service overwegen.
Snelle integratie met een iFrame
Voor een snelle integratie in ‘YouTube-stijl’ met iFrame, raadpleeg je onze gebruikershandleiding onder Webintegratie -> Insluiten via iFrame. Als dit goed voor je werkt, kun je de rest van het bericht negeren.
Echte intergratie met onze plugin
1. Upload de bestanden
Upload met een FTP applicatie de inhoud van de 360_assets-map naar je webhosting.
let op: Weebly staat het uploaden van mappen met 360-productafbeeldingen naar hun hosting niet toe, dus een apart webhosting account is vereist.
2. Noteer de URL
Noteer (kopieer/plak) na het uploaden de locatie van het xml-bestand in de geüploade map (bijvoorbeeld http://my-domain.com/360-views/my-product/my-product.xml). Je hebt deze URL nodig voor de volgende stappen.
https://cdn.webrotate360.com/examples/3.6/sampleshoe/config.xml<code\>3. Log in
Log in op Weebly en ga naar Instellingen -> SEO
4. plak regels
Plak de regels onder Voettekst Code en klik op Opslaan.
Voor het testen kun je ook de onderstaande instellingen gebruiken:
<script src="https://cdn.webrotate360.com/lib/jquery/jquery.js"></script><script src="https://cdn.webrotate360.com/lib/imagerotator/latest/js/imagerotator.js"></script>
5. Instellingen sluiten
Sluit de Instellingen en open een Weebly-pagina uit waar je je 360-productrotatie wilt toevoegen.
6. Build selecteren
Selecteer Build en sleep de insluitcode-widget naar je pagina indien nodig..
7. Bewerkingsmodus openen
Klik op de insluitcode-widget die je zojuist op je pagina hebt geplaatst om de bewerkingsmodus te openen en plak het volgende fragment, waarbij je de URL naast “xmlfile” vervangt door de URL die je in de vorige stap hebt geüpload of de voorbeeld-URL die wordt getoond in stap 4.
8. Wijzig de waarden van de lay-out
Wijzig de waarden voor breedte en hoogte indien nodig.
Voor het testen kun je ook onderstaande paramaters gebruiken:
<div class="wr360embed-cdl" style="width: 100%; height: 600px;" data-imagerotator="{"xmlfile":"http://your-config-url.xml"}"></div>
Er zijn enkele opties die je in de laatste stap kunt configureren. Hieronder zie je een voorbeeld met alle beschikbare opties:
<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{ "xmlfile":"http://your-config-url.xml", "graphics": "https://cdn.webrotate360.com/lib/imagerotator/graphics", "basewidth": 1024, "minheight": 400 "events": true, "name": "my-view", "rootpath": "http://my-cdn-for-images.com/product1/", "onready": your-javascript-callback}'> </div>
overige details en instellingen
Hier zijn meer details over elke opties:
basiswidth
breedte in pixels die je kunt instellen om het kijkvenster niet alleen horizontaal te laten schalen, wat standaard werkt als een bovenliggende container een relatieve breedte heeft, maar ook verticaal. Het vertegenwoordigt gewoonlijk je standaard viewer breedte in de paginalay-out voordat een responsieve schaal wordt toegepast. Wanneer het is ingesteld, wordt de hoogte van de kijker automatisch geschaald ten opzichte van de geschaalde breedte.
minheight
als basewidth is opgegeven, vertegenwoordigt deze instelling de minimum viewer-hoogte in pixels. Dit kan handig zijn op kleine beeldschermen waar je misschien niet wilt dat de kijker een bepaald minimum overschrijdt.
events
stel dit in op true als Google Analytics op je website is geïntegreerd en je de gebruikersbetrokkenheid met uw 3D-product weergaven wilt volgen volgens dit recente artikel op onze blog.
name
indien opgegeven, wordt deze naam weergegeven in het bijhouden van gebeurtenissen in Google Analytics, zodat je de gebeurtenissen op elke weergave kunt sorteren.
rootpath
als je afbeeldingen host op een CDN-server of als je één xml-configuratie nodig heeft voor al je 360-weergaven, kun je de afbeeldingslocatie configureren met behulp van dit pad.
Succes met installatie!
Wij hopen dat je snel de 360 foto’s snel draaiend krijgt. Voor sommige platforms biedt de leverancier van onze software ook een installatieservice aan.
