Was kann der 360Shots Player?
Die 360Shots Worktable Software mit integriertem Player wurde von uns entwickelt, um den gesamten Prozess der 360°-Produktfotografie schnell und einfach abzubilden. Aus der eigenen Anwendung wurde der Workflow permanent weiter optimiert und neue Funktionen hinzugefügt.
Öffnen Sie einfach ein Verzeichnis mit Ihren Bildern, wählen Sie einen Bildausschnitt und exportieren Sie die Objekte in der gewünschten Größe. Den automatischen Upload auf Ihren Webserver per FTP erledigt die Software auf Wunsch direkt gleich mit. Einfacher kann man kaum arbeiten.
Der Player zeigt mehrere dynamisch geladene Bilder nacheinander an und erzeugt so den Eindruck einer Animation. Dabei kann der Betrachter optional mit Maus, Tastatur oder Fingergesten (nicht bei iFrame Einbindung) die Animation steuern, z.B. vor- und zurückspulen. Wenn gewünscht kann auch eine Steuerungsleiste eingeblendet werden, über die man auch in den vorhandenen Zoom-Modus schalten kann.
Testen Sie den Player. Drehen Sie das Objekt mit der Maus oder probieren Sie mal die Pause-Funktion mit einem Mausklick auf das Objekt! Mit den Pfeiltasten können Sie nun das Objekt manuell weiterdrehen.
360 Grad Produktbild auf dem iPad – erstellt mit unserer Worktable Software
Download und Installation
Der Player ist im Lieferumfang unserer Worktable Software enthalten und wird bei jedem erstellten Objekt auf Wunsch automatisch passend konfiguriert und exportiert.
Zur Installation kann die Verzeichnisstruktur 1:1 auf einen Webserver kopiert oder der HTML Code in andere Seiten übernommen werden. Download hier
Techniken und Begrenzungen
Die Einbindung der Objekte kann über die direkte Verwendung des HTML Codes erfolgen. Sollten Sie keinen Zugriff auf das System haben oder z.B. WordPress oder Joomla einsetzten, kann die Einbindung auch über iFrames erfolgen. Wegen der Cross URL Scripting Limitierung muss die Liste mit den abzuspielenden Bilder auf dem selben Server liegen wie die HTML Seite die den Aufruf durchführt. Die Bilder selbst können von einem anderen Server geliefert werden, um die Performance zu erhöhen.
Bitte übernehmen Sie.
Für alle, denen selbst Hand anzulegen zu kompliziert oder zu aufwändig ist, bzw. die sich keine Unwägbarkeiten bzgl. Sicherheit, Zuverlässigkeit und Funktionalität leisten wollen, bietet 360Shots natürlich Support-Pakete, Bildhosting-Services bzw. auch gerne komplette Lösungen zur Integration der 360 Grad Produktfotografie. Nähere Informationen bieten wir Ihnen auf Anfrage.
Download 360Shots Player
KEIN separater Download mehr erforderlich!
Der 360Shots Player ist ab sofort direkt in der 360Shots Worktable Software integriert. Beim Export eines Objektes werden alle benötigten Dateien in die Verzeichnisstruktur geschrieben. Das Objekt kann anschließend lokal oder auf einem Server angeschaut werden. Hier gelangen Sie zum Download der 360Shots Worktable Software. Die folgenden Informationen sind nur für Anwender die sich etwas mehr mit dem Thema beschäftigen möchten.
Einführung:
Der 360Shots Player basiert auf Javascript und zeigt eine Auswahl von Bildern in sequenzieller Reihenfolge. Hierdurch wird der Eindruck einer Animation erzeugt. Die Reihenfolge und die URLs der Bilder werden dem Player entweder durch eine Datei oder eine Angabe im HTML Code mitgeteilt. Beim Einsatz der Datei wird vom Player per AJAX Call eine sogenannte Filelist geladen und die Bilder automatisch als <img> Tags in den HTML Code integriert.
Benötigte Resourcen:
Der Player verwendet jQuery, jQuery UI und die unterstützenden CSS Styles. Speziell die UI progress-bar und die Button elements werden benötigt.
Einbau des Players:
Der 360Shots Player ist als jQuery UI widget angelegt. Wenn er auf ein <div> Element angewendet wird, werden automatisch die Bilder als Reihe von <img> tags eingefügt. Ergänzt wird der Code durch eine optionale Steuerleiste. Angenommen wir haben ein <div id=’viewer‘></div> Element in der Seite, würden wir einen neuen Player wie folgt einbinden:
$(‚#viewer‘).gestalt({
url: ‚path/to/object‘
});
Der Player geht davon aus, dass die Bilder in Unterverzeichnissen abgelegt sind. Die Unterverzeichnisse können verschiedene Darstellungsgrößen des Objektes repräsentieren. Ein Player zeigt immer nur eine Größe des Objektes zur Zeit an. Optional kann mit der Zoom Schaltfläche in eine andere Darstellungsgröße gesprungen werden.
Die Standardgröße ist „small“ (klein). In dem Beispiel oben würde der Player nach einer Bilderliste unter „path/to/object/small/Filelist.txt“ suchen. Die Bilder selbst können sich ebenfalls in dem Unterverzeichnis „/small/“ befinden oder von einem externen Server geladen werden.
Um „Cross-Site Scripting“ zu vermeiden, müssen sich der Player Code und die Filelist.txt auf dem selben Server befinden. Die Bilder können auf einem beliebigen Server ausgelagert werden.
Optionen:
Optionen können direkt in den Player Code eingetragen oder später übergeben werden. Für eine korrekte Initialisierung benötigt der Player eine „URL“ oder eine Liste von Bildern. Die Optionen werden bei der Erstellung an den Player übergeben.
$(‚#viewer‘).gestalt({
url: ‚path/to/object‘,
size: ’small‘,
controls: ‚false‘,
animate: ‚once‘
});
Folgende Optionen sind verfügbar. Die Optionen sind angegeben als „Option [Type: default]“.
url [String: null]
Die „URL“ ist die Stelle auf dem Server, wo die Liste der Bilder gesucht wird. Zusammen mit der „Size“ Angabe wird das genaue Unterverzeichnis ermittelt in dem die „Filelist.txt“ erwartet wird. Die „Filelist.txt“ Datei enthält die Pfade der Bilder die vom Player angezeigt werden sollen.
size [String: ’small‘]
Der Parameter „Size“ gibt die Größe des anzuzeigenden Objektes an. Es können mehrere Versionen eines Objektes angelegt werden („small“ und „large“). „Size“ wird zusammen mit der „URL“ benutzt, um die genaue Position der Liste der Bilder zu finden („Filelist.txt“).
controls [Boolean: false]
Diese Option bestimmt, ob die Steuerleiste unter dem Objekt angezeigt werden soll. Wird der Wert auf „true“ gesetzt, erscheint eine kleine Steuerleiste am Fuß des Players.
Durch den Wert „resizeable“ erscheint die Steuerleiste mit einer zusätzlichen Zoom Schaltfläche. Wird diese angeklickt, springt der Player in die „large“ Ansicht des Objektes.
Ab Version 1.007 kann auch der Wert „box“ übergeben werden. Dann wird die Zoom Ansicht nicht in einem neuen Fenster, sondern in einer „Fancybox“ über dem kleinen Objekt geöffnet.
images [Array: null]
Diese Option kann eine Liste der zu ladenden Bilder enthalten. Diese Option kann anstatt der „url“ und „size“ option verwendet werden. Die „images“ Option führt keine XMLHttpRequests aus und ist nicht von der „gleicher Server“ Einschränkung betroffen wie die Optionen „url“ und „size“.
wait [Numeric: 60]
Der Player versucht alle Bilder zu laden. Dies erfolgt einmal die Sekunde bis alle Bilder geladen sind oder die Anzahl der angegebenen Sekunden verstrichen ist.
keyboard [Boolean: true]
Diese Option aktiviert oder deaktiviert die Tastatursteuerung. Folgende Tasten sind belegt:
- Leertaste — Start und Stopp der Animation
- Pfeil rechts — Stopp und zum vorherigen Bild
- Pfeil links — Stopp und zum nächsten Bild
- Pfeil hoch — schneller drehen
- Preil runter — langsamer drehen
Die Steuerung ist unabhängig von den Einstellungen in der Option „animation“.
animate [String: endless]
Mit dieser Option wird angegeben, ob das Objekt sich einmal oder endlos drehen soll.
once = einmal drehen, dann anhalten
endless = endlos drehen, bis der Anwender eingreift
framerate [Numeric: 5]
Die Anzahl der Bilder pro Sekunde. Die „framerate“ darf nicht kleiner als 1 sein. Der maximale Wert liegt bei 22. Je nach der Anzahl der Bilder wirken die Werte unterschiedlich schnell.
mouse [Boolean, Numeric: 10]
Diese Option steuert die Maus Interaktionsmöglichkeiten. Wird hier der Wert „false“ übergeben, ist keine Steuerung mit der Maus möglich. Wird eine Zahl größer als Null angegeben, müssen mit gedrückter Maustaste x Pixel zurückgelegt werden, damit das nächste oder vorherige Bild angezeigt wird. Die Richtung der Mausbewegung steuert das Vor- oder Zurückblättern.
Teile diese Seite
