kanone

Widget – DropPhoto

Für die Darstellung von Bildern steht bereits eine ganze Sammlung von Widgets zur Verfügung. Mit dem Widget “Album” wird die Navigation durch die Alben erstellt, mit dem Widget Photo eine Art diashow und mit dem Widget Carpet ein Bildteppich, welcher auch für die Steuerung des Widget Photo verwendet werden kann.

Widget: Photo-Album

Das Widget Photo-Album stellt die Items als Alben dar. Es kann damit durch die Hirarchie der Alben navigiert werden. Sobald man in einem Album landet, in welchem keine Unteralben liegen, so wird nur noch der zurück-Pfeil und der Titel angezeigt. Kombiniert msan das Album Widget mit dem Photo-Galery Widget, so erscheinen dann die einzelnen Bilder.

<img class="dropapp-album" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps/photo/api.php" data-category="events" data-command="albums" alt="">

ParameterBeschreibungPflichtfeld
classdropapp-albumJa
srcDas DefaultbildJa
data-interfaceIst gleich wie bei Photo-GaleryNein
data-categoryHier wird das Home-Album definiertNein
data-commandalbums oder leerNein

Beispiel

Widget: Photo-Gallery

Dieses Widget stellt zum Beispiel ein Album aus DropPhoto als Galerie dar. Es kann aber auch News aus DropNews als Galerie darstellen. Die Bilder werden immer auf 100% Breite skaliert. Die Thumbnails werden bewusst mit einem separaten img-Tag platziert, damit man flexibler ist. Aus der Grösse des Bildes wird ein Verhältnis berechnet. Dieses Verhältnis wird auf allen Screens beibehalten.

<img class="dropapp-photo" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps/photo/api.php" data-category="/tennisschule-galerien" title="Kontakt" alt="" width="1174" height="537">
<img class="dropapp-photo-carpet" src="">

ParameterBeschreibungPflichfeld
classMuss „dropapp-photo“ seinJa
srcAbsoluter Pfad zum ersten Bild. Läuft das JavaScript nicht, so wird dieses Bild angezeigt. Der Pfad muss in das Verzeichnis /dropbox/photo/ gehen.
https://www.dropnet.ch/dropbox/photo/technik/mysize/004.jpg
Ja
widthMaximale Breite des Bildes. Diese beiden Parameter werden hauptsächlich für die Berechnung des Verhältnisses benötigt (z.B. 600).Ja
heightMaximale Höhe des Bildes (z.B. 400).Ja
data-interfaceGibt an, woher die Daten geholt werden (z.B. '/dropnetapps/photo'). Wenn nicht definiert, wird ein Standardwert angenommen.Nein
data-linkHier kann ein default-Link eingetragen werden.Nein
data-titleEntspricht dem Subject in der E-Mail bei EmpfehlungenNein
data-diaspeedSoll eine automatisch laufende Diashow erstellt werden, so muss hier in ms die Zeit zwischen den Wechseln angegeben werden (z.B. 2000).Nein
data-diafadespeedHier kann die Geschwindigkeit für den Überblendeffekt angegeben werden (z.B. 1000).Nein

Bildgrösse

Die Höhe und Breite muss immer angegeben werden auch wenn diese später mit CSS oder JavaScript überschrieben wird. Wenn die Grösse des Bildes im CSS angegeben werden soll, dann muss das für die ID #dropapp-photo-web angegeben werden, weil anhand dieser Grösse alle abhängigen Grössen im Javascript berechnet werden.

Das Photo-Gallery Widget im Einsatz

Widget: Photo-Slideshow

Die Slideshow stellt die Daten in einer automatisch wechselnden Slideshow dar. Das eignet sich vor allem für Fotoalben aber auch für eine attraktive Darstellung von News.

Widget: Photo-Imageblock / Ads

Dieses Widget stellt die Daten der Item-Schnittstelle als mehrspaltige Icons dar. Die Grösse der Bilder kann im img-Tag angegeben werden. Der Rest ist wie überall. Die Verteilung wird mit Flexbox gelöst, damit es immer ein schöner Block wird. Es wird immer mit der Web-Auflösung gearbeitet. Gibt man zusätzlich die Klasse masonry an, so werden die Bilder in einem dynamischen Masonry-Layout dargestellt. Die dazu benötigten Javascripts werden automatisch nachgeladen.

<img class=”dropapp-imageblock" src="/dropnetimages/dropbox/standard/status-wait-big.gif" data-interface="/dropbox/photo/index.php" data-category="schiffe" data-title="Ads" data-rows="7" data-limit="13" width="" height="80">