Komponenten-APIs

360°-Galerie

gwd-360gallery

Galerieobjekt, das ein sich drehendes Objekt zeigt.

Eigenschaften

Name Beschreibung
images:string Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
autoplay:boolean Die Bilder in der Galerie sollten nacheinander automatisch wiedergegeben werden, nachdem die Galerie geladen wurde.
wrap:boolean Der Nutzer sollte in der Galerie über den ersten und letzten Frame hinaus wischen können, ohne an einem Ende zu stoppen.

Ereignisse

Name Beschreibung
firstinteraction Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert.
allframesviewed Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt werden.
allframesloaded Wird ausgelöst, wenn alle Frames der Galerie geladen wurden.
frameshown Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
frameactivated Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frametap Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.

Methoden

Name Beschreibung
goToFrame(frame:number, opt_animate:string, opt_direction:string) Animiert zum angegebenen Frame.
rotateOnce(opt_duration:number, opt_direction:string) Rotiert das Objekt einmal in der Galerie.
goForwards() Bewegt die Galerie um einen Frame vor.
goBackwards() Bewegt die Galerie um einen Frame zurück.
Zum Kalender hinzufügen

gwd-addtocalendar

Fügt einem Kalender ein Ereignis hinzu.

Eigenschaften

Name Beschreibung
event-title:string Der Name des Ereignisses, wie er im Kalender des Nutzers erscheint.
start-date:string Das Datum, an dem das Ereignis beginnt.
start-time:string Die Uhrzeit, zu der das Ereignis startet (24-Std.-Format).
end-date:string Das Datum, an dem das Ereignis endet.
end-time:string Die Uhrzeit, zu der das Ereignis endet (24-Std.-Format).
timezone:string Die Zeitzone für das Ereignis. Wenn diese festgelegt ist, wird die Zeit korrekt für den Nutzer angepasst, wenn er sich in einer anderen Zeitzone befindet.
location:string Der Ort des Ereignisses.
description:string Die Beschreibung des Ereignisses.
icalendar:boolean Legt fest, ob eine iCalender-Datei verwendet werden soll oder nicht.
google:boolean Legt fest, ob Google Kalender verwendet werden soll oder nicht.
windows-live:boolean Legt fest, ob Windows Live Calendar verwendet werden soll oder nicht.
yahoo:boolean Legt fest, ob Yahoo! Calendar verwendet werden soll oder nicht.
bg-color:string Hexadezimalwert für die Hintergrundfarbe des Drop-downs.
font-color:string Hexadezimalwert für die Schriftfarbe des Drop-downs.
font-family:string Name für die Schrift des Drop-downs.
font-size:string Größe für die Schrift des Drop-downs.
font-weight:string Stärke der Schrift des Drop-downs.
highlight-color:string Hexadezimalwert für die Markierungsfarbe des Drop-downs.
Audio

gwd-audio

Eine Komponente, die ein HTMLAudioElement zusammenfasst.

Eigenschaften

Name Beschreibung
autoplay:boolean Legt fest, ob die Audiodatei beim Laden automatisch wiedergegeben wird.
loop:boolean Legt fest, ob die Audiodatei nach dem Fertigstellen in einer Schleife wiedergegeben wird.
muted:boolean Legt fest, ob die Audiodatei stumm gestartet wird.
controls:boolean Legt fest, ob die Steuerelemente des nativen Standardplayers aktiviert werden.
sources:string Ein durch Komma getrennter String von Audioquellen in unterschiedlichen Formaten.

Ereignisse

Name Beschreibung
play Wird ausgelöst, wenn die Wiedergabe der Medien nach dem Pausieren gestartet wird.
pause Wird ausgelöst, wenn die Wiedergabe pausiert wird.
playing Wird ausgelöst, wenn die Medien entweder zum ersten Mal nach einer Pause oder nach dem Ende noch einmal wiedergegeben werden.
ended Wird ausgelöst, wenn die Wiedergabe abgeschlossen ist.
volumechange Wird ausgelöst, wenn sich die Audiolautstärke beim Einstellen oder durch die Änderung des Attributs zum Stummschalten ändert.
seeked Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist.
waiting Wird ausgelöst, wenn der angeforderte Vorgang (z. B. die Wiedergabe) verzögert wird, weil zuerst ein anderer Vorgang abgeschlossen werden muss (z. B. eine Suche).

Methoden

Name Beschreibung
mute() Wechselt zwischen Audio stummschalten und Stummschaltung aufheben.
pause() Hält die Audiodatei an.
play() Gibt die Audiodatei wieder.
replay() Gibt die Audiodatei noch einmal wieder.
seek(time:number) Springt zur angegebenen Zeit in der Audiodatei.
Karussell-Galerie

gwd-carouselgallery

Ein Galerieobjekt, bei dem die Frames in einem Karussell-Layout angezeigt werden.

Eigenschaften

Name Beschreibung
images:string Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
groups:string Ein durch Komma getrennter String der Gruppen-IDs.
transition-duration:number Animationsgeschwindigkeit der Galerie in Millisekunden.
start-frame:number Die Nummer des Bildes, das als Erstes zu sehen sein soll.
autoplay:boolean Legt fest, ob die automatische Wiedergabe für die Frames einmal oder nie verwendet wird.
has-navigation:boolean Legt fest, ob Steuerelemente für die Galerienavigation automatisch eingeschlossen werden.
navigation-thumbnails:boolean Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden.
navigation-highlight:color Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird.
scaling:string Legt fest, wie der Bildinhalt für den Frame skaliert wird.
frame-width:number Breite eines Steuerfelds für Inhalt.
frame-height:number Höhe eines Steuerfelds für Inhalt.
neighbor-rotation-y:number Eine y-Achsenrotation für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds; wird zum Neigen der benachbarten Steuerfelder verwendet.
neighbor-translation-x:number Eine x-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds; wird zum Anpassen der Platzierung der benachbarten Steuerfelder verwendet.
neighbor-translation-y:number Eine y-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds.
neighbor-translation-z:number Eine z-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds.
exit-urls:string Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen.
show-reflection:boolean Legt fest, ob eine CSS3-basierte Reflexion gezeigt werden soll.
pause-front-media:boolean Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem vorherigen Frame pausiert werden.
resume-next-media:boolean Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem nächsten Frame fortgesetzt werden.

Ereignisse

Name Beschreibung
firstinteraction Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert.
allframesviewed Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt wurden.
allframesloaded Wird ausgelöst, wenn alle Frames der Galerie geladen wurden.
autoplayended Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet "true", wenn die Wiedergabe naturgemäß nach Erreichen der festgelegten Dauer endet, ansonsten lautet es "false".
frameshown Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
frameactivated Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frameautoplayed Wird ausgelöst, wenn ein Frame für die automatische Wiedergabe aktiviert wird. Dieses Ereignis kann häufiger ausgelöst werden als frameshown, da es bei mehreren Frames, die gleichzeitig eingeblendet werden, für jeden einzelnen Frame separat ausgelöst wird.
frametap Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
reachleftend Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
reachrightend Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.
trackstart Wird ausgelöst, wenn eine Ziehbewegung per Maus oder Berührung beginnt.
track Die Komponente registriert die x- und y-Positionsdaten der Ziehbewegung per Maus oder Berührung.
trackend Wird ausgelöst, wenn eine Ziehbewegung per Maus oder Berührung endet.

