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/" 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 |
| data-diaspeed | Soll eine automatisch laufende Diashow erstellt werden, so muss hier in ms die Zeit zwischen den Wechseln angegeben werden (z.B. 2000). Bei der Lightbox gibt diese Zeit die Überblendungszeit für die Wechsel an. | 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 | Beispiel |
|---|---|---|
| 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. Im Widget darf die “category” nicht gesetzt sein aber in der URL muss sie gesetzt sein. | |
| details | Will man nur ein Item darstellen, so eignet sich der data-type details bestens. Es wird der Zurückpfeil eingebaut und anschliessend ein Item nach Item-Definition. | |
| slider | Die Bilder werden als Slideshow abgewechselt. |
