| Server IP : 213.186.33.4 / Your IP : 216.73.216.59 Web Server : Apache System : Linux webm006.cluster103.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 User : awebpaca ( 35430) PHP Version : 8.5.0 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/awebpaca/360/demo-architecture/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Démonstration - Le patrimoine architectural de TPM</title>
<meta name="description" content="Découvrez dans cette démonstration quelques images à 360° de la Tour Royale et du fort Balaguier. Ces images ont été réalisé en collaboration avec Audiovisit et TPM dans le cadre de la mise en valeur du patrimoine architecturale de Toulon Provence Méditerranée." />
<meta name="keywords" content="Démonstration - Le patrimoine architectural de TPM" />
<meta name="medium" content="mult" />
<meta name="video_height" content="480"></meta>
<meta name="video_width" content="640"></meta>
<link rel="image_src" href="indexdata/thumbnail.jpg" />
<!-- <meta name="directory" content="PATH/"></meta> -->
<!-- <link rel="target_url" href="index.html" /> -->
<meta name="author" content="Une réalisation ADEO-WEB" />
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/jquery.fullpage.min.css">
<!-- Custom theme -->
<link rel="stylesheet" href="css/custom.min.css">
<style type="text/css">
div#panoDIV {
height:100%;
position:relative;
overflow:hidden;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<script src="js/head.min.js"></script>
<!--[if !IE]><!-->
<script type="text/javascript" src="indexdata/lib/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="indexdata/lib/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gt IE 8]>
<script type="text/javascript" src="indexdata/lib/jquery-2.1.1.min.js"></script>
<![endif]-->
<link type="text/css" href="indexdata/lib/jquery-ui-1.11.1/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="indexdata/lib/jquery-ui-1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="indexdata/lib/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="indexdata/lib/Kolor/KolorTools.min.js"></script>
<script type="text/javascript" src="indexdata/graphics/KolorBootstrap.js"></script>
<style type="text/css">
div#panoDIV.cursorMoveMode {
cursor: move;
cursor: url(indexdata/graphics/cursors_move_html5.cur), move;
}
div#panoDIV.cursorDragMode {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: url(indexdata/graphics/cursors_drag_html5.cur), default;
}
</style>
<script type="text/javascript">
function webglAvailable() {
try {
var canvas = document.createElement("canvas");
return !!window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"));
} catch(e) {
return false;
}
}
function getWmodeValue() {
var webglTest = webglAvailable();
if(webglTest){
return 'direct';
}
return 'opaque';
}
function readDeviceOrientation() {
// window.innerHeight is not supported by IE
var winH = window.innerHeight ? window.innerHeight : jQuery(window).height();
var winW = window.innerWidth ? window.innerWidth : jQuery(window).width();
//force height for iframe usage
if(!winH || winH == 0){
winH = '100%';
}
// set the height of the document
jQuery('html').css('height', winH);
// scroll to top
window.scrollTo(0,0);
}
jQuery( document ).ready(function() {
if (/(iphone|ipod|ipad|android|iemobile|webos|fennec|blackberry|kindle|series60|playbook|opera\smini|opera\smobi|opera\stablet|symbianos|palmsource|palmos|blazer|windows\sce|windows\sphone|wp7|bolt|doris|dorothy|gobrowser|iris|maemo|minimo|netfront|semc-browser|skyfire|teashark|teleca|uzardweb|avantgo|docomo|kddi|ddipocket|polaris|eudoraweb|opwv|plink|plucker|pie|xiino|benq|playbook|bb|cricket|dell|bb10|nintendo|up.browser|playstation|tear|mib|obigo|midp|mobile|tablet)/.test(navigator.userAgent.toLowerCase())) {
if(/iphone/.test(navigator.userAgent.toLowerCase()) && window.self === window.top){
jQuery('body').css('height', '100.18%');
}
// add event listener on resize event (for orientation change)
if (window.addEventListener) {
window.addEventListener("load", readDeviceOrientation);
window.addEventListener("resize", readDeviceOrientation);
window.addEventListener("orientationchange", readDeviceOrientation);
}
//initial execution
setTimeout(function(){readDeviceOrientation();},10);
}
});
function accessWebVr(){
unloadPlayer();
eventUnloadPlugins();
setTimeout(function(){ loadPlayer(true); }, 100);
}
function accessStdVr(){
unloadPlayer();
resetValuesForPlugins();
setTimeout(function(){ loadPlayer(false); }, 100);
}
function loadPlayer(isWebVr) {
if (isWebVr) {
embedpano({
id:"krpanoSWFObject"
,xml:"indexdata/index_vr.xml"
,target:"panoDIV"
,passQueryParameters:true
,bgcolor:"#000000"
,html5:"only+webgl"
,focus: false
,vars:{skipintro:true,norotation:true}
});
} else {
var isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
embedpano({
id:"krpanoSWFObject"
,swf:"indexdata/index.swf"
,target:"panoDIV"
,passQueryParameters:true
,bgcolor:"#000000"
,focus: false
,html5:isBot ? "always" : "prefer"
,wmode: getWmodeValue()
});
}
//apply focus on the visit if not embedded into an iframe
if(top.location === self.location){
kpanotour.Focus.applyFocus();
}
}
function unloadPlayer(){
if(jQuery('#krpanoSWFObject')){
removepano('krpanoSWFObject');
}
}
function isVRModeRequested() {
var querystr = window.location.search.substring(1);
var params = querystr.split('&');
for (var i=0; i<params.length; i++){
if (params[i].toLowerCase() == "vr"){
return true;
}
}
return false;
}
</script>
</head>
<body>
<div id="tourDIV">
<div id="scene">
<div id="panoDIV">
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="indexdata/index">
<param name="movie" value="indexdata/index.swf"/>
<param name="allowFullScreen" value="true"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="indexdata/index.swf" width="100%" height="100%">
<param name="movie" value="indexdata/index.swf"/>
<param name="allowFullScreen" value="true"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player to visualize the Virtual Tour : Démonstration - Le patrimoine architectural de TPM"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</div>
<script type="text/javascript" src="indexdata/index.js"></script>
<script type="text/javascript">
if (isVRModeRequested()){
accessWebVr();
}else{
accessStdVr();
}
</script>
</div><!-- #scene -->
<div id="commands">
<a href="#" class="previous"></a>
<a href="#" class="view-layer"></a>
<a href="#" class="next"></a>
</div>
<div id="commands-optional">
<a href="#" class="autorotation none" title="Toggle autorotation on/off"></a>
<a href="#" class="fullscreen enter" title="Toggle fullscreen"></a>
</div>
<div id="nav-overlay">
</div>
<div id="helper">
<span class="mouse running" title="You can use the mouse wheel to navigate"><span class="wheel"></span></span>
<span class="keyboard" title="You can use keyboard arrows to navigate">
<span class="up"></span>
<span class="left"></span>
<span class="down"></span>
<span class="right"></span>
</span>
<span class="swipe"></span>
</div>
<div id="loader" class="layered-visible opened">
<div class="cell">
<p class="clock"></p>
</div>
</div>
<nav>
<ul>
<li>
<ul data-id="panogroup13">
<li>
<a href="#"
class="pano-in-a-group"
data-target="pano12"
title="Fort Balaguier | Fort Balaguier">
<img src="indexdata/fort_balaguier_12/thumbnail.jpg" alt="Fort Balaguier">
</a>
</li>
<li>
<a href="#"
class="pano-in-a-group"
data-target="pano20"
title="Musée - Ancienne chapelle du fort. | Fort Balaguier">
<img src="indexdata/musee___ancienne_cha_20/thumbnail.jpg" alt="Musée - Ancienne chapelle du fort.">
</a>
</li>
<li>
<span class="icon icon-info toggle-group-info"
title="About Fort Balaguier"
data-target="panogroup13">
</span>
</li>
</ul>
</li>
<li>
<ul data-id="panogroup17">
<li>
<a href="#"
class="pano-in-a-group"
data-target="pano16"
title="Chapelle Saint-Louis | Chapelle Saint-Louis">
<img src="indexdata/chapelle_saint_louis_16/thumbnail.jpg" alt="Chapelle Saint-Louis">
</a>
</li>
<li>
<a href="#"
class="pano-in-a-group"
data-target="pano18"
title="Chapelle Saint-Louis | Chapelle Saint-Louis">
<img src="indexdata/chapelle_saint_louis_18/thumbnail.jpg" alt="Chapelle Saint-Louis">
</a>
</li>
<li>
<span class="icon icon-info toggle-group-info"
title="About Chapelle Saint-Louis"
data-target="panogroup17">
</span>
</li>
</ul>
</li>
<li>
<ul data-id="panogroup25">
<li>
<a href="#"
class="pano-in-a-group"
data-target="pano21"
title="Tour Royale | La Tour Royale">
<img src="indexdata/tour_royale_21/thumbnail.jpg" alt="Tour Royale">
</a>
</li>
<li>
<a href="#"
class="pano-in-a-group"
data-target="pano14"
title="Tour Royale | La Tour Royale">
<img src="indexdata/tour_royale_14/thumbnail.jpg" alt="Tour Royale">
</a>
</li>
<li>
<span class="icon icon-info toggle-group-info"
title="About La Tour Royale"
data-target="panogroup25">
</span>
</li>
</ul>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano22"
title="Cellule du fort Malbousquet">
<img src="indexdata/cellule_du_fort_malb_22/thumbnail.jpg" alt="Cellule du fort Malbousquet">
</a>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano23"
title="Couvent des Observentins">
<img src="indexdata/chapelle_des_peniten_23/thumbnail.jpg" alt="Couvent des Observentins">
</a>
</li>
</ul>
</nav>
<div id="fullpage" class="on">
<header class="active" title="Démonstration - Le patrimoine architectural de TPM">
<p>
<img src="indexdata/thumbnail.jpg" alt="Démonstration - Le patrimoine architectural de TPM" class="thumbnail">
<span class="icon icon-info"></span>
<!-- <img src="img/info.svg" alt="info" class="info"> -->
</p>
<h1>Démonstration - Le patrimoine architectural de TPM</h1>
<p class="project-description html-encode"><font face="arial, sans-serif">Découvrez dans cette démonstration quelques images à 360° de la Tour Royale et du fort Balaguier. Ces images ont été réalisé en collaboration avec Audiovisit et TPM dans le cadre de la mise en valeur du patrimoine architecturale de Toulon Provence Méditerranée.</font></p>
<span class="icon icon-info"></span>
</header>
<div class="section" data-id="panogroup13">
<div class="slide" data-id="pano12" data-anchor="pano12">
<a href="#" class="previous-section" title="Previous group"></a>
<div class="tab main opened">
<p class="group-title">
<span class="icon icon-info toggle-group-info"
title="More info about Fort Balaguier"
data-target="panogroup13">
Fort Balaguier
</span>
</p>
<p class="pano-thumbnail" style="background-image:url(indexdata/fort_balaguier_12/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/fort_balaguier_12/thumbnail.jpg" alt="Fort Balaguier"></a>
</p>
<h2><a href="#" class="view-pano link-title">Fort Balaguier</a></h2>
<div class="pano-description html-encode none"><font face="arial, sans-serif">Vue panoramique depuis le sommet de la tour à canons.</font></div>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
</div>
<div class="tab about none">
<p><img src="indexdata/fort_balaguier_12/thumbnail.jpg" alt="Fort Balaguier" class="group-thumbnail"></p>
<h2 class="group-title">Fort Balaguier</h2>
<div class="group-description html-encode"><font face="arial, sans-serif">Le fort de Balaguier a été construit en 1636, face à la Tour Royale, afin de protéger la rade de Toulon. Il abrite aujourd’hui le musée de la ville qui relate l’histoire des bagnes de Toulon et d’Outre-Mer. De la terrasse et des jardins, le visiteur découvre une vue magnifique sur toute la rade de Toulon.</font></div>
</div>
<a href="#" class="next-section" title="Next group"></a>
</div>
<div class="slide" data-id="pano20" data-anchor="pano20">
<a href="#" class="previous-section" title="Previous group"></a>
<div class="tab main opened">
<p class="group-title">
<span class="icon icon-info toggle-group-info"
title="More info about Fort Balaguier"
data-target="panogroup13">
Fort Balaguier
</span>
</p>
<p class="pano-thumbnail" style="background-image:url(indexdata/musee___ancienne_cha_20/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/musee___ancienne_cha_20/thumbnail.jpg" alt="Musée - Ancienne chapelle du fort."></a>
</p>
<h2><a href="#" class="view-pano link-title">Musée - Ancienne chapelle du fort.</a></h2>
<div class="pano-description html-encode none"><font face="arial, sans-serif">Vue panoramique de la salle d'exposition.</font></div>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
</div>
<div class="tab about none">
<p><img src="indexdata/fort_balaguier_12/thumbnail.jpg" alt="Fort Balaguier" class="group-thumbnail"></p>
<h2 class="group-title">Fort Balaguier</h2>
<div class="group-description html-encode"><font face="arial, sans-serif">Le fort de Balaguier a été construit en 1636, face à la Tour Royale, afin de protéger la rade de Toulon. Il abrite aujourd’hui le musée de la ville qui relate l’histoire des bagnes de Toulon et d’Outre-Mer. De la terrasse et des jardins, le visiteur découvre une vue magnifique sur toute la rade de Toulon.</font></div>
</div>
<a href="#" class="next-section" title="Next group"></a>
</div>
</div>
<div class="section" data-id="panogroup17">
<div class="slide" data-id="pano16" data-anchor="pano16">
<a href="#" class="previous-section" title="Previous group"></a>
<div class="tab main opened">
<p class="group-title">
<span class="icon icon-info toggle-group-info"
title="More info about Chapelle Saint-Louis"
data-target="panogroup17">
Chapelle Saint-Louis
</span>
</p>
<p class="pano-thumbnail" style="background-image:url(indexdata/chapelle_saint_louis_16/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/chapelle_saint_louis_16/thumbnail.jpg" alt="Chapelle Saint-Louis"></a>
</p>
<h2><a href="#" class="view-pano link-title">Chapelle Saint-Louis</a></h2>
<div class="pano-description html-encode none"><font face="arial, sans-serif">Vue intérieure de la chapelle.</font></div>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
</div>
<div class="tab about none">
<p><img src="indexdata/chapelle_saint_louis_16/thumbnail.jpg" alt="Chapelle Saint-Louis" class="group-thumbnail"></p>
<h2 class="group-title">Chapelle Saint-Louis</h2>
<div class="group-description html-encode"><font face="arial, sans-serif">La chapelle St Louis posée à mi-flanc de la colline de Cépet est inscrite à l'Inventaire Supplémentaire des Monuments Historiques. Ancienne chapelle de l'hôpital maritime de St Mandrier créé en 1670, elle fut construite peu avant 1830 lors des travaux d'agrandissement de l'hôpital. </font></div>
</div>
<a href="#" class="next-section" title="Next group"></a>
</div>
<div class="slide" data-id="pano18" data-anchor="pano18">
<a href="#" class="previous-section" title="Previous group"></a>
<div class="tab main opened">
<p class="group-title">
<span class="icon icon-info toggle-group-info"
title="More info about Chapelle Saint-Louis"
data-target="panogroup17">
Chapelle Saint-Louis
</span>
</p>
<p class="pano-thumbnail" style="background-image:url(indexdata/chapelle_saint_louis_18/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/chapelle_saint_louis_18/thumbnail.jpg" alt="Chapelle Saint-Louis"></a>
</p>
<h2><a href="#" class="view-pano link-title">Chapelle Saint-Louis</a></h2>
<div class="pano-description html-encode none"><font face="arial, sans-serif">Vue extérieure de la chapelle.</font></div>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
</div>
<div class="tab about none">
<p><img src="indexdata/chapelle_saint_louis_16/thumbnail.jpg" alt="Chapelle Saint-Louis" class="group-thumbnail"></p>
<h2 class="group-title">Chapelle Saint-Louis</h2>
<div class="group-description html-encode"><font face="arial, sans-serif">La chapelle St Louis posée à mi-flanc de la colline de Cépet est inscrite à l'Inventaire Supplémentaire des Monuments Historiques. Ancienne chapelle de l'hôpital maritime de St Mandrier créé en 1670, elle fut construite peu avant 1830 lors des travaux d'agrandissement de l'hôpital. </font></div>
</div>
<a href="#" class="next-section" title="Next group"></a>
</div>
</div>
<div class="section" data-id="panogroup25">
<div class="slide" data-id="pano21" data-anchor="pano21">
<a href="#" class="previous-section" title="Previous group"></a>
<div class="tab main opened">
<p class="group-title">
<span class="icon icon-info toggle-group-info"
title="More info about La Tour Royale"
data-target="panogroup25">
La Tour Royale
</span>
</p>
<p class="pano-thumbnail" style="background-image:url(indexdata/tour_royale_21/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/tour_royale_21/thumbnail.jpg" alt="Tour Royale"></a>
</p>
<h2><a href="#" class="view-pano link-title">Tour Royale</a></h2>
<div class="pano-description html-encode none"><font face="arial, sans-serif">Grand escalier. Vue de l'architecture intérieure.</font></div>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
</div>
<div class="tab about none">
<p><img src="indexdata/tour_royale_21/thumbnail.jpg" alt="La Tour Royale" class="group-thumbnail"></p>
<h2 class="group-title">La Tour Royale</h2>
<div class="group-description html-encode"><font face="arial, sans-serif">La Tour royale, également nommée Grosse tour, est une tour à <a href="https://fr.wikipedia.org/wiki/Canon_(artillerie)">canons</a> édifiée à <a href="https://fr.wikipedia.org/wiki/Toulon">Toulon</a> à la pointe de Pipady, au début du xvie siècle (<a href="https://fr.wikipedia.org/wiki/1514">1514</a>) à l'initiative de <a href="https://fr.wikipedia.org/wiki/Louis_XII_de_France">Louis XII</a>, afin de protéger la <a href="https://fr.wikipedia.org/wiki/Rade_de_Toulon">rade</a> des intrusions ennemies.</font></div>
</div>
<a href="#" class="next-section" title="Next group"></a>
</div>
<div class="slide" data-id="pano14" data-anchor="pano14">
<a href="#" class="previous-section" title="Previous group"></a>
<div class="tab main opened">
<p class="group-title">
<span class="icon icon-info toggle-group-info"
title="More info about La Tour Royale"
data-target="panogroup25">
La Tour Royale
</span>
</p>
<p class="pano-thumbnail" style="background-image:url(indexdata/tour_royale_14/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/tour_royale_14/thumbnail.jpg" alt="Tour Royale"></a>
</p>
<h2><a href="#" class="view-pano link-title">Tour Royale</a></h2>
<div class="pano-description html-encode none">Vue panoramique depuis le chemin de ronde.</div>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
</div>
<div class="tab about none">
<p><img src="indexdata/tour_royale_21/thumbnail.jpg" alt="La Tour Royale" class="group-thumbnail"></p>
<h2 class="group-title">La Tour Royale</h2>
<div class="group-description html-encode"><font face="arial, sans-serif">La Tour royale, également nommée Grosse tour, est une tour à <a href="https://fr.wikipedia.org/wiki/Canon_(artillerie)">canons</a> édifiée à <a href="https://fr.wikipedia.org/wiki/Toulon">Toulon</a> à la pointe de Pipady, au début du xvie siècle (<a href="https://fr.wikipedia.org/wiki/1514">1514</a>) à l'initiative de <a href="https://fr.wikipedia.org/wiki/Louis_XII_de_France">Louis XII</a>, afin de protéger la <a href="https://fr.wikipedia.org/wiki/Rade_de_Toulon">rade</a> des intrusions ennemies.</font></div>
</div>
<a href="#" class="next-section" title="Next group"></a>
</div>
</div>
<div class="section" data-id="panogroup26">
<div class="slide" data-id="pano22" data-anchor="pano22">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/cellule_du_fort_malb_22/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/cellule_du_fort_malb_22/thumbnail.jpg" alt="Cellule du fort Malbousquet" class=""></a>
</p>
<h2><a href="#s=pano22" class="view-pano link-title">Cellule du fort Malbousquet</a></h2>
<p class="pano-description html-encode none"><font face="arial, sans-serif">Après le débarquement de Provence et la libération de Toulon, le fort de Malbousquet, dans l'arsenal a abrité bon nombre de prisonniers allemands.&nbsp;Certains d'entre eux étaient de vrais artistes...</font></p>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
<a href="#" class="next-section" title="Next group"></a>
</div>
</div>
<div class="section" data-id="panogroup27">
<div class="slide" data-id="pano23" data-anchor="pano23">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/chapelle_des_peniten_23/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/chapelle_des_peniten_23/thumbnail.jpg" alt="Couvent des Observentins" class=""></a>
</p>
<h2><a href="#s=pano23" class="view-pano link-title">Couvent des Observentins</a></h2>
<p class="pano-description html-encode none"><font face="arial, sans-serif">Les Observantins, moines franciscains, s'établirent à Ollioules, sans doute sous l'influence des seigneurs locaux, vers le milieu du XVIe siècle. Leur chapelle, vendue comme bien national à la Révolution, fut dès lors transformée en habitation. Des vestiges, abside et contreforts, en subsistent à l'arrière, ainsi qu'une partie des bâtiments conventuels où des ornements de gypseries sont encore visibles.</font></p>
<p class="pano-description-short none"></p>
<a href="#" class="toggle-scene-info" title="Full description"><span class="icon icon-more"></span></a>
<a href="#" class="next-section" title="Next group"></a>
</div>
</div>
</div>
<div class="modal group">
<p class="commands"><a href="#" class="close"></a></p>
<div class="text">
<div class="image"></div>
<h2 class="group-title"></h2>
<div class="group-description html-encode"></div>
<p class="author">© Démonstration - Le patrimoine architectural de TPM by <a href="https://www.adeo-web.fr" title="Author website" class="link-author">Une réalisation ADEO-WEB</a></p>
</div>
</div>
</div><!-- ./#tourDIV -->
<!-- Full Page JS - Slimscroll is used when content exceeds the height of its section -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
<script src="js/jquery.fullscreen.min.js"></script>
<script type="text/javascript">
/*
* FUNCTIONS
*/
var startWithAutorotation = '';
var startWithAutotour = '';
var panotourPlayer = null;
function getTourPlayer() {
if ( panotourPlayer == null ) {
panotourPlayer = document.getElementById('krpanoSWFObject');
}return panotourPlayer;
}
//External commands and dynamic elements
function updatePanorama(panoid) {
var groupid = getTourPlayer().get("scene["+panoid+"].group");
var titleid = getTourPlayer().get("scene["+panoid+"].titleid");
var currentSceneThumbnail = jQuery('.slide[data-id='+panoid+'] .pano-thumbnail img').attr('src');
var descriptionid = getTourPlayer().get("scene["+panoid+"].descriptionid");
//If currently viewing scene
if(jQuery('#scene').hasClass('layered-visible')){
//Scene title into the header
jQuery('header').attr('title',ktools.I18N.getInstance().getMessage(titleid));
jQuery('header h1').text(ktools.I18N.getInstance().getMessage(titleid));
//Scene thumbnail
jQuery('header .thumbnail').attr('src', currentSceneThumbnail);
history.pushState('', document.title, window.location.pathname);
//If currently viewing layer fullpage
}else{
insertProjectInfo();
//To show helper only on the first section
if(jQuery('.section.first-section').hasClass('active')){
jQuery('#helper').removeClass('none');
}else{
jQuery('#helper').addClass('none');
}
}
//Always place current group id and pano id into a custom attribute of body tag
jQuery('body').attr('data-groupid',groupid).attr('data-panoid',panoid);
//Update navigation bubbles
jQuery('nav li, nav ul, nav a').removeClass('active');
jQuery('nav a.pano-single[data-target='+panoid+']').addClass('active');
jQuery('nav a.pano-single[data-target='+panoid+']').parent().addClass('active');
jQuery('nav a.pano-in-a-group[data-target='+panoid+']').addClass('active');
jQuery('nav a.pano-in-a-group[data-target='+panoid+']').parent().parent().parent().addClass('active');
autoScrollToActiveThumb(jQuery('nav>ul>li.active').eq(0).index()+1);
//If description is not empty
if (descriptionid != "") {
//If currently viewing scene
if(jQuery('#scene').hasClass('layered-visible')){
var htmlDescription = htmlEncode(ktools.I18N.getInstance().getMessage(descriptionid));
//Strip HTML description and place it on description
htmlDescription = htmlDescription.replace(/<(?:.|\n)*?>/gm, '');
jQuery('header .project-description').html(htmlDescription);
//Remove tweak if no description
jQuery('header h1').removeClass('padded');
}
//console.log('description scene: '+ktools.I18N.getInstance().getMessage(descriptionid));
//If no description
}else{
//If currently viewing layer fullpage
if(jQuery('#scene').hasClass('layered-visible')){
//Remove all text from description
jQuery('header .project-description').text('');
//Tweak for no description padding gap
jQuery('header h1').addClass('padded');
}
}
if (groupid != null) {
var titleid = getTourPlayer().get("panoramagroup["+groupid+"].titleid");
if(jQuery('#scene').hasClass('layered-visible')){
history.pushState('', document.title, '#'+groupid+'/'+panoid);
}
if (titleid != "") {
//HTML tags with class (group-title) will display the group title
var finalTitle = ktools.I18N.getInstance().getMessage(titleid);
//console.log('group title: '+finalTitle);
//If no group,
var mainscene = getTourPlayer().get("panoramagroup["+groupid+"].mainscene");
var descriptionid = getTourPlayer().get("panoramagroup["+groupid+"].descriptionid");
if (descriptionid != "")
{
//If group description
//console.log('description du group: '+ktools.I18N.getInstance().getMessage(descriptionid));
}else{
//If no group description,
//console.log('no group description');
}
}
}else{
//If no group,
//console.log('no group ');
if(jQuery('#scene').hasClass('layered-visible')){
history.pushState('', document.title, '#'+panoid);
}
}
}
//Toggle autorotation on/off
//@cmd (string) 'off'-> stop autorotation 'on'-> resume autorotation
var autorotation = function(cmd){
if(cmd=='off'){
getTourPlayer().call('stopautorotation()');
jQuery('.autorotation').removeClass('on');
}else if(cmd=='on'){
getTourPlayer().call('startautorotation()');
jQuery('.autorotation').addClass('on');
}else{
if(startWithAutorotation || startWithAutotour == 'yes'){
jQuery('.autorotation').removeClass('none').addClass('on');
};
}
}
//Strip all HTML tags
//@html (string) html/text to convert to txt
var strip = function(html){
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
//Replace unwanted characters from a string
//@string
var safeString = function(string){
var str;
str = string.replace(/ /g, '_');
str = str.replace(/é/g, 'e');
str = str.replace(/è/g, 'e');
str = str.replace(/ê/g, 'e');
str = str.replace(/ë/g, 'e');
str = str.replace(/à/g, 'a');
str = str.replace(/î/g, 'i');
str = str.replace(/ï/g, 'i');
str = str.replace(/ô/g, 'o');
str = str.replace(/[&\/\\#+(),$~%.'":*!?<>{}]/g,'_').toLowerCase();
return str;
}
//Build the sections array
var rawGroups;
rawGroups = "panogroup13__||__panogroup17__||__panogroup25__||__pano22__||__pano23__||__";
rawGroups = rawGroups.substring(0, rawGroups.length - 6);
rawGroups = safeString(rawGroups);
var theFinalSections = rawGroups.split("__||__");
//Replace escaped characters to parse HTML
var htmlEncode = function(value){
return String(value)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/ /g, ' ')
.replace(/>/g, '>');
}
//Display the sphere
var displayPano = function(){
jQuery('#fullpage').removeClass('on');
jQuery('#commands').addClass('on');
// jQuery('header').removeClass('none');
$.fn.fullpage.setAllowScrolling(false);
//Make the scene visible
jQuery('#scene').addClass('layered-visible');
//Disable click on header
jQuery('header').removeClass('active');
//Retrieve data from current scene
var currentID = jQuery('body').attr('data-panoid');
var currentTitle = jQuery('.slide[data-id='+currentID+'] .link-title').text();
var currentDescription = jQuery('.slide[data-id='+currentID+'] .pano-description').text();
//Strip HTML from description
currentDescription = currentDescription.replace(/<(?:.|\n)*?>/gm, '');
var currentThumbnailPath = jQuery('.slide[data-id='+currentID+'] .pano-thumbnail img').attr('src');
//Update header info
jQuery('header').attr('title',currentTitle);
jQuery('header h1').text(currentTitle);
//If description longer than 5 characters
if(currentDescription.length>5){
jQuery('header h1').removeClass('padded');
jQuery('header .project-description').text(currentDescription);
//If description shorter than 5 characters
}else{
jQuery('header h1').addClass('padded');
jQuery('header .project-description').text('');
}
//Update thumbnail
jQuery('header .thumbnail').attr('src', currentThumbnailPath);
}
//Display the layer
var displayLayer = function(){
//Retrieve data of the current scene
var theGroupID = jQuery('body').attr('data-groupid');
var thePanoID = jQuery('body').attr('data-panoid');
//This is a single pano
if(theGroupID===undefined){
$.fn.fullpage.silentMoveTo(thePanoID);
//This is a pano in a group
}else{
var theIndex = jQuery('.slide[data-id='+thePanoID+']').index();
$.fn.fullpage.silentMoveTo(theGroupID,theIndex);
}
jQuery('#scene').removeClass('layered-visible');
jQuery('#fullpage').addClass('on');
$.fn.fullpage.setAllowScrolling(true);
insertProjectInfo();
jQuery('header').addClass('active');
jQuery('#commands').removeClass('on');
//Stop autotour to avoid krpano changing automatically scenes independently from the full page layer
if(startWithAutotour=='yes'){
autorotation('off');
}
}
//Insert project info into the header
var insertProjectInfo = function(){
//Scene title
jQuery('header').attr('title','Démonstration - Le patrimoine architectural de TPM');
jQuery('header h1').text('Démonstration - Le patrimoine architectural de TPM');
var projectDescription = '<font face="arial, sans-serif">Découvrez dans cette démonstration quelques images à 360° de la Tour Royale et du fort Balaguier. Ces images ont été réalisé en collaboration avec Audiovisit et TPM dans le cadre de la mise en valeur du patrimoine architecturale de Toulon Provence Méditerranée.</font>';
if(projectDescription.length>5){
var htmlDescription = htmlEncode('<font face="arial, sans-serif">Découvrez dans cette démonstration quelques images à 360° de la Tour Royale et du fort Balaguier. Ces images ont été réalisé en collaboration avec Audiovisit et TPM dans le cadre de la mise en valeur du patrimoine architecturale de Toulon Provence Méditerranée.</font>');
htmlDescription = htmlDescription.replace(/<(?:.|\n)*?>/gm, '');
jQuery('header .project-description').text(htmlDescription);
jQuery('header h1').removeClass('padded');
}else{
jQuery('header .project-description').text('');
jQuery('header h1').addClass('padded');
}
jQuery('header .thumbnail').attr('src', 'indexdata/thumbnail.jpg');
}
//Insert group title, description and thumbnail into the modal
//@id is the group ID. If undefined, project title, description and thumbnail are used
var populateModal = function(id){
var groupTitle,groupDescription,groupImgSrc,authorName,tempImg;
if(id !== undefined){
//If it is a scene ID
if(jQuery('.slide[data-id='+id+']').length>0){
groupTitle = jQuery('.slide[data-id='+id+'] h2 .link-title').text();
groupDescription = jQuery('.slide[data-id='+id+'] .pano-description').eq(0).html();
groupDescription = htmlEncode(groupDescription);
tempImg = jQuery('.slide[data-id='+id+'] .pano-thumbnail img').eq(0);
groupImgSrc = tempImg.attr('src');
//else it is a group id
}else{
groupTitle = jQuery('.section[data-id='+id+'] .slide.active h2.group-title').text();
groupDescription = jQuery('.section[data-id='+id+'] .slide.active .group-description').html();
groupDescription = htmlEncode(groupDescription);
tempImg = jQuery('.section[data-id='+id+'] .slide.active .group-thumbnail').eq(0);
groupImgSrc = tempImg.attr('src');
}
//If undefined id, insert project info
}else{
groupTitle = 'Démonstration - Le patrimoine architectural de TPM';
groupDescription = '<font face="arial, sans-serif">Découvrez dans cette démonstration quelques images à 360° de la Tour Royale et du fort Balaguier. Ces images ont été réalisé en collaboration avec Audiovisit et TPM dans le cadre de la mise en valeur du patrimoine architecturale de Toulon Provence Méditerranée.</font>';
groupImgSrc = 'indexdata/thumbnail.jpg';
}
groupDescription = htmlEncode(groupDescription);
jQuery('.modal.group .image').css({backgroundImage:'url('+groupImgSrc+')'});
jQuery('.modal.group .group-title').text(groupTitle);
jQuery('.modal.group .group-description').html(groupDescription);
jQuery('.modal.group .group-description font').each(function(){
if(jQuery(this).attr('size')=='6'){
jQuery(this).replaceWith('<h1>'+jQuery(this).text()+'</h1>');
}
if(jQuery(this).attr('size')=='4'){
jQuery(this).replaceWith('<h2>'+jQuery(this).text()+'</h2>');
}
if(jQuery(this).attr('size')=='1'){
jQuery(this).replaceWith('<small>'+jQuery(this).text()+'</small>');
}
});
}
//Check all group descriptionand author informations. If empty, hide the "show group info" and author link
var checkGroupDescription = function(){
jQuery('.slide').each(function(){
var id = jQuery(this).closest('.section').attr('data-id');
var content = jQuery(this).find('.group-description').text();
var groupTitle = jQuery(this).find('.group-title').eq(0);
var sceneDescription = jQuery(this).find('.pano-description').eq(0).text();
//strip html tags
var sceneDescriptionStriped = strip(sceneDescription);
jQuery(this).find('.pano-description-short').text(sceneDescriptionStriped);
//Automatically toggle text description/html description according to description length
if(sceneDescriptionStriped.length>34){
jQuery(this).find('.toggle-scene-info, .pano-description-short').removeClass('none');
jQuery(this).find('.pano-description').addClass('none');
}else{
jQuery(this).find('.toggle-scene-info, .pano-description-short').addClass('none');
jQuery(this).find('.pano-description').removeClass('none');
}
if(content==''){
var groupTitleText = groupTitle.text();
groupTitle.text(groupTitleText);
jQuery('nav ul[data-id='+id+'] .toggle-group-info').parent().hide();
}
});
var author = jQuery('.modal .link-author').text();
if(author==''){
jQuery('.modal .author').addClass('none');
}
}
//Open/close modal
//@action can be 'open' or 'close'
var modal = function(action){
if(action == 'open'){
jQuery('.modal').addClass('layered-visible');
$.fn.fullpage.setAllowScrolling(false);
setTimeout(function(){
jQuery('.modal').addClass('opened');
}, 10);
}else if(action == 'close'){
jQuery('.modal').removeClass('opened');
$.fn.fullpage.setAllowScrolling(true);
setTimeout(function(){
jQuery('.modal').removeClass('layered-visible');
}, 500);
}else{
return;
}
}
//Automatically place the active/current scene/group at the middle of the screen
//@index (integer) is the index of the first childs <li> of the nav>ul
var autoScrollToActiveThumb = function(index){
if(index=='undefined'){
index = jQuery('nav>ul>li.active').index();
}
var windowHeight = jQuery(window).height();
var halfWindowHeight = windowHeight/2;
var itemHeight = jQuery('nav ul li:first-child').outerHeight();
var activeItemPosition = itemHeight*index;
var offset = activeItemPosition-halfWindowHeight+itemHeight/2;
if(activeItemPosition>halfWindowHeight){
jQuery('nav').slimscroll({scrollTo:offset+'px'});
}
}
/*
* EXECUTE ONCE DOM READY
*/
jQuery(document).ready(function() {
//Place a css class on the very first section (useful for helper)
jQuery('.section').eq(0).addClass('first-section');
//Full Page
jQuery('#fullpage').fullpage({
fixedElements: '#scene,header,#nav-overlay',
//normalScrollElements: 'nav',
scrollBar: false,
scrollOverflow: true,
autoScrolling: true,
anchors: theFinalSections,
//anchors: ['section1', 'section2', 'section3'],
afterRender: function(){
//Remove loader when fullpage has finished loading
jQuery('#loader').removeClass('opened');
setTimeout(function(){
jQuery('#loader').removeClass('layered-visible');
}, 1050);
if(startWithAutotour=='yes'){
displayPano();
autorotation('on')
}else{
autorotation();
}
},
afterLoad: function(anchorLink, index){
// console.log('after load');
},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
jQuery('.fp-prev, .fp-next, .previous-section, .next-section').addClass('closed');
setTimeout(function(){
//Get data from the current scene
var currentID = jQuery('.section.active .slide.active').attr('data-id');
getTourPlayer().call('mainloadscene('+currentID+')');
}, 550);
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
jQuery('.fp-prev, .fp-next, .previous-section, .next-section').removeClass('closed');
},
onLeave: function(index, nextIndex, direction){
jQuery('#helper').addClass('none');
setTimeout(function(){
//Get data from the current scene
var currentID = jQuery('.section.active .slide.active').attr('data-id');
getTourPlayer().call('mainloadscene('+currentID+')');
}, 550);
}
});
checkGroupDescription();
//When navigation bubbles exceeds viewport height
jQuery('nav').slimscroll({});
jQuery('.modal .group-description').slimscroll({
color: '#aaa',
alwaysVisible: true
});
//Replace escaped characters and parse HTML
jQuery('.html-encode').each(function(){
var RAW_HTML = jQuery(this).html();
var final = htmlEncode(RAW_HTML);
jQuery(this).html(final);
});
//Navigation bubbles: For a scene in a group
jQuery('nav a.pano-in-a-group').on('click', function(e){
e.preventDefault();
var theIndex = jQuery(this).parent().index();
var navIndex = jQuery(this).parent().parent().parent().index();
var theParent = jQuery(this).closest('ul');
var theGroupID = theParent.attr('data-id');
var theAnchor = jQuery(this).attr('data-target');
//If currently viewing the scene
if(jQuery('#scene').hasClass('layered-visible')){
getTourPlayer().call('mainloadscene('+theAnchor+')');
//If currently viewing the layer fullpage
}else{
$.fn.fullpage.silentMoveTo(theGroupID, theIndex);
}
});
//Navigation bubbles: For a single scene (not in a group)
jQuery('nav a.pano-single').on('click', function(e){
e.preventDefault();
var theIndex = jQuery(this).parent().index();
var theAnchor = jQuery(this).attr('data-target');
//If currently viewing the scene
if(jQuery('#scene').hasClass('layered-visible')){
getTourPlayer().call('mainloadscene('+theAnchor+')');
//If currently viewing the layer fullpage
}else{
$.fn.fullpage.silentMoveTo(theAnchor, theIndex);
}
});
//Display modal group info
jQuery('.toggle-group-info').on('click', function(e){
e.preventDefault();
var theTargetID = jQuery(this).attr('data-target');
// var theTargetID = jQuery('.section.active').attr('data-id');
populateModal(theTargetID);
if(jQuery('.modal .group-title').text()!==''){
modal('open');
}else {
return false;
}
});
//Display scene info
jQuery('.toggle-scene-info').on('click', function(e){
e.preventDefault();
// var theTargetID = jQuery(this).attr('data-target');
var theTargetID = jQuery(this).closest('.slide').attr('data-id');
populateModal(theTargetID);
modal('open');
});
//View pano
jQuery('.view-pano').on('click', function(e){
e.preventDefault();
displayPano();
});
//View layer
jQuery('#commands a.view-layer').on('click', function(e){
e.preventDefault();
displayLayer();
});
//next scene
jQuery('#commands a.next').on('click', function(e){
e.preventDefault();
getTourPlayer().call('loadNextScene()');
});
//previous scene
jQuery('#commands a.previous').on('click', function(e){
e.preventDefault();
getTourPlayer().call('loadPreviousScene()');
});
//Go to previous section
jQuery('.previous-section').on('click', function(e){
e.preventDefault();
$.fn.fullpage.moveSectionUp();
});
//Go to next section
jQuery('.next-section').on('click', function(e){
e.preventDefault();
$.fn.fullpage.moveSectionDown();
});
//Click to display project properties only when on displayLayer mode
jQuery('header').on('click', function(){
//If currently viewing scene
if(jQuery('#scene').hasClass('layered-visible')){
displayLayer();
//If currently viewing the layer fullpage
}else{
populateModal();
modal('open');
}
});
//Remove the next section button on the last section
jQuery('.section').eq(jQuery('.section').length - 1).find('a.next-section').hide();
//Remove the previous section button on the first section
jQuery('.section').eq(0).find('a.previous-section').hide();
//Add tooltips on previous and next arrows
jQuery('.fp-controlArrow.fp-next').attr('title', 'Next scene');
jQuery('.fp-controlArrow.fp-prev').attr('title', 'Previous scene');
//Display project info modal
// jQuery('header').on('click', function(){
// populateModal();
// modal('open');
// });
//Close modal command
jQuery('.modal .commands .close').on('click', function(e){
e.preventDefault();
modal('close');
});
//Toggle autorotation
jQuery('a.autorotation').on('click', function(e){
e.preventDefault();
if(jQuery(this).hasClass('on')){
autorotation('off');
//getTourPlayer().call('stopautorotation()');
//jQuery(this).removeClass('on');
}else{
if(startWithAutotour=='yes'){
autorotation('on');
displayPano();
}else{
autorotation('on');
}
//getTourPlayer().call('startautorotation()');
//jQuery(this).addClass('on');
}
});
//Enter/exit fullscreen
jQuery('a.fullscreen').on('click', function(e){
e.preventDefault();
if(jQuery(this).hasClass('enter')){
// requestFullScreen();
jQuery('body').fullscreen();
jQuery(this).removeClass('enter').addClass('exit');
}else{
// requestFullScreen('exit');
$.fullscreen.exit();
jQuery(this).removeClass('exit').addClass('enter');
}
});
});
jQuery(window).load(function(){
});
</script>
</body>
<!-- Bubbles Template 2015/12 -->
</html>