Methoden

Name Beschreibung
goToFrame(index:number, opt_animate:string) Wechselt zum angegebenen Frame.
goForwards(opt_animate:string) Wechselt zum nächsten Frame, falls verfügbar.
goBackwards(opt_animate:string) Wechselt zum vorherigen Frame.
rotateOnce(opt_duration:number, opt_direction:string) Zeigt jeden Frame einmal in der Galerie an.
stopRotation() Stoppt die aktuelle automatische Rotation.
Cue-Punkt

gwd-cuepoint

Eine Komponente, die an eine Videokomponente angehängt ist und ein Ereignis auslöst, wenn das Video eine bestimmte Zeit erreicht.

Eigenschaften

Name Beschreibung
time:number Der Zeitpunkt in Sekunden, zu dem das Ereignis ausgelöst wird.

Ereignisse

Name Beschreibung
cuepoint Wird ausgelöst, wenn die Wiedergabe der Medien eine in einem Cue-Punkt definierte Zeit erreicht hat.

Methoden

Name Beschreibung
seek() Legt die Videozeit auf die Zeit eines Cue-Punkts fest.
setTime(time:number) Legt die Zeit des Cue-Punkts fest.
Date Swap

gwd-dateswap

Mit dieser Komponente wird die Sichtbarkeit des Elements in Abhängigkeit davon geändert, wie das aktuelle Datum und der Zielzeitraum zueinander stehen.

Eigenschaften

Name Beschreibung
from_date:string Ein String, der ein Datum auf der Grundlage von RFC2822 oder ISO 8601 darstellt.
to_date:string Ein String, der ein Datum auf der Grundlage von RFC2822 oder ISO 8601 darstellt.

Ereignisse

Name Beschreibung
before Wird ausgelöst, wenn das aktuelle Datum vor dem from_date (ausgenommen) liegt.
during Wird ausgelöst, wenn das aktuelle Datum zwischen dem from_date und dem to_date (einschließlich) liegt.
after Wird ausgelöst, wenn das aktuelle Datum nach dem to_date (ausgenommen) liegt.

Methoden

Name Beschreibung
checkDate() Vergleicht das aktuelle Datum mit dem Zeitraum.
Galerienavigation

gwd-gallerynavigation

Ein Navigationssteuerelement für eine Google Web Designer-Galeriekomponente.

Eigenschaften

Name Beschreibung
for:string Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
highlight:color Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird.
use-thumbnails:boolean Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden.
Allgemeine Anzeige

gwd-genericad

Implementiert den Anzeigencontainer "Allgemein".

Ereignisse

Name Beschreibung
adinitialized Wird ausgelöst, kurz bevor der Anzeigeninhalt durch das Element "Allgemein" gerendert wird.

Methoden

Name Beschreibung
initAd() Startet die Anzeige nach Erhalt der entsprechenden Ereignisse vom Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigiert zu den maximierten Abmessungen der Anzeige. Falls die Seiten-ID nicht angegeben wurde, navigiert die Anzeige zur Standardseite.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) Beendet die Anzeige und minimiert sie optional.
Bewegung

gwd-gesture

Abstraktion für eine Reihe von Bewegungsereignissen.

Eigenschaften

Name Beschreibung
touch-action:string Interpretationsweise für Berührungsaktionen, gültige Werte sind auto, none, pan-x und pan-y. Das Standardverhalten ist identisch mit der Einstellung none.

Ereignisse

Name Beschreibung
hover Wird ausgelöst, wenn die Maus oder die Berührung die Komponentengrenze überschreitet.
hoverend Wird ausgelöst, wenn die Maus oder die Berührung die Komponentengrenze verlässt.
trackstart Wird ausgelöst, wenn eine Ziehbewegung per Maus oder Berührung beginnt.
track Die Komponente registriert die x- und y-Positionsdaten der Ziehbewegung per Maus oder Berührung.
trackend Wird ausgelöst, wenn eine Ziehbewegung per Maus oder Berührung endet.
tap Wird ausgelöst, wenn ein Tippen des Nutzers oder ein Mausklick registriert wird.
swipeleft Wird ausgelöst, wenn der Nutzer nach links wischt.
swiperight Wird ausgelöst, wenn der Nutzer nach rechts wischt.
swipeup Wird ausgelöst, wenn der Nutzer nach oben wischt.
swipedown Wird ausgelöst, wenn der Nutzer nach unten wischt.
Google Anzeige

gwd-google-ad

Implementiert den Google-Anzeigencontainer.

Eigenschaften

Name Beschreibung
polite-load:boolean Legt fest, ob diese Anzeige die Polite Load-Semantik einhalten muss.
fullscreen:boolean Legt fest, ob diese Anzeige eine Vollbildmaximierung versuchen soll oder nicht.

Ereignisse

Name Beschreibung
adinitialized Wird ausgelöst, bevor das Element den Inhalt der Anzeige rendert.
expandstart Wird ausgelöst, wenn der Enabler ein Ereignis "Start maximieren" auslöst.
expandfinish Wird ausgelöst, wenn der Enabler ein Ereignis "Ende maximieren" auslöst.
collapsestart Wird ausgelöst, wenn der Enabler ein Ereignis "Start minimieren" auslöst.
collapsefinish Wird ausgelöst, wenn der Enabler ein Ereignis "Ende minimieren" auslöst.
fullscreensupport Wird ausgelöst, wenn die Vollbildmaximierung unterstützt wird.

Methoden

Name Beschreibung
initAd() Startet die Anzeige nach Erhalt der entsprechenden Ereignisse vom Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigiert zu den maximierten Abmessungen der Anzeige. Falls die Seiten-ID nicht angegeben wurde, navigiert die Anzeige zur Standardseite.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) Beendet die Anzeige und minimiert sie optional.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) Beendet die Anzeige zur angegebenen URL, unabhängig von dem in Studio festgelegten Wert. Minimiert die Anzeige, wenn opt_collapseOnExit den Wert "true" hat.
incrementCounter(metric:string, opt_isCumulative:boolean) Erfasst ein Zählerereignis.
startTimer(timerId:string) Startet einen Ereignistimer.
stopTimer(timerId:string) Stoppt einen Ereignistimer.
reportManualClose() Erfasst das manuelle Schließen einer Anzeige des Typs "Floating", "Pop-up", "Expandable", "In-Page mit Pop-up" oder "In-Page mit Floating". Diese Methode ist ein Proxy für Enabler.reportManualClose.
Hotspot

gwd-hotspot

Eine Komponente, mit der ein Hotspot zu bestimmten Zeiten eines Videos angezeigt und ausgeblendet wird.

Eigenschaften

Name Beschreibung
show-time:number Der Zeitpunkt in Sekunden, zu dem der Hotspot sichtbar wird.
hide-time:number Der Zeitpunkt in Sekunden, zu dem der Hotspot nicht mehr sichtbar ist.
left:string Die linke Position des Hotspots über dem Video im Verhältnis zur Breite des Videoframes (z. B. 5 %).
top:string Die oberste Position des Hotspots über dem Video im Verhältnis zur Höhe des Videoframes (z. B. 5 %).
width:string Die Breite des Hotspots über dem Video im Verhältnis zur Breite des Videoframes.
height:string Die Höhe des Hotspots über dem Video im Verhältnis zur Höhe des Videoframes.

