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 Mountainbike · Allgäu

Um den Säuling (Schützensteig)

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
Premium-Touren: Exklusiv mit Outdooractive Pro+

Von uns für dich: Entdecke die besten Tourenvorschläge, sorgfältig ausgewählt und professionell beschrieben vom Outdooractive Team. Wir sind leidenschaftliche Sportler, Naturliebhaber und Fotografen – Outdoorsport ist unser Element.

Mit unseren Premium-Touren bekommst du persönliche Empfehlungen direkt aus erster Hand. Immer inklusive präziser GPS-Tracks, ausführlicher Beschreibungen, authentischer Tipps und beeindruckender Fotos. Lass dich inspirieren und finde deine nächste Lieblingstour!

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";
});