360-graders utsikt fra seter

For nummererte saler tilbyr Tixly 360-graders utsikt fra seter ved online kjøp. Dette dokumentet skisserer hva som skal til for å gjøre det mulig.

Elementer

Det kreves to typer «elementer» for at Tixly skal kunne vise 360-bildet:

• Et miniatyrbilde i jpg-format, som vises som forhåndsvisning på siden for setevalg.
• En html-side med selve bilde-/panorama-viseren. Den vises i en iframe når kunden klikker på forhåndsvisningsbildet.

For øyeblikket støttes ikke tredjeparts 3D-panoramabilder som Pacifica og 3D digital venue. 

Miniatyrbilder

Et typisk miniatyrbilde er et som vises i omkring 250 x 160 piksler på en datamaskin og 200 x 160 piksler på mobile enheter som en forhåndsvisning av panoramaet.

Følgende stiler brukes slik at bildet alltid dekker hele området og fokuserer på midten:

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

HTML-side

Siden må ha funksjonalitet for å vise 360 bilder (eller enkeltbilder) i fullskjerm for brukeren. Hvordan dette oppnås, er opp til kunden (det finnes mange ulike måter å gjøre dette på). Vi anbefaler imidlertid alltid å minimere størrelsen på disse sidene/bildene/mappene, slik at brukeren får en så sømløs opplevelse som mulig. Det er også viktig å sørge for at disse fungerer i alle nettlesere og på alle skjermstørrelser.

Mappestruktur

Hvilken som helst mappestruktur kan brukes, men Tixly anbefaler for oversiktlighetens skyld at dataene struktureres i mapper som tydelig sier hva som er representert, for eksempel kan hver html-side ligge i en mappe som angir seksjonsnavn, radnavn og setenavn. Det samme gjelder miniatyrbildene, som enten kan ligge under hver html-sides mappe eller alle sammen i en egen mappe. Se eksempler.

Bildetetthet

Hvert sete trenger Ikke å ha sitt eget bilde, det er opp til kunden. Det kan være ett bilde per seksjon eller ett bilde per x antall seter i en rad. Tixly tilordner bildene til setene én til én, så legg merke til hvilke seter som skal vise hvilket bilde. Du kan ha et annet miniatyrbilde per sete, men kan bare dele 1 html-side med en panoramaside for flere seter.

CSV-tilordning

Det siste som trengs for importen, er en csv-fil med tilordning for miniatyrbildene og html-sidene til seter i en sal.

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath

Eksempler

Spesifikk mappe for miniatyrbilder

Følgende mappe-struktur kan benyttes:

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

Gitt følgende mappestruktur:

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

kan CSV-filen se slik ut som dette:

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

Gitt følgende mappestruktur:

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

kan CSV-filen se slik ut som dette:

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

Bruke 360-graders visning på en forestilling

For å se 360-bildene på nett, slå på Aktiver 360 under internettfanen for arrangementet.