Ereignisse

Name Beschreibung
hotspotshown Wird ausgelöst, wenn der Hotspot sichtbar wird.
hotspothidden Wird ausgelöst, wenn der Hotspot ausgeblendet wird.

Methoden

Name Beschreibung
show(showHide:boolean) Ändert die Sichtbarkeit von Hotspots. Macht den Hotspot sichtbar, wenn showHide auf "true" gesetzt ist, und blendet den Hotspot aus, wenn showHide auf "false" gesetzt ist.
seek(showHide:boolean) Legt eine Videozeit für die Anzeige- oder Ausblendezeit des Hotspots fest. Verwendet die Anzeigezeit, wenn showHide auf "true" gesetzt ist, und verwendet die Ausblendezeit, wenn showHide auf "false" gesetzt ist.
setTimes(showTime:number, hideTime:number) Legt die Anzeige- und Ausblendezeiten des Hotspots fest.
iFrame

gwd-iframe

Eine Komponente, die ein HTMLIframeElement zusammenfasst.

Eigenschaften

Name Beschreibung
source:string Die Quelle des iFrame, ersetzt das Attribut src des nativen Bildelements.
scrolling:string Legt fest, ob der iFrame Bildlaufleisten enthält.

Ereignisse

Name Beschreibung
iframeload Wird ausgelöst, wenn der iFrame geladen wird.

Methoden

Name Beschreibung
setUrl(url:string) Ändert die URL des iFrame und lädt sie sofort.
Bild

gwd-image

Eine Komponente, die ein HTMLImageElement zusammenfasst, um das verzögerte Laden der Bildquelle zu unterstützen.

Eigenschaften

Name Beschreibung
source:file Die Bildquelle ersetzt das Attribut src des nativen Bildelements.
alt:string Der alternative Text für das Bild.
scaling:string Legt fest, wie das Bild für den Frame skaliert wird.
alignment:string Legt fest, wie das Bild innerhalb des Anzeigebereichs ausgerichtet wird.
Bildschaltfläche

gwd-imagebutton

Eine Bildschaltfläche mit Unterstützung für die Status "Nach oben", "Über" und "Nach unten".

Eigenschaften

Name Beschreibung
up-image:file Die URL für das Bild der Schaltfläche im unbetätigten Zustand.
over-image:file Die URL für das Bild der Schaltfläche im Mouseover-Zustand oder Hover-Zustand.
down-image:file Die URL für das Bild der Schaltfläche im betätigten Zustand.
bgcolor:string Die Hintergrundfarbe der Schaltfläche.
alignment:string Legt fest, wie das Bild innerhalb des Anzeigebereichs ausgerichtet wird.
scaling:string Legt fest, wie das Bild an den übergeordneten Container angepasst wird.
disabled:boolean Legt fest, ob die Schaltfläche deaktiviert werden soll.

Ereignisse

Name Beschreibung
imagebuttonloaded Wird ausgelöst, wenn alle Bilder geladen wurden.

Methoden

Name Beschreibung
toggleEnable() Wechselt zwischen aktiviert und deaktiviert.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) Legt die Bildquellen für alle Schaltflächenzustände fest.
Karte

gwd-map

Erweitert das HTMLElement zur Zusammenfassung von Aufrufen der Google Maps API.

Eigenschaften

Name Beschreibung
api-key:string Google API-Schlüssel. Siehe https://developers.google.com/maps/documentation/javascript/get-api-key.
query:string Name der Suchanfrage, die Standorte der Google Places API zurückgibt, erforderlich bei fehlender Fusion Tables-ID.
start-latitude:decimal Startet Koordinate für mittleren Breitengrad. Der Wert sollte zwischen -90 und 90 Grad liegen.
start-longitude:decimal Startet Koordinate für mittleren Längengrad. Der Wert sollte zwischen -180 und 180 Grad liegen.
request-user-location:boolean Legt fest, ob der Nutzerstandort angefragt werden muss. Wenn die Eigenschaft auf "true" gesetzt ist, wird der Nutzer aufgefordert, den Standort anzugeben.
fusion-table-id:string ID einer öffentlichen Google Fusion Table.
client-id:string Google Maps Premier-Client-ID (eingestellt).
search-radius:number Mindestradius für die Standortsuche in Metern.
result-limit:number Maximale Anzahl der Suchergebnisse, die in einer einzelnen Suchanfrage zurückgegeben werden.
start-zoom:number Startet Zoomstufe in Einheiten, die von der Google Maps API verwendet werden. Der Standard lautet 16, was der Stadtteilebene entspricht.
marker-src:string Bilddateiname für Ortsmarkierung als Sprite mit den Komponenten "An", "Aus" sowie "Schatten".
gps-src:string GPS-Standort, blauer Punkt, Bilddateiname.
msg-start-position-prompt:string Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, um eine Startposition auszuwählen.
msg-gps-button-label:string Lokalisierungsstring für das Label der Schaltfläche, die den Standort eines Nutzers aus der API für die Standortbestimmung abruft.
msg-manual-position-button-label:string Lokalisierungsstring für das Label der Schaltfläche, die das Standortsuchfeld anzeigt.
msg-manual-position-prompt:string Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, um eine Startposition auf der Karte auszuwählen.
msg-manual-position-placeholder:string Lokalisierungsstring für den Platzhaltertext des Suchfelds, um eine Startposition auf der Karte auszuwählen.
msg-geocode-failure:string Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, der angezeigt wird, wenn ein Versuch scheitert, die API für die Standortbestimmung zu verwenden.
msg-no-results-found:string Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, der angezeigt wird, wenn am ausgewählten Standort keine Ergebnisse gefunden werden.

Ereignisse

Name Beschreibung
pinclick Wenn der Nutzer eine Markierung auf der Karte auswählt.

Methoden

Name Beschreibung
setCenter(latitude:number, longitude:number, opt_accuracy:number) Legt den mit Breitengrad und Längengrad angegebenen Ort als Mitte der Karte fest.
Seite

gwd-page

Eine Seite stellt eine einzelne Karte im Seitenstapel dar.

Eigenschaften

Name Beschreibung
expanded:boolean Legt fest, ob diese Seite als erweiterte Seite betrachtet werden soll (anzeigenspezifisch).
centered:boolean Legt fest, ob der Inhalt dieser Seite zentriert werden soll.
alt-orientation-page:string Die Seiten-ID der Seite, die diesen Inhalt in alternativer Ausrichtung besser darstellt.

Ereignisse

