| 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/aerien-iles-or/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Les Îles d'Or</title>
<meta name="keywords" content="Les Îles d'Or" />
<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 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"
,xml:"indexdata/index.xml"
,target:"panoDIV"
,passQueryParameters:true
,bgcolor:"#000000"
,focus: false
,html5:isBot ? "always" : "only"
});
}
//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>
You must activate javascript to visualize the Virtual Tour : Les Îles d'Or.
</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>
<a href="#"
class="pano-single"
data-target="pano17"
title="Vue aérienne entre Hyères et Porquerolles">
<img src="indexdata/vue_aerienne_entre_h_17/thumbnail.jpg" alt="Vue aérienne entre Hyères et Porquerolles">
</a>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano62"
title="Giens">
<img src="indexdata/giens_62/thumbnail.jpg" alt="Giens">
</a>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano67"
title="Fond Sous-marin - Les amphores">
<img src="indexdata/fond_sous_marin___le_67/thumbnail.jpg" alt="Fond Sous-marin - Les amphores">
</a>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano69"
title="La Londe - Plage de l'Argentière">
<img src="indexdata/la_londe___plage_de__69/thumbnail.jpg" alt="La Londe - Plage de l'Argentière">
</a>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano107"
title="La Londe - Plage de Miramar">
<img src="indexdata/la_londe___plage_de__107/thumbnail.jpg" alt="La Londe - Plage de Miramar">
</a>
</li>
<li>
<a href="#"
class="pano-single"
data-target="pano152"
title="Porquerolles depuis le fort Sainte-Agathe">
<img src="indexdata/porquerolles_depuis__152/thumbnail.jpg" alt="Porquerolles depuis le fort Sainte-Agathe">
</a>
</li>
</ul>
</nav>
<div id="fullpage" class="on">
<header class="active" title="Les Îles d'Or">
<p>
<img src="indexdata/thumbnail.jpg" alt="Les Îles d'Or" class="thumbnail">
<span class="icon icon-info"></span>
<!-- <img src="img/info.svg" alt="info" class="info"> -->
</p>
<h1>Les Îles d'Or</h1>
<p class="project-description html-encode"></p>
<span class="icon icon-info"></span>
</header>
<div class="section" data-id="panogroup18">
<div class="slide" data-id="pano17" data-anchor="pano17">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/vue_aerienne_entre_h_17/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/vue_aerienne_entre_h_17/thumbnail.jpg" alt="Vue aérienne entre Hyères et Porquerolles" class=""></a>
</p>
<h2><a href="#s=pano17" class="view-pano link-title">Vue aérienne entre Hyères et Porquerolles</a></h2>
<p class="pano-description html-encode none"></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="panogroup63">
<div class="slide" data-id="pano62" data-anchor="pano62">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/giens_62/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/giens_62/thumbnail.jpg" alt="Giens" class=""></a>
</p>
<h2><a href="#s=pano62" class="view-pano link-title">Giens</a></h2>
<p class="pano-description html-encode none"></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="panogroup68">
<div class="slide" data-id="pano67" data-anchor="pano67">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/fond_sous_marin___le_67/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/fond_sous_marin___le_67/thumbnail.jpg" alt="Fond Sous-marin - Les amphores" class=""></a>
</p>
<h2><a href="#s=pano67" class="view-pano link-title">Fond Sous-marin - Les amphores</a></h2>
<p class="pano-description html-encode none"></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="panogroup71">
<div class="slide" data-id="pano69" data-anchor="pano69">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/la_londe___plage_de__69/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/la_londe___plage_de__69/thumbnail.jpg" alt="La Londe - Plage de l'Argentière" class=""></a>
</p>
<h2><a href="#s=pano69" class="view-pano link-title">La Londe - Plage de l'Argentière</a></h2>
<p class="pano-description html-encode none"></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="panogroup108">
<div class="slide" data-id="pano107" data-anchor="pano107">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/la_londe___plage_de__107/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/la_londe___plage_de__107/thumbnail.jpg" alt="La Londe - Plage de Miramar" class=""></a>
</p>
<h2><a href="#s=pano107" class="view-pano link-title">La Londe - Plage de Miramar</a></h2>
<p class="pano-description html-encode none"></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="panogroup153">
<div class="slide" data-id="pano152" data-anchor="pano152">
<a href="#" class="previous-section" title="Previous group"></a>
<p class="pano-thumbnail" style="background-image:url(indexdata/porquerolles_depuis__152/thumbnail.jpg)">
<a href="#" class="view-pano"><img src="indexdata/porquerolles_depuis__152/thumbnail.jpg" alt="Porquerolles depuis le fort Sainte-Agathe" class=""></a>
</p>
<h2><a href="#s=pano152" class="view-pano link-title">Porquerolles depuis le fort Sainte-Agathe</a></h2>
<p class="pano-description html-encode none"></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">© Les Îles d'Or 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 = 'yes';
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 = "pano17__||__pano62__||__pano67__||__pano69__||__pano107__||__pano152__||__";
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','Les Îles d'Or');
jQuery('header h1').text('Les Îles d'Or');
var projectDescription = '';
if(projectDescription.length>5){
var htmlDescription = htmlEncode('');
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 = 'Les Îles d'Or';
groupDescription = '';
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>