DropTours bietet die DropNet-Item-Schnittstelle, mit welcher dynamisch auf die Tourendaten und Adressdaten zugegriffen werden kann. Dadurch können die Daten in den unterschiedlichsten Darstellungen sehr einfach in die Homepage integriert werden. Die Integration ist nicht nur mit DropEdit, sondern auf fast jeder anderen Homepage auch möglich. So können zum Beispiel auf der Hauptseite die nächsten 5 Touren aufgelistet werden oder die nächste Tour wird als Slideshow besonders hervorgehoben. Die Darstellung erledigen Widgets. DropNet AG stellt bereits eine Vielzahl an Widgets zu Verfügung. Selbstverständlich sind auch individuelle Widgets möglich.
Die Widgets sind Javascript Schnipsel, welche auf jeder Seite integriert werden können. Dazu braucht es das Javascript und einen IMG-Tag. Das Javascript wird vom DropNet CDN-Server geliefert und am besten im Head eingebaut. Der IMG-Tag kann dann irgendwo auf der Seite integriert werden. Die Widgets sind auf jQuery v1.9.1 und Bootstrap v3.3.4 aufgebaut, was folgende Bibliotheken voraussetzt.
<link href="https://cdn.dropnet.ch/dropnetcss/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnetjavascript/jquery.js" type="text/javascript"></script>
<script src="https://cdn.dropnet.ch/dropnetcss/bootstrap/js/bootstrap.js" type="text/javascript"></script>
Dann braucht es die DropNet-Apps.
<link href="https://cdn.dropnet.ch/dropnet.min.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnet.min.js" type="text/javascript"></script>
Die Slideshow stellt die Daten in einer automatisch wechselnden Slideshow dar. Das eignet sich vor allem für Touren und Fotoalben. So können zum Beispiel sehr attraktiv die nächsten 3 Touren dargestellt werden.
<img class="dropapp-slider" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="https://ssl.dropnet.ch/droptouren/dropnetapps/tours/api.php?command=getTours" data-max="10" data-language="de" data-link="" alt="" width="16" height="16">
Die Galerie stellt die Bilder aus einem Album attraktiv mit Überblenden dar. Damit können zum Beispiel die nächsten 3 Touren oder der letzte Tourenbericht dargestellt werden. Der übersichtliche Bildteppich ist bewusst in einem separaten img-Tag untergebracht, damit er flexibel platziert werden kann. Die Galerie darf auf einer Seite nur einmal eingesetzt werden.
<img alt="" class="dropapp-photo" height="350" src=”/dropnetimages/dropbox/standard/status-wait.gif" data-interface=”https://ssl.dropnet.ch/droptouren/dropnetapps/tours/api.php?command=getTours&limit=10" data-link="http://www.droptouren.ch/touren/" data-language="de" width="600">
<img class="dropapp-photo-carpet" src="">
Die Parameter werden dem img-Tag übergeben. Das obige Beispiel ist die minimalste Version, welches alle zukünftigen Touren darstellt. Mit folgenden Parametern kann die Ausgabe gefiltert werden:
| Parameter | Beschreibung | Beispiel |
|---|---|---|
| class | Über diese Klasse wird das Widget aufgebaut. | dropapp-photo |
| src | Bis das Javascript fertig geladen ist, wird dieses Bild dargestellt. | .../status-wait.gif |
| width | Die Beiden Parameter width und height werden nur für das Verhältnis gebraucht und für die Darstellung des ersten Bildes, bis das Javascript übernimmt. | 300 |
| height | siehe width | 400 |
| data-interface | Das Interface ist die Item-Schnittstelle an DropTours, DropPhoto, DropNews oder an eine andere App. Hinter dem Fragezeichen können noch weitere Parameter zur Filterung der Daten mitgegeben werden. https://ssl.dropnet.ch/droptouren/dropnetapps/tours/api.php?command=getTours | |
| data-link | Hier kann ein default-Link eingetragen werden. | http://www.droptouren.ch/touren |
| data-language | Sprache für die Ausgabe. Je nach App kann es sprachabhängige Daten beinhalten. | de, fr, en, it |
| data-diaspeed | Soll eine automatisch laufende Diashow erstellt werden, so kann hier in ms die Zeit zwischen den Wechseln angegeben werden. | 2000 |
| data-diafadespeed | Hier kann die Geschwindigkeit für den Überblendeffekt angegeben werden. | 1000 |
| DropTours-Parameter | Diese Parameter werden im data-interface als GET-Parameter mitgegeben. | |
| limit | Die Anzahl Datensätze kann hier limitiert werden. | 5 |
| offset | Es können so zum Beispiel ab dem dritten Datensatz dargestellt werden. | 3 |
| date_start | Es werden alle Touren ab diesem Datum dargestellt. | 2017-09-01 |
| data_end | Es werden alle Touren bis zu diesem Datum dargestellt. | 2017-12-31 |
| category | Hier kann der Tourtyp übergeben werden. | BW |
| group | Gruppe | Jugend |
| search | Volltextsuche | gipfel |
| eventtype | Der Veranstaltungstyp kann je nach Sektion sehr unterschiedlich sein. | Events |
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.
Unterdessen existiert für DropTours ein Widget. Eine detaillierte Beschreibung dazu findest du im Entwicklerbereich.
© 1998 - 2024 DropNet AG | AGB | Kontakt | Datenschutzerklärung