Name Beschreibung
attached Wird ausgelöst, kurz nachdem die Seite dem DOM angehängt wird.
detached Wird ausgelöst, kurz nachdem die Seite aus dem DOM entfernt wird.
pageactivated Wird ausgelöst, wenn die Seite angezeigt werden kann.
pagedeactivated Wird ausgelöst, wenn die Seite nicht mehr angezeigt wird.
pageload Wird ausgelöst, nachdem der Inhalt der Seite erfolgreich geladen wurde.
pagepresenting Wird ausgelöst, kurz bevor die Seite die Einführungsanimation darstellt.
shake Wird ausgelöst, wenn eine Schüttelbewegung des Geräts erkannt wird.
tilt Wird ausgelöst, wenn eine Neigung des Geräts erkannt wird.
rotatetoportrait Wird ausgelöst, wenn ein Gerät in das Hochformat gedreht wird.
rotatetolandscape Wird ausgelöst, wenn ein Gerät in das Querformat gedreht wird.
Seitenstapel

gwd-pagedeck

Ein Seitenstapel (PageDeck) ist ein Container für Seiten. Er zeigt jeweils eine Seite. Unterschiedliche Seiten werden in einer beliebigen festgelegten Reihenfolge in den Vordergrund gebracht. Dabei werden alle unterstützten Seitenübergänge verwendet.

Eigenschaften

Name Beschreibung
default-page:string ID der Standardseite

Ereignisse

Name Beschreibung
pagetransitionstart Wird ausgelöst, bevor ein Seitenübergang erfolgt.
pagetransitionend Wird ausgelöst, nachdem ein Seitenübergang abgeschlossen ist.

Methoden

Name Beschreibung
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigiert zur nächsten Seite im Seitenstapel.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigiert zur vorherigen Seite im Seitenstapel.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigiert zur angegebenen Seite im Seitenstapel.
getCurrentPage() Gibt die aktuelle Seite oder NULL zurück, wenn die Seite nicht angezeigt wird.
getDefaultPage() Gibt die Standardseite zurück, falls angegeben, andernfalls die erste Seite.
getPage(pageId:string) Gibt die Seite mit der angegebenen ID zurück.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) Gibt das Seitenelement mit dem Attributwert zurück, der dem angegebenen Wert entspricht, oder -1, falls die Seite nicht gefunden wird.
getOrientationSpecificPage(orientation:string, pageId:string) Gibt die Seite zurück, die mit der angegebenen Ausrichtung übereinstimmt.
getElementById(id:string) Findet das Element mit der angegebenen ID auf allen Seiten in diesem Seitenstapel. Da gwd-pagedeck nur die aktive Seite im DOM behält, gibt das standardmäßige document.getElementById(id) nicht die Elemente in den inaktiven Seiten zurück. Es ist ein häufiger Anwendungsfall, vor allem bei dynamischen Anzeigen, dass auf Elemente in inaktiven Seiten verwiesen wird. Hier kann diese Methode verwendet werden, um einen Verweis zum Element nach dessen ID aufzuheben.

Beispiele

Nach einer Pause von zwei Sekunden die nächste Seite der Anzeige aufrufen

Dieses Codebeispiel setzt voraus, dass Ihre Anzeige mindestens zwei Seiten umfasst. Dann können Sie folgendermaßen ein Ereignis erstellen, durch das die Seiten alle zwei Sekunden geändert werden:

  • Ziel: Wählen Sie die Seite aus. Die erste Seite wird als page1 bezeichnet.
  • Ereignis: Wählen Sie Seite > Seitenpräsentation möglich aus.
  • Aktion: Wählen Sie Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen aus.

Benennen Sie die Funktion im Dialogfeld "Benutzerdefinierter Code". Sie können hier einen Namen wie z. B. turnpage angeben. Verwenden Sie dann den folgenden Code:

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

Fügen Sie jeder Seite mit dieser benutzerdefinierten Aktion dasselbe Ereignis hinzu.

Parallaxe

gwd-parallax

Komponente "Parallaxe"

Eigenschaften

Name Beschreibung
images:string Platzhalterattribut, sodass im Eigenschaftenbereich ein assetList-Steuerelement der Komponente "Parallaxe" angezeigt wird.
yscroll:decimal Der Scrollfaktor für die Parallaxe-Animation beim Rendern im Anzeigebereich.

Ereignisse

Name Beschreibung
ready Wird gesendet, wenn alle Assets in der Parallaxe geladen wurden.
Partikeleffekte

gwd-particleeffects

Eine Komponente, die von Partikelsystemen generierte Animationen anzeigt. Jeder Partikeleffekt innerhalb der Komponente hat auch seine eigenen Eigenschaften.

Eigenschaften

Name Beschreibung
autoplay:boolean Gibt an, ob die Animation beim Laden der Komponente automatisch abgespielt werden soll.
time-limit:number Zeitlimit für die Animation. Ein Wert von -1 bedeutet keine zeitliche Begrenzung. Der Standardwert beträgt 29 Sekunden.
Eigenschaften der einzelnen Effekte

gwd-particles

Eigenschaften

Name Beschreibung
acceleration-x:number Horizontale Beschleunigung. Der Grad, um den sich die horizontale Geschwindigkeit pro Frame ändert. Sie wird zur aktuellen horizontalen Geschwindigkeit eines Partikels addiert.
acceleration-y:number Vertikale Beschleunigung. Der Grad, um den sich die vertikale Geschwindigkeit pro Frame ändert. Sie wird zur aktuellen vertikalen Geschwindigkeit eines Partikels addiert.
angle-max:number Der maximale Winkel für die anfängliche Richtung der Partikelbewegung von ‑360 bis 360.
angle-min:number Der minimale Winkel für die anfängliche Richtung der Partikelbewegung von ‑360 bis 360.
autoplay:boolean Gibt an, ob die Animation automatisch abgespielt werden soll, wenn die übergeordnete Partikeleffektkomponente abgespielt wird.
color1:color Die erste Farbe.
color2:color Die zweite Farbe.
emit-interval:number Die Anzahl der Frames zwischen den einzelnen Partikeln, die generiert werden.
emit-x-max:string Die maximale x-Koordinate des Partikelursprungsbereichs.
emit-x-min:string Die minimale x-Koordinate des Partikelursprungsbereichs.
emit-y-max:string Die maximale y-Koordinate des Partikelursprungsbereichs.
emit-y-min:string Die minimale y-Koordinate des Partikelursprungsbereichs.
loop:boolean Gibt an, ob die Animation als Schleife wiedergegeben werden soll.
number:number Die Gesamtanzahl der generierten Partikel, wenn die Animation für diesen Effekt nicht gestoppt oder als Schleife wiedergegeben wird.
opacity-min:number Die minimale anfängliche Deckkraft der Partikel.
opacity-max:number Die maximale anfängliche Deckkraft der Partikel.
opacity-rate:number Der Grad, um den sich die Deckkraft pro Frame ändert. Sie wird zur aktuellen Deckkraft eines Partikels addiert.
random-colors:boolean Gibt an, ob die Partikel in einer zufälligen Farbe zwischen color1 und color2 generiert werden. Bei false werden alle Partikel mit color1 initialisiert.
shape:string Die Form des Partikels.
  • square
  • circle
  • line
  • teardrop
  • image
