kanone

Widget – ImageBlock

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">

Die Parameter

Dieses Widget soll mit der Zeit alle Parameter unterstützen. Vorerst werden folgende Parameter unterstützt.

ParameterBeschreibungPflichtfeld
classdropapp-imageblockJa
srcDas DefaultbildJa
data-typeDieser Typ wählt die Darstellung der Ausgabe.Nein
data-interfaceIst gleich wie bei Photo-Galery (/dropbox/photo/index.php)Nein
data-categoryHier wird das Home-Album definiertNein
data-limitAnzahl zurück gelieferte DatensätzeNein
data-offsetAb dieser Datensatz werden die Items ausgegeben.Nein
data-sortFeldname, nach welchem sortiert wird.Nein
data-sort_directionasc oder descNein
data-languagede, en ...Nein
data-searchSuchbegriff, welcher direkt an die Item-Schnittstelle gegeben wird.Nein
data-linkBasislink auf den DatensätzenNein
data-date_startStartdatum für Datumsgesteuerte ItemsNein
data-date_endEnddatum für Datumsgesteuerte ItemsNein
data-diaspeedSoll 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

Unterstützte Typen (Ausgabe-Darstellungen)

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-typeBeschreibungBeispiel
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-lightboxDie imageblock-Ausgabe wird um die bekannte lightbox erweitert. 
masonryDie Bilder werden in einem dynamischen Masonry-Layout dargestellt. 
masonry-lightboxDie masonry-Ausgabe wird um die bekannte lightbox erweitert. 
draggableAlle Bilder werden in einer verschiebbaren Zeile dargestellt. 
carouselDas 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.

 
detailsWill 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. 
sliderDie Bilder werden als Slideshow abgewechselt. 

Beispiele

Die folgende Auflistung zeigt die Alben.

Das Masonry-Layout.