360 graden foto's op Weebly | productfotografie
Weebly

360 graden foto’s op Weebly

Installatiehandleiding hoe 360 graden foto's op Weebly te plaatsen

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.

Voor het testen kun je ook de onderstaande link gebruiken: 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="{&quot;xmlfile&quot;:&quot;http://your-config-url.xml&quot;}"></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. 

Ik wil graag contact! een afspraak maken meer informatie

  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.
Scroll naar top