size-max:number Die maximale Größe der Partikel in Pixel.
size-min:number Die minimale Größe der Partikel in Pixel.
size-rate:number Der Grad, um den sich die Größe pro Frame ändert. Sie wird zur aktuellen Größe eines Partikels addiert.
skip-forward:number Der Ausgangspunkt der Animation, ausgedrückt als Prozentsatz der insgesamt generierten Partikel.
speed-max:number Die maximale Größe der Partikel in Pixel pro Frame.
speed-min:number Die minimale Größe der Partikel in Pixel pro Frame.
sprite-image-src:file Die Quelle des für die Partikelform verwendeten Bildes.
turbulence-frequency:number Die Frequenz der turbulenten Strömung. Bei höheren Werten treten häufiger Unregelmäßigkeiten in der Bewegung auf. Es sollte eine positive Zahl sein.
turbulence-rate:number Der Grad, um den sich die Stärke mit der Zeit ändert.
turbulence-strength:number Die Stärke der turbulenten Strömung, die auf die Partikel einwirkt. Es sollte eine positive Zahl sein.
turbulence-trail:number Gibt an, wie viele vorherige und aktuelle Zustände eines Partikels gerendert werden sollen.

Ereignisse

Name Beschreibung
timelimitreached Wird ausgelöst, wenn die Wiedergabe einer Animation das angegebene Zeitlimit erreicht hat.

Methoden

Name Beschreibung
play() Gibt die Animation wieder.
pause() Pausiert die Animation.
stop() Stoppt die Animation.
Sprite Sheet

gwd-spritesheet

Zeigt einen einzelnen Keyframe oder eine einzelne Animation aus dem Sprite Sheet an.

Eigenschaften

Name Beschreibung
imagesource:file Die URL für das Sprite Sheet-Bild.
offsetx:number

Der Abstand in Pixeln von der linken Seite des Sprite Sheets, entweder zum

  • linken Rand des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder zum
  • linken Rand des ersten Sprite-Bildes, das Sie zum Erstellen einer Animation verwenden
offsety:number

Der Abstand in Pixeln vom oberen Rand des Sprite Sheets, entweder zum

  • oberen Rand des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder zum
  • oberen Rand des ersten Sprite-Bildes, das Sie zum Erstellen einer Animation verwenden
clipwidth:number

Die Breite in Pixeln, entweder

  • des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder
  • des ersten Sprite-Bildes, das Sie zum Erstellen einer Animation verwenden
clipheight:number

Die Höhe in Pixeln, entweder

  • des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder
  • des ersten Sprite-Bildes, das Sie zum Erstellen einer Animation verwenden
alignment:string Bestimmt die Position des Bildes in dessen Container.
scaling:string Bestimmt, wie Bilder verschiedener Größe innerhalb der Komponente dargestellt werden.
totalframecount:number Die Anzahl der Frames, aus denen die Animation besteht.
duration:number Die Dauer der einzelnen Frames in Millisekunden.
loopcount:number Die Anzahl der Wiederholungsschleifen der Animation. Wird für eine endlose Wiederholung auf 0 gesetzt.
autoplay:boolean Legt fest, ob die Animation automatisch wiedergegeben wird.
endonstartframe:boolean Legt fest, ob die Animation mit dem ersten Frame beendet wird.
reverseplay:boolean Legt fest, ob die Animation rückwärts wiedergegeben wird.

Ereignisse

Name Beschreibung
animationend Wird ausgelöst, wenn die Animation abgeschlossen ist.
animationpause Wird ausgelöst, wenn die Animation pausiert wurde.
animationplay Wird ausgelöst, wenn die Wiedergabe der Animation gestartet wird.
animationrestart Wird ausgelöst, wenn die Animation nach einer Pause neu gestartet wird.

Methoden

Name Beschreibung
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) Definiert eine neue Animation.
play() Gibt die Animation wieder.
pause() Pausiert die Animation.
togglePlay() Schaltet zwischen Wiedergabe und Pause der Animation um.
restart() Startet die Animation neu.
previousFrame() Zeigt den vorherigen Frame an.
nextFrame() Zeigt den nächsten Frame an.
goToFrame(id:number) Zeigt einen bestimmten Frame nach Framenummer an.
Bewertungen

gwd-starratings

Eine Komponente zum Rendern einer Reihe von Sternen, die eine Bewertung darstellen.

Eigenschaften

Name Beschreibung
ratingvalue:decimal Wert der Bewertung.
iconsize:number Größe des Sternsymbols.
isemptyshown:boolean Legt fest, ob die leeren Sternsymbole angezeigt werden.
isemptycolored:boolean Legt fest, ob die leeren Sternsymbole farbig sind.
colorprimary:color Primäre Füllfarbe.
colorsecondary:color Farbe des sekundären Farbverlaufs.
gradienttype:string Art des Farbverlaufs.
ratingmax:number Höchstbewertung mit Sternen.
ratingmin:number Mindestbewertung mit Sternen.

Ereignisse

Name Beschreibung
complete Wird ausgelöst, wenn die Bewertungssymbole erstellt wurden.
validationerror Wird ausgelöst, wenn der Wert für die Bewertung unter der Mindestbewertung liegt.
Street View

gwd-streetview

Komponente von Google Street View.

Eigenschaften

Name Beschreibung
key:string Ihr Google Maps Platform API-Schlüssel. Informationen dazu, wie Sie einen eindeutigen Schlüssel für Ihre Anwendung abrufen, finden Sie unter https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal Breitengrad des Ortes.
longitude:decimal Längengrad des Ortes.
interaction:boolean Legt fest, ob die Ansicht geschwenkt/gedreht werden kann.
heading:decimal Gibt die Kompassausrichtung der Kamera an. Werte von 0 bis 360 sind zulässig (beide Werte geben den Norden an, 90 gibt den Osten und 180 den Süden an). Wird keine Ausrichtung angegeben, erfolgt die Berechnung eines Werts, der die Kamera in Richtung des angegebenen Ortes lenkt, wobei von der Stelle ausgegangen wird, an der das nächstgelegene Foto aufgenommen wurde.
pitch:decimal Gibt den Aufwärts- oder Abwärtswinkel der Kamera im Verhältnis zum Street View-Fahrzeug an. Dieser ist oft, aber nicht immer, eben und waagrecht. Positive Werte versetzen den Winkel der Kamera nach oben (wobei sie bei 90 Grad gerade nach oben zeigt); negative Werte versetzen den Winkel der Kamera nach unten (bei -90 Grad zeigt sie gerade nach unten).
zoom:number Gibt die Zoomeinstellung der Kamera im Verhältnis zum Street View-Fahrzeug an.
Swipe-Galerie

gwd-swipegallery

Ein Galerieobjekt, bei dem die Frames in einem horizontal navigierbaren Streifen mit Inhalten angezeigt werden.

Eigenschaften

