360 Salongsvy

För numrerade salonger erbjuder Tixly-systemet en 360-vy från plats vid onlineköp. Detta dokument beskriver vad som krävs för att detta ska fungera.

Objekt

Två typer av “objekt” krävs för att Tixly ska kunna visa 360-bilden:

• En jpg-miniatyrbild, som visas på sidan som en förhandsvisning.
• En HTML-sida med den faktiska bilden/panoramavyn. Den visas i en iframe när kunden klickar på förhandsvisningsbilden.

Notis!
För närvarande stöds inte 3D-panorama bilder som är värd på tredjepartsplattformar såsom Pacifica och 3D Digital Venue.

Miniatyrbilder

En typisk miniatyrbild visas i ungefär 250x160px på en dator och 200x160px på mobila enheter som en förhandsvisning av panoramat.

Följande stilar tillämpas så att bilden alltid täcker hela området och fokuserar på mitten:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

HTML-sida

Sidan behöver ha funktionaliteten att visa 360-bilder (eller enskilda bilder) för användaren i helskärmsläge.

Hur detta uppnås är upp till klienten (det finns många olika sätt att göra detta). Vi rekommenderar dock alltid att minimera storleken på dessa sidor/bilder/mappar för att ge användaren en så smidig upplevelse som möjligt. Se också till att dessa fungerar i alla webbläsare och skärmstorlekar.

Mappstruktur

Vilken mappstruktur som helst är möjlig, men Tixly rekommenderar att data struktureras i mappar som tydligt visar vad som representeras, till exempel kan varje HTML-sida finnas i en mapp som indikerar sektionsnamn, radnamn och platsnamn. Detsamma gäller för miniatyrbilder; dessa kan antingen placeras i varje HTML-sidas mapp eller samlas i en separat mapp. Se exempel.

Bildtäthet

Det är inte nödvändigt att varje plats har en egen bild, det är upp till klienten. Det kan vara en bild per sektion eller en bild per x antal platser i en rad. Tixly mappar bilderna till platser en och en, så notera vilka platser som ska visa vilken bild. Du kan ha en annan miniatyrbild per plats men använda endast en HTML-sida med panorama för flera platser.

CSV-mappning

Det sista som behövs för importen är en CSV-mappning för miniatyrbilder och HTML-sidor till platser i en salong.

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath

Exempel

Specifik miniatyrmapp

Följande mappstruktur kan användas:

• /thumbnails
  • floor-2-3.jpg
  • floor-2-4.jpg
• /html
  • /floor-2-3
    • view.html
    • big-image-2-3.jpg
  • /floor-2-4
    • view.html
    • big-image-2-4.jpg

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath
Summerhall;Floor;2;3;/thumbnails/floor-2-3.jpg;/html/floor-2-3/view.html
Summerhall;Floor;2;4;/thumbnails/floor-2-4.jpg;/html/floor-2-4/view.html

Givet följande mappstruktur:

• /summer
  • /floor
    • /2-3
      • view.html
      • thumb.jpg
      • big-image-2-3.jpg
    • /2-4
      • view.html
      • thumb.jpg
      • big-image-2-3.jpg

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath
Summerhall;Floor;2;3;/summer/floor/2-3/thumb.jpg;/summer/floor/2-3/view.html
Summerhall;Floor;2;4;/summer/floor/2-4/thumb.jpg;/summer/floor/2-4/view.html

Givet följande mappstruktur:

• /thumbnails
  • floor-2-3.jpg
  • floor-2-4.jpg
  • floor-2-5.jpg
• /html
  • /våning
    • view.html

CSV-filen kan se ut så här:

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath
Summerhall;Floor;2;3;/thumbnails/floor-2-3.jpg;/html/floor/view.html
Summerhall;Floor;2;4;/thumbnails/floor-2-4.jpg;/html/floor/view.html
Summerhall;Floor;2;5;/thumbnails/floor-2-5.jpg;/html/floor/view.html

Använda 360-vy på ett evenemang

För att se 360-bilder online, aktivera  Visa 360 under internetfliken för evenemanget.