360 graders visning fra sæder

For nummererede sale kan Tixly Systemet tilbyde 360 graders visning i købsflowet online. Dette dokument beskriver hvad dette kræver. 

2 Ting skal bruges

To "ting” er påkrævede for at Tixly kan opsætte 360 graders billeder: 

• Et jpg thumbnail billede, der vises på sædevisningen som preview.
• En html side med det rigtige billede/panorama billede. Dette vil blive vist i et iframe når kunden klikker på preview billedet.

3. parts hostede 3D panorama billeder, såsom Pacifica og 3D Digital Venue supporteres IKKE. 

Thumbnails

Et typisk thumbnail billede vil vises i ca. 250x160px på desktop og 200x160 på mobildevices som preview til panorama-billedet.

Følgende style vil blive sat på billedet så det altid dækker hele området og er fokuseret centralt:

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

HTML side

Billedet SKAL have funktionalitet til at vise 360 graders billeder (eller enkelt billeder) til brugeren i fuld skærm. Hvordan dette opnåes er op til kunden (der er mange forskellige måder at opnå dette). Vi anbefaler dog altid at minimere størrelsen af disse sider/billeder/mapper så brugeren kan få en så problemfri oplevelse som mulig, og for at sikre at dette virker i alle browsere og alle skærmstørrelser.

Mappestruktur.

Enhver mappestruktur er mulig, men Tixly anbefaler for klarhedens skyld at data er struktureret i mapper der nemt fortæller hvad de repræsenterer, for eksempel hver html-side kan være i en mappe der indikererer sektionens navn, rækkens navn og sædets navn. Det samme gælder thumbnails. Disse kan alle være lagt under hver html-sides mappe eller alle lagt i en separat fil. Se eksempler. 

Billede tæthed 

Ikke alle sæder behøver have egne billeder. Dette bestemmer kunden. Det kan være et billede pr. sektion eller 1 billed pr. sæder på en række. Tixly mapper billeder til sæder en-til-en, så vær klar når I skriver hvilke sæder der skal have hvilke billeder. Du kan have forskellige thumbnails pr. sæde, men dele et html med panorama for flere sæder. 

CSV mapping

Det sidste der er nødvendigt for at importere er en csv-mapping for thumbnails og html-siderne til sæderne i en sal.

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath

Eksempler

Specifik thumbnail mappe

Den følgende mappestruktur kan blive brugt:

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

Her kan følgende struktur bruges:

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

Her kan følgende struktur bruges:

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

CSV-filen vil se således ud: 

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

Sæt 360 graders visning på et event

For at sætte 360 graders visning på et event, skal du slå knappen "Aktiver 360" til under Internet-fanen