Name Beschreibung
images:string Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
groups:string Ein durch Komma getrennter String der Gruppen-IDs.
transition-duration:number Animationsgeschwindigkeit der Galerie in Millisekunden.
start-frame:number Der erste Frame für den Start.
num-frames-to-display:number Anzahl der gleichzeitig einzublendenden Frames.
frame-snap-interval:number Anzahl der Frames, die bei jeder Wischbewegung weiterbewegt werden.
autoplay:boolean Legt fest, ob die Galerie einmal automatisch rotiert.
has-navigation:boolean Legt fest, ob Steuerelemente für die Galerienavigation eingeschlossen werden.
navigation-thumbnails:boolean Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden.
navigation-highlight:color Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird.
scaling:string Legt fest, wie der Bildinhalt für den Frame skaliert wird.
swipe-axis:string Die Achse, in der die Wischbewegung erkannt wird.
offset:number Die Abstandsgröße zwischen nebeneinanderliegenden Inhaltsframes.
frame-width:number Die Breite eines Inhaltsframes, überschreibt num-frames-to-display.
frame-height:number Die Höhe eines Inhaltsframes.
autoplay-duration:number Die Gesamtdauer der automatischen Wiedergabe der Frames.
autoplay-step-interval:number Das Intervall zwischen den einzelnen Frameschritten bei der automatischen Wiedergabe.
exit-urls:string Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen.
disable-gesture:boolean Blendet die Komponente "Bewegung" aus bzw. deaktiviert sie, wodurch die Tippnavigation der Galerie aktiviert wird.
pause-front-media:boolean Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem vorherigen Frame pausiert werden.
resume-next-media:boolean Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem nächsten Frame fortgesetzt werden.

Ereignisse

Name Beschreibung
firstinteraction Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert.
allframesviewed Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt wurden.
allframesloaded Wird ausgelöst, wenn alle Frames der Galerie geladen wurden.
autoplayended Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet "true", wenn die Wiedergabe naturgemäß nach Erreichen der festgelegten Dauer endet, ansonsten lautet es "false".
frameshown Wird ausgelöst, wenn ein neuer Frame angezeigt wird, nachdem alle erforderlichen Animationen abgeschlossen sind.
frameactivated Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frameautoplayed Wird ausgelöst, wenn ein Frame für die automatische Wiedergabe aktiviert wird. Dieses Ereignis kann häufiger ausgelöst werden als frameshown, da es bei mehreren Frames, die gleichzeitig eingeblendet werden, für jeden einzelnen Frame separat ausgelöst wird.
frametap Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
reachleftend Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
reachrightend Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.
framemouseover Wird ausgelöst, wenn der Nutzer die Maus über einen Frame bewegt.
framemouseout Wird ausgelöst, wenn der Nutzer die Maus aus einem Frame herausbewegt.
trackstart Wird ausgelöst, wenn eine Ziehbewegung per Maus oder Berührung beginnt.
track Die Komponente registriert die x- und y-Positionsdaten der Ziehbewegung per Maus oder Berührung.
trackend Wird ausgelöst, wenn eine Ziehbewegung per Maus oder Berührung endet.

Methoden

Name Beschreibung
goToFrame(frame:number, opt_animate:string) Wechselt zum angegebenen Frame.
rotateOnce(opt_duration:number, opt_direction:string) Zeigt jeden Frame einmal in der Galerie an.
stopRotation() Stoppt die aktuelle automatische Rotation.
goForwards() Bewegt die Galerie um einen Frame vor.
goBackwards() Bewegt die Galerie um einen Frame zurück.

Beispiele

Untertitel für jeden Frame in einer Swipe-Galerie anzeigen

Mit diesem Codebeispiel können Sie Untertitel für jeden Frame in einer Swipe-Galerie erstellen. Dazu müssen Sie bereits eine Komponente "Swipe-Galerie" mit der ID gwd-swipegallery_1 (dies ist die Standard-ID) im Anzeigebereich erstellt und der Komponente Bilder hinzugefügt haben.

Für die Untertitel muss ebenfalls ein div-Element mit der ID caption-div hinzugefügt werden. Erstellen Sie dann so ein Ereignis:

  • Ziel: Wählen Sie die Swipe-Galerie aus, deren ID gwd-swipegallery_1 lautet.
  • Ereignis: Wählen Sie Swipe-Galerie > Angezeigter Frame aus.
  • Aktion: Wählen Sie Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen aus.

Geben Sie im Dialogfeld "Benutzerdefinierter Code" einen Namen für die Funktion ein. Sie können hier einen Namen wie z. B. showcaption angeben. Verwenden Sie dann den folgenden Code:

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
  1: "The text for frame 1",
  2: "The text for frame 2",
  3: "The text for frame 3"
};
div.textContent = text[gallery.currentIndex];
Interaktionsfläche

gwd-taparea

Abstraktion für Ereignis "Klicken" oder "Tippen".

Eigenschaften

Name Beschreibung
exit-override-url:string Die URL für den Exit, wenn auf die Interaktionsfläche getippt wird.

Ereignisse

Name Beschreibung
action Wird ausgelöst, wenn der Nutzer auf die Schaltfläche tippt (Mobilgerät) oder klickt (Computer).
Für Anruf/SMS-Versand tippen

gwd-taptocall

Diese Komponente ruft bei Klicken oder Berühren die konfigurierte Telefonnummer an bzw. sendet eine SMS.

Eigenschaften

Name Beschreibung
number:string Telefonnummer für Anruf oder SMS.
action:string Auswählen, um eine SMS zu senden oder einen Telefonanruf zu starten.

Ereignisse

Name Beschreibung
action Wird ausgelöst, wenn der Nutzer auf die Schaltfläche tippt (Mobilgerät) oder klickt (Computer).
taptocall Wird bei einem Anruf oder beim Senden einer SMS ausgelöst.

Methoden

Name Beschreibung
dial() Beginnt einen Anruf oder sendet eine SMS an die konfigurierte Nummer.
Übergangsgalerie

gwd-transitiongallery

Eine Komponente, die eine Reihe von Bildern nacheinander mit Animationseffekten zwischen den einzelnen Bildern anzeigt. Weiter unten finden Sie eine Liste mit den Eigenschaften des jeweiligen Übergangstyps.

Eigenschaften bestimmter Übergangstypen

Übergangstyp: Jalousien

gwd-blinds

Der Effekttyp "Jalousien" für die Übergangsgalerie, mit dem das neue Bild wie hinter Jalousien angezeigt wird.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts. Die Standardeinstellung ist von links nach rechts.
  • lefttoright – von links nach rechts
  • righttoleft – von rechts nach links
  • toptobottom – von oben nach unten
  • bottomtotop – von unten nach oben
blinds:number Die Anzahl der Jalousien von 1 bis 20. Der Standardwert ist 5.
transparentbackground:boolean Gibt an, ob der transparente Hintergrund angezeigt werden soll, bevor die Jalousien des neuen Bildes gerendert werden. Bei false überlagern die Jalousien das alte Bild.

 

Übergangstyp: Tür-Wischen

gwd-door-wipe

Eine Variation des Wischeffekts für die Übergangsgalerie, bei der das neue Bild so angezeigt wird, als würden sich Doppeltüren öffnen oder schließen.

Eigenschaften

Name Beschreibung
orientation:string Die Ausrichtung der Animation.
  • horizontal – horizontal
  • vertical – vertikal
direction:string Die Richtung des Effekts.
  • opening – Öffnen
  • closing – Schließen

 

Übergangstyp: Iris-Wischen

gwd-iris-wipe

Eine Variation des Wischeffekts für die Übergangsgalerie, bei der das neue Bild innerhalb eines größer werdenden Kreises angezeigt wird.

