Element und weise ihm eine eindeutige ID zu. Diese ID muss der Parameter in der Klasseninstanziierung sein.
Die Klasse wird dann wiefolgt instanziiert:
var slides3 = new Slides3("myContainer");
var slides3 = new Slides3("containerID");
Der Name der Variable muss nicht "slides3" sein. Ein eigener Namen kann dafür genutzt werden.
Homeslide erstellen
Die Homeslide ist optional!
Die Homeslide wird mit der "createHomeSlide" Methode erstellt:
slides3.createHomeSlide()
Homeslide Hintergrund hinzufügen
Tour als Hinterground
Um eine Tour im Hintergrund hinzuzufügen, füge der Methode "createHomeSlide" einfach einige Parameter hinzu:
slides3.createHomeSlide({
basepath : String /* -> URL auf der die Tourdateien zu finden sind */,
node : Number /* -> Die Node ID ohne das "node" davor */,
fov : Number [~5 - ~90] /* -> Der Zoom Wert des 360° Bildes in ° */,
tilt : Number [-90 - 90] /* -> Die vertikale Position des 360° Bildes in ° (-90° -> gerade nach unten, 0 -> gerade aus, 90 -> gerade in den Himmel) */,
pan : [-360 - 360] /* -> Die horizontale Position des 360° Bilder (Das Vorzeichen bestimmt die Richtung -> - = links, + = rechts | -90 -> viertel Drehung nach links, 45 -> achtel Drehung nach rechts)*/
});
//Beispiel:
slides3.createHomeSlide({
basepath : "https://lechwinter.360ty.cloud/",
node : 45,
fov : 60,
tilt : -10,
pan : -45,
});
Bild als Hintergrund
Um ein Bild als Hintergrund zu verwenden, wird die "addHomeslideBackgroundImage" Methode benutzt:
slides3.addHomeslideBackgroundImage(url:String)
//Beispiel:
slides3.addHomeslideBackgroundImage("https://wiki.360ty.world/favicon.ico")
Video als Hintergrund
Um ein Video als Hintergrund zu verwenden, wird die "addHomeslideBackgroundVideo" Methode benutzt:
slides3.addHomeslideBackgroundVideo(url:String)
//Beispiel:
slides3.addHomeslideBackgroundVideo("http://techslides.com/demos/sample-videos/small.mp4")
benutzte keine relativen Pfade! (z.B.: ./video.mp4)
Falls du Cloudflare Stream benutzt, um die Videos zu liefern, kannst du die ID des video als URL Parameter angeben
Inhalte zur Homeslide hinzufügen
Überschrift hinzufügen
Um der Homeslide eine Überschrift hinzuzufügen, wird die "addHomeslideHeadline" Methode benutzt:
slides3.addHomeslideHeadline(text:String)
//Beispiel
slides3.addHomeslideHeadline("my Headline")
Texte hinzufügen
Um der Homeslide Texte hinzuzufügen, wird die "addHomeslideParagraph" Methode benutzt:
slides3.addHomeslideParagraph(text:String)
//Beispiel:
slides3.addHomeslideParagraph("Paragrafen-inhalt")
"start" Button hinzufügen
Um der Homeslide einen Button hinzuzufügen, der zur Ersten Mainslide verweist, wird die "addHomeslideStartSlidesButton" Methode benutzt:
slides3.addHomeslideStartSlidesButton(text:String) //Der Text Parameter ist das Label des Buttons
//Beispiel:
slides3.addHomeslideStartSlidesButton("Start Slides")
benutzerdefinierte Elemente hinzufügen *EXPERIMENTAL*
Um der Homeslide benutzerdefinierte Elemente hinzuzufügen, wird die "addToHomeslideTextContainer" Methode benutzt:
slides3.addToHomeslideTextContainer(element:HTMLElement)
//Der element Parameter ist ein HTML elemment. Man kann z.B. "document.getElementById("myId")" benutzen, um ein existentes Element an die Homeslide anzuhängen
//Beispiel:
let paragraph = document.createElement("p");
paragraph.innerText = "Paragrafen-Inhalt";
slides3.addToHomeslideTextContainer(paragraph)
Dies ist eine experimentelle Methode. Benutzte sie auf eigene Gefahr!Der Container ist eine Flexbox
Logo hinzufügen
Um der Homeslide ein Logo hinzuzufügen, wird die "addHomeslideLogo" Methode benutzt:
slides3.addHomeslideLogo(imgURL:String,link:String)
//imgURL: Quelle des Bildes
//link: Der Link, der geöffnet wird, wenn auf das Logo geklickt wird
//Beispiel:
slides3.addHomeslideLogo("https://wiki.360ty.world/favicon.ico","https://wiki.360ty.world/")
Mainslides erstellen
Um eine Mainslide/vertikale Slide zu erstellen, wird die "createSlide" Methode benutzt:
var slideIndex1 = slides3.createSlide({
basepath : String /* -> URL auf der die Tourdateien zu finden sind */,
node : Number /* -> Die Node ID ohne das "node" davor */,
fov : Number [~5 - ~90] /* -> Der Zoom Wert des 360° Bildes in ° */,
tilt : Number [-90 - 90] /* -> Die vertikale Position des 360° Bildes in ° (-90° -> gerade nach unten, 0 -> gerade aus, 90 -> gerade in den Himmel) */,
pan : [-360 - 360] /* -> Die horizontale Position des 360° Bilder (Das Vorzeichen bestimmt die Richtung -> - = links, + = rechts | -90 -> viertel Drehung nach links, 45 -> achtel Drehung nach rechts)*/
});
//Beispiel:
var slideIndex1 = slides3.createSlide({
basepath : "https://lechwinter.360ty.cloud/",
node : 45,
fov : 60,
tilt : -10,
pan : -45,
});
Die "createSlide" Methode nimmt ein Objekt von Tour Optionen als parameter.Diese Methode gibt den Slide Index zurück, welches als Parameter für andere Methoden gebraucht wird.
Inhalte zu Mainslides hinzufügen
Um einer Mainslide Inhalte hinzuzufügen, wird immer der Slide Index der Mainslide gebraucht, welches der Rückgabewert der "createSlide" Methode ist
Buttons hinzufügen
Um einer Mainslide einen Button hinzuzufügen, wird die "addToSlideButtonContainer" Methode benutzt:
slides3.addToSlideButtonContainer(slideIndex:Object, element:HTMLElement);
//Beispiel:
slides3.addToSlideButtonContainer(slideIndex1, slides3.addSlideStartButton("Highres 360° Panorama starten"));
In diesem Beispiel verwenden wir die Methode "addSlideStartButton", um einen Button zu erstellen, mit der das Overlay ausgeblendet wird, damit auf die Tour zugegriffen werden kann.Hier können beliebige Elemente zugefügt werden.Verwende ein "
" - Element und gib dem Element die "Slide-Button" CSS-Klasse, damit der Stil sich den anderen Buttons anpasst.
Überschrift hinzufügen
Um einer Mainslide eine Überschrift hinzuzufügen, wird die "addSlideHeadline" Methode benutzt:
slides3.addSlideHeadline(slideIndex:Object, text:String);
//Beispiel:
slides3.addSlideHeadline(slideIndex1, "meine Überschrift");
Beschreibung hinzufügen
Um einer Mainslide eine Beschreibung hinzuzufügen, wird die "addSlideDescription" Methode benutzt:
slides3.addSlideDescription(slideIndex:Object, text:String);
//Beispiel:
slides3.addSlideDescription(slideIndex1, "Diese Slide wurde von 360ty.world zur Verfügung gestellt");
Fotograf hinzufügen
Um einer Mainslide einen Fotograf hinzuzufügen, wird die "addSlideFotographer" Methode benutzt:
slides3.addSlideFotographer(slideIndex:Object, text:String);
//Beispiel:
slides3.addSlideFotographer(slideIndex1, "Rene");
Location hinzufügen
Um einer Mainslide eine Location hinzuzufügen, wird die "addSlideLocation" Methode benutzt:
slides3.addSlideLocation(slideIndex:Object, text:String);
//Beispiel:
slides3.addSlideLocation(slideIndex1, "Altach, Vorarlberg");
Facebook share Button hinzufügen
Um einer Mainslide den Facebook share Button hinzuzufügen, wird die "addSlideFacebookButton" Methode benutzt:
slides3.addSlideFacebookButton(slideIndex:Object, link:String);
//Beispiel:
slides3.addSlideFacebookButton(slideIndex1, "https://www.facebook.com/360ty.world/photos/4481435151872107");
Subslides erstellen
Um eine Subslide/horizontale Slide zu erstellen, wird die "createSubSlide" Methode benutzt:
var slideIndex1_1 = slides3.createSubSlide(mainSlideIndex:Object,{
basepath : String /* -> URL auf der die Tourdateien zu finden sind */,
node : Number /* -> Die Node ID ohne das "node" davor */,
fov : Number [~5 - ~90] /* -> Der Zoom Wert des 360° Bildes in ° */,
tilt : Number [-90 - 90] /* -> Die vertikale Position des 360° Bildes in ° (-90° -> gerade nach unten, 0 -> gerade aus, 90 -> gerade in den Himmel) */,
pan : [-360 - 360] /* -> Die horizontale Position des 360° Bilder (Das Vorzeichen bestimmt die Richtung -> - = links, + = rechts | -90 -> viertel Drehung nach links, 45 -> achtel Drehung nach rechts)*/
});
//Example:
var slideIndex1_1 = slides3.createSubSlide(slideIndex1,{
basepath : "https://lechwinter.360ty.cloud/",
node : 45,
fov : 60,
tilt : -10,
pan : -45,
});
Die Methode verwendet den Slide-Index der Mainslide, deren Kind-Element die Subslide sein soll, als ersten Parameter. Der Index wird von der Methode "createSlide" zurückgegeben.Die Methode verwendet ein Objekt mit Touroptionen als zweiten Parameter.Die Methode gibt den Index der Subslide zurück, der als Parameter für andere Methoden verwendet wird.
Inhalte zu Subslides hinzufügen
Um Inhalte zu Subslides hinzuzufügen, werden dieselben Methoden verwendet wie zum Hinzufügen von Inhalten zu Mainslides.Anstatt den Mainslide-Index zu übergeben, wird der Subslide-Index übergeben.
//anstatt:
slides3.addSlideHeadline(slideIndex1, "meine Überschrift");
//verwende:
slides3.addSlideHeadline(slideIndex1_1, "meine Überschrift");
Navbar
Um die Navbar zu erstellen, wird die "createNav" Methode benutzt:
slides3.createNav();
"Über uns" hinzufügen
Um die Buttons "Über uns" und "Partner" in der Navbar hinzuzufügen, werden die Methoden "createAboutUsContainer" und "setShowAboutUs" verwendet.setze den Parameter der "setShowAboutUs" Methode auf auf "true":
slides3.setShowAboutUs(show:Boolean);
slides3.createAboutUsContainer();
//Beispiel
slides3.setShowAboutUs(true);
slides3.createAboutUsContainer();
Inhalte zu "Über uns" hinzufügen
Überschrift hinzufügen
Um dem "Über uns" Panel eine Überschrift hinzuzufügen, wird die "addAboutUsHeadline" Methode benutzt:
slides3.addAboutUsHeadline(text:String);
//Beispiel
slides3.addAboutUsHeadline("Über 360ty");
Unterüberschrift hinzufügen
Um dem "Über uns" Panel eine Unterüberschrift hinzuzufügen, wird die "addAboutUsSubHeadline" Methode benutzt:
slides3.addAboutUsSubHeadline(text:String);
//Beispiel
slides3.addAboutUsSubHeadline("Bilder die du bewegst und dich bewegen");
Bild hinzufügen
Um dem "Über uns" Panel ein Bild hinzuzufügen, wird die "addAboutUsImage" Methode benutzt:
slides3.addAboutUsImage(src:String);
//Beispiel
slides3.addAboutUsImage("https://wiki.360ty.world/favicon.ico");
Beschreibung hinzufügen
Um dem "Über uns" Panel eine Beschreibung hinzuzufügen, wird die "addAboutUsDescription" Methode benutzt:
slides3.addAboutUsDescription(text:String);
//Beispiel
slides3.addAboutUsDescription(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid.`);
Partner hinzufügen
Um dem "Über uns" Panel Partner hinzuzufügen, wird die "addPartners" Methode benutzt:
slides3.addPartners(partners:Array
[{
imgURL: String /* Die URL des Bildes des Partners */,
link: String /* Die URL, die geöffnet wird, wenn das Partner Bild angeklickt wird */,
}]);
//Beispiel
slides3.addPartners(
[
{
imgURL:"https://storage.googleapis.com/logos.360ty.cloud/360ty_world_extern.png",
link:"https://360ty.world/",
},
{
imgURL:"https://multimedia-fabrik.com/wp-content/uploads/2019/02/cropped-Logo_MMF_300.png",
link:"https://multimedia-fabrik.com",
}
]
);
Social Media Buttons hinzufügen
to add a social media Button to the Navbar , use the "addNavbarSocialButton" method:
Um der Navbar Social Media Buttons hinzuzufügen, wird die "addNavbarSocialButton" Methode benutzt:
slides3.addNavbarSocialButton(social:String,link:String)
//Beispiel:
slides3.addNavbarSocialButton("facebook",link:"facebook.com/360ty.world");
slides3.addNavbarSocialButton("instagram",link:"https://www.instagram.com/360ty.world_mmf")
Die icons sind Font Awesome Icons. Diese benutzen den "social" parameter als CSS fa - Klasse ("fa-${social}")
Allgemeine Einstellungen
Screenshot Studio Button
Um neben dem "zurück" Button, wenn die Tour aktiv ist, einen Button zu erstellen, der das 360ty Screenshot Studio auf der jetztigen Position öffnet, zu erstellen, wird die "setShowScreenshotButton" Methode verwendet:Setzte den Parameter dieser Methode auf "true":
slides3.setShowScreenshotButton(show:Boolean)
//example:
slides3.setShowScreenshotButton(true);
Tour laden
setting Tour loading to "false", will prevent the tour from loading. To set this variable, use the "setTourLoad" method:
Das setzen von "Tour laden" auf "false" verhindert das laden der Tour. Um diese variable zu setzen, wird die "setTourLoad" Methode benutzt:
slides3.setTourLoad(load:Boolean)
//Beispiel:
slides3.setTourLoad(false);
Dies wird hauptsächlich für Debugging-Zwecke oder für Frameworks verwendet, die die Tour bei Eingabeänderungen erneut rendert, wie z. B. Elementor. Wenn die Tour zu oft erneut rendert, wird der WebGL-Kontext überlastet und der Browser wird erheblich verlangsamt oder stürzt sogar ab.
Slides Initialisieren
after setting the options and creating the slides, you can initialise the Slides with the "init" method:Nach dem die Einstellungen getroffen sind und die Slides erstellt wurden, können die Slides mit der "init" Methode initialisiert werden:
slides3.init()
Styling
Primäre und Sekundäre Farben
Manche Elemente der Slides benutzen primäre und sekundäre Farben, die mit Hilfe von CSS gesetzt werden können:
Primäre Farben setzen
/*Ändere die Farbwerte nach deinen Wünschen*/
.color-primary{
color:#f40000 !important;
}
.background-primary{
background-color:#f40000 !important;
}
.border-primary{
border-color:#f40000 !important;
}
Sekundäre Farben setzen
/*Ändere die Farbwerte nach deinen Wünschen*/
.color-secondary{
color:#22264b !important;
}
.background-secondary{
background-color:#22264b !important;
}
.border-secondary{
border-color:#22264b !important;
}
Beispiel
360ty Elementor Addon - WordPress Plugin [DE] | Slides3
installation
WordPress Dashboard
Lade das Plugin hier herunter
Gehe zu deinem WordPress Dashboard -> Plugins
Klicke auf den “Installieren” Button rechts neben der Überschrift “Plugins”
An der selben stelle, klicke nun auf den “Plugin hochladen” Button, wähle die heruntergeladene .zip Datei aus und klicke auf Jetzt installieren
Klicke auf den “Plugin aktivieren” Button
Nun sollte eine Widget-Kategorie namens “360ty” im Elementor Widget-Tab zu sehen sein.
Filebrowser
Lade das Plugin hier herunter und entpacke die .zip Datei
Wechsle zu deinem WordPress Ordner -> wp-content-> plugins
Füge den extrahierten Ordner in den Plugins Ordner ein
Aktiviere das “360ty Elementor Addon” Plugin in deinem WordPress Dashboard -> Plugins -> installierte Plugins
Nun sollte eine Widget-Kategorie namens “360ty” im Elementor Widget-Tab zu sehen sein.
CLI
Windows
Öffne eine Terminalanwendung (z.B.: CMD)
Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
Gehe zum Plugins Ordner (cd wp-content/plugins)
führe diese Commandline aus:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git
Linux
Öffne eine Terminalanwendung (z.B.: Shell)
Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
Gehe zum Plugins Ordner (cd wp-content/plugins)
führe diese Commandline aus:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git
Mac-OS
Öffne eine Terminalanwendung (z.B.: Terminal)
Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
Gehe zum Plugins Ordner (cd wp-content/plugins)
führe diese Commandline aus:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git
SSH
Windows
Öffne einen SSH Client (z.B.: Putty)
Verbinde dich mit deinem Webserver, auf dem WordPress liegt
Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
Gehe zum Plugins Ordner (cd wp-content/plugins)
führe diese Commandline aus:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git
Linux
Öffne eine Terminalanwendung (z.B.: Shell)
Verbinde dich mit deinem Webserver, auf dem WordPress liegt
Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
Gehe zum Plugins Ordner (cd wp-content/plugins)
führe diese Commandline aus:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git
Mac-OS
Öffne eine Terminalanwendung (z.B.: Terminal)
Verbinde dich mit deinem Webserver, auf dem WordPress liegt
Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
Gehe zum Plugins Ordner (cd wp-content/plugins)
führe diese Commandline aus:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git
Plugin Guide
Sobald Das Plugin Installiert und Aktiviert wurde, kommt beim Elementor Widget-Panel eine neue Kategorie “360ty” zum Vorschein, in der das Slides3 Widget zu finden ist
Controls
Section: Inhalt
Subsection: Settings
Load Tour
Das einschalten von "Load Tour" verhindert, dass die Tour im Elementor Editor ladet. Da Elementor bei jeder Änderung das ganze Widget neu ladet, wird bei jeder Änderung auch die Tour neu geladen. Wenn die Tour öfters neu geladen wird überfüllt das der WebGL Context des Browsers, was dazu führt, dass der Browser sehr langsam wird, oder sogar abstürzt.
Screenshot Button
Das einschalten von "Screenshot Button" erstellt bei jeder Slide einen Button der das 360ty Screenshot Studio auf der jetzigen Position öffnet. Dieser Button ist neben dem "zurück" Button platziert und nur Sichtbar, wenn die Tour Aktiv ist.
Subsection: Homeslide
Die Homeslide ist der Startpunkt Slides. Diese hat ein anderes Layout als Die normalen Slides.
Tab: Content
Headline
Die Überschrift der Homeslide
Sub-Headline
Die Unterüberschrift der Homeslide
Start Slide Button label
Der Text, der im Button steht, der die Slides startet
Logo
Das Logo das Rechts unten in der Homeslide angezeigt wird
Logo Link
Der Link der aufgerufen wird, wenn das Logo angeklickt wird
Tab: Background
Background Type
Was für ein Hintergrund bei der Homeslide benutzt werden soll
Tour:Als Hintergrund wird eine 360° Tour benutzt
Image:Als Hintergrund wird ein Bild benutzt
Video:Als Hintergrund wird ein Video benutzt.Falls du Cloudflare Stream zur bereitstellung deiner Videos benutzt, kann die ID des Video hier eingefügt werden
Subsection: Navbar
Social Buttons
Erstellt einen Social Media Button an der rechten Seite der Navbar
Social Type
Der Social Type bestimmt das Icon, welches für den Button genutzt wird
Social URL
Die URL, die geöffnet wird, wenn der Social Media Button angeklickt wird
Subsection: About us & Partner
Hier wird der Inhalt des "Über uns" Panels bestimmt
Tab: About us
About us & Partner
Wird dies auf "show" gestellt, werden in der Navbar die "Über uns" und "Partner" Buttons erstellt
Headline
Die Überschrift des "Über uns" Panels
Sub-headline
Die Unterüberschrift des "Über uns" Panels
Description
Der Text/Beschreibung des "Über uns" Panels
Image
Ein Bild, das vor der Description eingefügt werden kann
Tab: Partner
Name
Wie das Element im Elementor Editor heißen soll. Ändert nichts an den Slides
Link
Die URL, die geöffnet werden soll, wenn auf den Partner geklickt wird
Image
Das Bild, welches für den Partner genutzt werden soll
Subsection: Slides
Hier werden die Slides erstellt
Slide Name
Wie das Element im Elementor Editor heißen soll. Ändert nichts an den Slides. Hilft aber den Überblick zu Behalten.
Direction
Die Slider Richtung der Slide.vertikal -> Mainslidehorizontal -> SubslideDie erste Slide muss eine vertikale sein!Die horizontalen Slides binden sich immer an die letzte vertikale Slide an.
Tab: Content
der Inhalt der Slide
Headline
Die Überschrift der Slide
Tour-start Button Label
Der Text, der im Button steht, welcher die Tour startet
Facebook Button URL
Der Facebook link zur TourFalls der Button nicht erwünscht ist, kann dieses Feld leer gelassen werden
Description
Eine Beschreibung zur Slide
Photographer
Der Fotograf des Bildes
Location
Der Ort der Bildes
Tab: Tour
Die Einstellungen zur Tour der Slide
Basepath
Die URL auf der die Tourdateien der gewünschten Tour liegen
Node
die ID der Node auf der gestarted werden soll
FOV
Das Field of View/ der Zoom-wert auf der die Tour gestartet wird.
Die Grenzwerte dabei sind bei je nach Tour und Node anders. Meistens Jedoch zwischen 5 und 100.
Kleiner Wert -> reingezoomt
Großer Wert -> rausgezoomt
Standart -> 70
Tilt
Der vertikale Wert der start Position der Tour in °
Grenzwerte: -90 - 90
-90 -> 90° nach unten
90 -> 90° nach oben
0 -> gerade aus
Pan
Der horizontale Wert der start Position der Tour in °
Grenzwerte: -360 - 360
-90 -> viertel Drehung nach Rechts
180-> halbe Drehung nach Links
0 -> gerade aus
Section: Stil
Slides Colors
Hier werden die Primären und Sekundären Farben angegeben. Diese beeinflussen einige Elemente der Slides, wie zB die Farbe der Buttons