Find more Examples here

Integrate Detail View on a Page (Server Side Include) (FlexView-API)

Version reduced to minimal set of HTML Read Example Description

Mountainbike Premium Inhalt

Um den Säuling (Schützensteig)

Mountainbike · Allgäu
Logo Outdooractive Premium
Verantwortlich für diesen Inhalt
Outdooractive Premium Verifizierter Partner 
  • Der Säuling.
    Der Säuling.
    Foto: Kogo, Lizenz: GNU-Lizenz für freie Dokumentation, Version 1.2, Outdooractive Redaktion
mittel
Strecke 39 km
5:00 h
1.141 hm
1.141 hm
1.431 hm
805 hm

Die Rundtour um den Säuling führt an den Königsschlössern vorbei zum Plansee und am Lech entlang zurück. Highlight ist der Downhill auf dem Schützensteig hinunter zum Plansee.

Diese ausgedehnte Runde bietet neben reizvollen Ausblicken auf die umliegenden Gipfel, einem großartigen Downhill, Einkehrmöglichkeiten auch Kultur! Man passiert nämlich gleich zwei Schlösser des Märchenkönigs Ludwig II.

Diese Tour kann nicht freigeschaltet werden.

Bereits freigeschaltet? 

Premium Inhalt Premium-Touren werden von professionellen Autoren oder Fachverlagen herausgegeben.
Herausgeber Outdooractive Premium

Wir sind ein Team aus passionierten Sportlern, Naturliebhabern und Fotografen – Outdoor ist unsere Leidenschaft und unser Element. Wir laden euch als Pro+ User ein, uns auf unseren Expeditionen zu folgen. In diesem Kanal teilen wir unsere persönlichen Empfehlungen mit euch und geben euch alle relevanten Informationen zu unseren Touren an die Hand.

Mit Outdooractive Premium-Touren stellen wir euch unseren hochwertigsten Content zur Verfügung: akkurate Tracks, authentische Beschreibungen und ausdrucksstarkes Bildmaterial. Alle Premium-Touren können offline gespeichert und die Tracks heruntergeladen werden.

Profilbild von Franka Fuchs Autor Franka Fuchs
Ghostwriter

Description

Load the HTML on server side (e.g. with php) and put it into the div container with class ```oax-top-cont```:
<div class="oax-top-cont" style="height:0px;overflow:hidden;">
  <!-- Start of block included on server side -->
  <?php

     // an id of a tour
     $i = '1373510';

     // replace id above if another id was set as http get parameter
     if (preg_match('/^-?[0-9]+$/',$_GET["i"])) {
     $i = $_GET["i"];
     }

     // put the id into the Outdooractive API snippet url
     $url = "https://www.outdooractive.com/alpportal/ssi/desktop/detail?i=${i}&proj=api-dev-oa&lang=de&key=yourtest-outdoora-ctiveapi";

     // load the snippet through http
     // (php allows a short cut: use file_get_contents() with a path including http as protocol)
     $snippet = file_get_contents( $url );

     // paste the snippet into the html dom
     echo $snippet;
     ?>
  <!-- End of block included on server side -->
</div>
Instantiate the FlexView API with a JavaScript call:
// instantiate the FlexView API detail page
// (id comes from php code on server side here)
var dp = oa.api.detailpage( { "id": "<?php echo $i; ?>", actionOpenType: "in-page" } );

// the div container with class "oax-top-cont" is hidden on page load
// show the div container as soon as the FlexView API detail page was loaded
dp.whenLoaded( function () {
    document.getElementsByClassName("oax-top-cont")[0].style.height = "auto";
});