Eigenschaften

Name Beschreibung
originpercentx:number Der Ausgangspunkt des größer werdenden Kreises auf der x-Achse als Prozentsatz der Framebreite von 0 bis 100. Der Standardwert ist 50.
originpercenty:number Der Ausgangspunkt des größer werdenden Kreises auf der y-Achse als Prozentsatz der Framehöhe von 0 bis 100. Der Standardwert ist 50.

 

Übergangstyp: Schieben

gwd-push

Der Effekttyp "Schieben" für die Übergangsgalerie, bei dem das alte Bild durch das neue aus der Ansicht geschoben wird.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts. Die Standardeinstellung ist von links nach rechts.
  • lefttoright – von links nach rechts
  • righttoleft – von rechts nach links
  • toptobottom – von oben nach unten
  • bottomtotop – von unten nach oben

 

Übergangstyp: Radiales Wischen

gwd-radial-wipe

Eine Variation des Wischeffekts für die Übergangsgalerie, bei der wie bei einem Uhrzeiger um einen vorgegebenen Punkt herum eine radiale Wischbewegung ausgelöst und so das neue Bild angezeigt wird.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts. Die Standardeinstellung ist im Uhrzeigersinn.
  • clockwise – im Uhrzeigersinn
  • counterclockwise – gegen den Uhrzeigersinn
originpercentx:number Der Ausgangspunkt der radialen Wischbewegung auf der x-Achse als Prozentsatz der Framebreite von 0 bis 100. Der Standardwert ist 50.
originpercenty:number Der Ausgangspunkt der radialen Wischbewegung auf der y-Achse als Prozentsatz der Framehöhe von 0 bis 100. Der Standardwert ist 50.

 

Übergangstyp: Drehen

gwd-rotate

Der Effekttyp "Drehen" für die Übergangsgalerie, bei dem zuerst das alte Bild sich zu drehen beginnt und herangezoomt wird und dann das neue Bild noch in der Drehbewegung herausgezoomt wird.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts. Die Standardeinstellung ist im Uhrzeigersinn.
  • clockwise – im Uhrzeigersinn
  • counterclockwise – gegen den Uhrzeigersinn

 

Übergangstyp: Slicen

gwd-slice

Der Effekttyp "Slicen" für die Übergangsgalerie, bei dem das neue Bild in Segmenten oder Balken angezeigt wird, die nacheinander in der Ansicht erscheinen.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts. Die Standardeinstellung ist von links nach rechts.
  • lefttoright – von links nach rechts
  • righttoleft – von rechts nach links
  • toptobottom – von oben nach unten
  • bottomtotop – von unten nach oben
slices:number Die Anzahl der Segmente von 1 bis 20. Der Standardwert ist 5.
transparentbackground:boolean Gibt an, ob der transparente Hintergrund angezeigt werden soll, bevor das neue Bild Stück für Stück eingeblendet wird. Bei false überlagern die Segmente das alte Bild.

 

Übergangstyp: Teilen und Schieben

gwd-split-push

Eine Variation des Effekts "Schieben" für die Übergangsgalerie, bei der das alte Bild vertikal oder horizontal in zwei Teile geteilt wird. Diese werden dann von entsprechenden Teilen des neuen Bildes in entgegengesetzten Richtungen aus der Ansicht geschoben.

Eigenschaften

Name Beschreibung
orientation:string Die Ausrichtung der Animation.
  • horizontal – horizontal
  • vertical – vertikal

 

Übergangstyp: Streifen-Wischen

gwd-stripe-wipe

Eine Variation des Wischeffekts für die Übergangsgalerie, bei der Streifen in wechselnden Farben gleichzeitig auf dem Bildschirm entstehen und das alte Bild bedecken. Dann schrumpfen die Streifen zusammen, sodass das neue Bild angezeigt wird.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts.
  • lefttoright – von links nach rechts
  • righttoleft – von rechts nach links
  • toptobottom – von oben nach unten
  • bottomtotop – von unten nach oben
  • bottomlefttotopright – von links unten nach rechts oben
  • toplefttobottomright – von links oben nach rechts unten
  • bottomrighttotopleft – von rechts unten nach links oben
  • toprighttobottomleft – von rechts oben nach links unten
stripes:number Die Anzahl der Streifen jeder Farbe von 1 bis 10. Der Standardwert ist 2.
color1:string Eine der beiden abwechselnden Streifenfarben als hexadezimaler Farbcode. Der Standardwert ist #FFFFFF.
color2:string Die andere Streifenfarbe als hexadezimaler Farbcode. Der Standardwert ist # FFA500.

 

Übergangstyp: Venezianische Jalousien

gwd-venetian-blinds

Eine Variation des Effekts "Jalousien" für die Übergangsgalerie, mit dem das neue Bild wie hinter venezianischen Jalousien angezeigt wird.

Eigenschaften

Name Beschreibung
orientation:string Die Ausrichtung der Animation. Die Standardeinstellung ist vertikal.
  • vertical – vertikal
  • horizontal – horizontal
blinds:number Die Anzahl der Jalousien von 1 bis 20. Der Standardwert ist 5.
staggered:boolean Gibt an, ob die Lamellen ineinander übergehen. Bei false bewegen sich alle Lamellen gleichzeitig.

 

Übergangstyp: Wischen

gwd-wipe

Der Effekttyp "Wischen" für die Übergangsgalerie, bei dem das alte Bild hinter einer Linie, die sich von einem Bildrand zum anderen bewegt, nach und nach durch das neue Bild ersetzt wird.

Eigenschaften

Name Beschreibung
direction:string Die Richtung des Effekts. Die Standardeinstellung ist vertikal.
  • lefttoright – von links nach rechts
  • righttoleft – von rechts nach links
  • toptobottom – von oben nach unten
  • bottomtotop – von unten nach oben
angle:number Der Winkel der Linie, mit der das Bild "weggewischt" wird, in Grad von ‑89 bis 89. Der Standardwert ist 0.

 

Übergangstyp: Zickzack

gwd-zigzag

Der Effekttyp "Zickzack" für die Übergangsgalerie, bei dem das neue Bild in einem sich schlängelnden Gittermuster angezeigt wird und Kacheln des neuen Bildes in aufeinanderfolgenden Reihen oder Balken in abwechselnden Richtungen erscheinen.

Eigenschaften

Name Beschreibung
orientation:string Die Ausrichtung des Effekts.
  • horizontal – horizontal
  • vertical – vertikal
rows:number Die Anzahl der Kachelreihen von 1 bis 20, die durch den Zickzack-Effekt angezeigt werden. Der Standardwert ist 5.
columns:number Die Anzahl der Kachelbalken von 1 bis 20, die durch den Zickzack-Effekt angezeigt werden. Der Standardwert ist 5.

 

Ereignisse

Name Beschreibung
autoplayended Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet true, wenn die Wiedergabe naturgemäß nach Erreichen der festgelegten Schleifenanzahl endet, ansonsten lautet es false.
frameactivated Wird ausgelöst, wenn ein neuer Frame aktiviert wird, auch wenn er noch nicht sichtbar ist.
frameshown Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
frametap Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
rotateonceended Wird ausgelöst, wenn die Drehung aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet true, wenn die Drehung naturgemäß endet, ansonsten lautet es false.
reachleftend Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
reachrightend Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.

