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.
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="">
| Parameter | Beschreibung | Pflichfeld |
|---|---|---|
| class | Muss „dropapp-photo“ sein | Ja |
| src | Absoluter 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 |
| width | Maximale Breite des Bildes. Diese beiden Parameter werden hauptsächlich für die Berechnung des Verhältnisses benötigt (z.B. 600). | Ja |
| height | Maximale Höhe des Bildes (z.B. 400). | Ja |
| data-interface | Gibt an, woher die Daten geholt werden (z.B. '/dropnetapps/photo'). Wenn nicht definiert, wird ein Standardwert angenommen. | Nein |
| data-link | Hier kann ein default-Link eingetragen werden. | Nein |
| data-title | Entspricht dem Subject in der E-Mail bei Empfehlungen | Nein |
| data-diaspeed | Soll eine automatisch laufende Diashow erstellt werden, so muss hier in ms die Zeit zwischen den Wechseln angegeben werden (z.B. 2000). | Nein |
| data-diafadespeed | Hier kann die Geschwindigkeit für den Überblendeffekt angegeben werden (z.B. 1000). | Nein |
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.
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.
Dieses Widget wird in naher Zukunft alle Photo Widgets ersetzen und evtl. noch viele mehr. Es bedient die vollständige Item-Schnittstelle und kann die unterschiedlichsten Ausgaben erstellen. Auch das Ausgabeformat entspricht immer unserem Item-HTML-Standard.
<img class="dropapp-imageblock" data-type="imageblock-lightbox" src="/dropnetimages/dropbox/standard/status-wait-big.gif" data-interface="/dropnetapps/photo/api.php" data-category="schiffe" data-title="Ads" alt="" data-rows="7" data-limit="13" width="16">
Dieses Widget soll mit der Zeit alle Parameter unterstützen. Vorerst werden folgende Parameter unterstützt.
| Parameter | Beschreibung | Pflichtfeld |
|---|---|---|
| class | dropapp-imageblock | Ja |
| src | Das Defaultbild | Ja |
| data-type | Dieser Typ wählt die Darstellung der Ausgabe. | Nein |
| data-interface | Ist gleich wie bei Photo-Galery (/dropbox/photo/index.php) | Nein |
| data-category | Hier wird das Home-Album definiert | Nein |
| data-limit | Anzahl zurück gelieferte Datensätze | Nein |
| data-offset | Ab dieser Datensatz werden die Items ausgegeben. | Nein |
| data-sort | Feldname, nach welchem sortiert wird. | Nein |
| data-sort_direction | asc oder desc | Nein |
| data-language | de, en ... | Nein |
| data-search | Suchbegriff, welcher direkt an die Item-Schnittstelle gegeben wird. | Nein |
| data-link | Basislink auf den Datensätzen | Nein |
| data-date_start | Startdatum für Datumsgesteuerte Items | Nein |
| data-date_end | Enddatum für Datumsgesteuerte Items | Nein |
Bereits am Anfang werden einige Ausgaben unterstützt. Es ist immer nur so viel CSS integriert, damit man die Funktion sieht. Alle benötigten Javascripts werden automatisch nachgeladen.
| data-type | Beschreibung |
|---|---|
| imageblock (default) | Die Verteilung wird mit Flexbox gelöst, damit es immer ein schöner Block wird. Es wird immer mit der Web-Auflösung gearbeitet. |
| imageblock-lightbox | Die imageblock-Ausgabe wird um die bekannte lightbox erweitert. |
| masonry | Die Bilder werden in einem dynamischen Masonry-Layout dargestellt. |
| masonry-lightbox | Die masonry-Ausgabe wird um die bekannte lightbox erweitert. |
| draggable | Alle Bilder werden in einer verschiebbaren Zeile dargestellt. |
| carousel | Das carousel ist ähnlich wie das draggable, verschiebt den Inhalt aber immer seitenweise. So eignet es sich besonders auf Touch-Geräten zum Blättern. |
| albums | Dieser Typ wechselt auf der Item-Schnittstelle die “action” automatisch auf “albums” und holt so die Albumliste. Diese wird dann als imageblock (Item) dargestellt. 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 man das Album Widget mit dem Photo-Galery Widget, so erscheinen dann die einzelnen Bilder. |