Methoden

Name Beschreibung
goToFrame(frame:number, with_animation:boolean) Wechselt zum angegebenen Frame.
rotateOnce(startFromCurrentFrame:boolean) Zeigt jeden Frame in der Galerie an, beginnend mit dem Ausgangsframe, wenn startFromCurrentFrame false lautet oder nicht angegeben ist, ansonsten beginnend mit dem aktuellen Frame. Die Drehung endet, bevor der Ausgangsframe erreicht wird.
startAutoplay(startFromCurrentFrame:boolean) Startet die automatische Wiedergabe der Galerie, beginnend mit dem Ausgangsframe, wenn startFromCurrentFrame false lautet oder nicht angegeben ist, ansonsten beginnend mit dem aktuellen Frame. Die automatische Wiedergabe endet, wenn die festgelegte Schleifenanzahl erreicht wird.
stop() Bricht alle laufenden Animationen ab.
goForwards() Bewegt die Galerie um einen Frame vor.
goBackwards() Bewegt die Galerie um einen Frame zurück.
Video

gwd-video

Eine Komponente, die ein HTMLVideoElement zusammenfasst.

Eigenschaften

Name Beschreibung
autoplay:boolean Legt fest, ob das Video beim Laden automatisch wiedergegeben wird.
loop:boolean Legt fest, ob das Video nach dem Ende in einer Schleife wiedergegeben wird.
muted:boolean Legt fest, ob das Video stumm gestartet wird.
controls:boolean Legt fest, ob die Steuerelemente des nativen Standardplayers aktiviert werden.
sources:file Ein durch Komma getrennter String von Videos in unterschiedlichen Formaten.
poster:string Eine URL, die auf einen Posterframe verweist, der angezeigt wird, bis der Nutzer eine Wiedergabe oder Suche startet.

Ereignisse

Name Beschreibung
play Wird ausgelöst, wenn die Wiedergabe der Medien nach dem Pausieren gestartet wird, d. h., wenn sie nach einem vorangehenden Ereignis "Pause" wieder aufgenommen wird.
pause Wird ausgelöst, wenn die Wiedergabe pausiert wird.
playing Wird ausgelöst, wenn die Medien entweder zum ersten Mal nach einer Pause oder nach dem Ende noch einmal wiedergegeben werden.
ended Wird ausgelöst, wenn die Wiedergabe abgeschlossen ist.
volumechange Wird ausgelöst, wenn sich die Audiolautstärke beim Einstellen oder durch die Änderung des Attributs zum Stummschalten ändert.
seeked Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist.
waiting Wird ausgelöst, wenn der angeforderte Vorgang (z. B. die Wiedergabe) verzögert wird, weil zuerst ein anderer Vorgang abgeschlossen werden muss (z. B. eine Suche).

Methoden

Name Beschreibung
mute() Wechselt zwischen Video stummschalten und Stummschaltung aufheben.
pause() Pausiert das Video.
play() Gibt das Video wieder.
replay() Gibt das Video noch einmal wieder.
seek(time:number) Springt zur angegebenen Zeit im Video.
setVolume(volume:number) Stellt die Lautstärke des Videos ein.
setSources(sources:string) Legt die Quellen des Videos fest.

Beispiele

Stummschaltung eines Videos bei jeder Wiedergabe aufheben

Um die Stummschaltung eines Videos bei jeder Wiedergabe aufzuheben, erstellen Sie so ein Ereignis:

  • Ziel: Wählen Sie das Video aus, das gesteuert werden soll. Wenn Sie nur ein Video haben, lautet die Standard-ID gwd-video_1.
  • Ereignis: Wählen Sie Video > Wiedergabe nach Pause aus.
  • Aktion: Wählen Sie Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen aus.

Benennen Sie die Funktion im Dialogfeld "Benutzerdefinierter Code". Sie können hier einen Namen wie z. B. mutebtn angeben. Verwenden Sie dann den folgenden Code:

if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}
YouTube

gwd-youtube

Erweitert das HTMLElement zur Zusammenfassung von Aufrufen der YouTube API.

Eigenschaften

Name Beschreibung
video-url:string Die YouTube-URL für das Video.
autoplay:string In unterstützten Umgebungen wird das YouTube-Video nach dem Laden automatisch wiedergegeben.
preview-duration:number Legt die Dauer der Vorschau fest; wird nur verwendet, wenn das Attribut "Autoplay" auf preview gesetzt ist.
controls:string Zeigt die Steuerelemente für das Video an (none, autohide).
color:string Das Farbdesign der Fortschrittsanzeige des Players (rot oder weiß).
muted:boolean Legt fest, ob das Video stumm gestartet wird.
annotations:boolean Zeigt die Anmerkungen für das Video.
related:boolean Zeigt ähnliche Videos an, sobald das Video abgeschlossen ist.
loop:boolean Legt fest, ob das Video nach dem Ende in einer Schleife wiedergegeben wird.
pause-on-end:boolean Hält das Video an, wenn noch 1 Sekunde verbleibt.
start-position:number Startet das Video zu einem festgelegten Zeitpunkt in Sekunden.
allowfullscreen:boolean Erlaubt den Vollbildmodus auf Computern.
extra-player-args:string Zusätzliche YouTube-Player-Parameter, wie unter https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters beschrieben.

Ereignisse

Name Beschreibung
buffering Der YouTube-Player nutzt die Zwischenspeicherung.
ended Das YouTube-Video ist am Ende angelangt.
paused Das YouTube-Video wurde angehalten.
playing Das YouTube-Video wird wiedergegeben.
replayed Das YouTube-Video wurde noch einmal abgespielt.
viewed0percent Wird ausgelöst, wenn 0 % des Videos angesehen wurden.
viewed25percent Wird ausgelöst, wenn 25 % des Videos angesehen wurden.
viewed50percent Wird ausgelöst, wenn 50 % des Videos angesehen wurden.
viewed75percent Wird ausgelöst, wenn 75 % des Videos angesehen wurden.
viewed100percent Wird ausgelöst, wenn 100 % des Videos angesehen wurden.
previewed0percent Wird ausgelöst, wenn 0 % der Vorschau angesehen wurden.
previewed25percent Wird ausgelöst, wenn 25 % der Vorschau angesehen wurden.
previewed50percent Wird ausgelöst, wenn 50 % der Vorschau angesehen wurden.
previewed75percent Wird ausgelöst, wenn 75 % der Vorschau angesehen wurden.
previewed100percent Wird ausgelöst, wenn 100 % der Vorschau angesehen wurden.

Methoden

Name Beschreibung
toggleMute() Wechselt zwischen Video stummschalten und Stummschaltung aufheben.
pause() Pausiert das Video.
play() Gibt das Video wieder.
replay() Gibt das Video noch einmal wieder.
seek(time:number) Springt zur angegebenen Zeit im Video.
setYouTubeId(id:string, opt_cueOnly:boolean) Ändert die Quelle des YouTube-Videos in die angegebene ID.
War das hilfreich?
Wie können wir die Seite verbessern?