Edit

Editing: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title></title>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>

"
"

var deviceReady = false;
var initCalled = false ;
var initialized = false;

function onDeviceReady()
{
	deviceReady = true ;
	if(initCalled === true)
		initializeCP();
}

function initializeCP()
{
	if(initialized)
		return;
	initCalled = true ;
	if(cp.pg && deviceReady === false)
		return;

function cpInit()
	{
		document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' >	<div id='main_container' style='top:0px;position:absolute;width:100%;height:100%;'>	<div id='projectBorder' style='top:0px;left:0px;width:100%;height:100%;position:absolute;display:block'></div>	<div class='shadow' id='project_container' style='left: 0px; top:0px;width:100%;height:100%;position:absolute;overflow:hidden;' >	<div id='project' class='cp-movie' style='width:100% ;height:100%;overflow:hidden;'>		<div id='project_main' class='cp-timeline cp-main'>			<div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:100% ;height:100% ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div>			<canvas id='slide_transition_canvas'></canvas>		</div>		<div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'>			<img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/>			<div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div>		</div>		<div id='cc' style='left:0px; position:absolute;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'>			<div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'>			<p style='margin-left:8px;margin-right:8px;margin-top:2px;'>			</p>			</div>			<div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:10px; position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'>			</div>		</div>	</div>	<div id='toc' style='left:0px;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'>	</div>	<div id='playbar' style='bottom:0px; position:fixed'>	</div>	<div id='gestureIcon' class='gestureIcon'>	</div>	<div id='gestureHint' class='gestureHintDiv'>		<div id='gImage' class='gesturesHint'></div>	</div>	<div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div>	<div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div>	</div>	</div></div><div id='lightBoxBackgroundDiv' style='left: 0px; top:0px;position:fixed;z-index:100;width:100%;height:100%;display:none;overflow:auto;background: rgba(0, 0, 0, .9)' onclick='cp.hideLightBox()'>	<div id='lightBoxDiv' style='width:100%;height:100%;opacity:1;overflowY:scroll'>	</div></div><div id='imageStackBackgroundDiv' class='imageStack' style='left: 0px; top:0px; position:absolute;z-index:100;width:100%;height:100%;display:none;flex-direction:row;justify-content:space-between;align-items:stretch;background: rgba(200, 200, 200, .9)'>	<div id='prevImageDiv' class='imageStack' style='width:5%;height:100%;opacity:1;flex: 0 0 40px; align-self: stretch; order: 1;background:url(./assets/playbar/PlaybarIcons/Backward.png) no-repeat center;' onClick='cp.previousImageStackImage()' onmouseover='this.style.background=\'rgba(0, 0, 0, .4)\' onmouseout='this.style.background=\'rgba(200, 200, 200, .9)\'>	</div>	<div id='mainImageDiv' class='imageStack' style='width:90%;height:auto;opacity:1;flex: 1 1 auto; align-self: stretch; order: 2;'>	</div>	<div id='nextImageDiv' class='imageStack' style='width:5%;height:100%;opacity:1;flex: 0 0 40px; align-self: stretch; order: 3;background:url(./assets/playbar/PlaybarIcons/Forward.png) no-repeat center' onClick='cp.nextImageStackImage()' onmouseover='this.style.background=\'rgba(0, 0, 0, .4)\' onmouseout='this.style.background=\'rgba(200, 200, 200, .9)\''>	</div>	<div id='imageThumbnails' class='imageStack' style='width:auto;height:auto;opacity:1;display:none'>	</div>	<a class='boxclose' id='boxclose' style='position:absolute;right:0px;float:right;width:26px; height:26px;background:transparent url(http://tympanus.net/Tutorials/CSSOverlay/images/cancel.png) repeat top left;margin-top:30px;margin-right:30px;cursor:pointer;' onClick='cp.hideImageStack()'></a></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'>	<table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'>		<tr style='width:100%;height:100%;text-align:center;vertical-align:middle'>			<td style='width:100%;height:100%;text-align:center;vertical-align:middle'>				<image id='preloaderImage'></image>				<div id='loadingString' class='loadingString'>Loading...</div>			</td>		</tr>	</table></div> <div id='initialLoading'></div>";
		cp.DoCPInit();
		var lCpExit = window["DoCPExit"];
		window["DoCPExit"] = function()
		{
			if(cp.UnloadActivties)
				cp.UnloadActivties();
			lCpExit();
		};

if( window.CPYTAPINeeded )
		{
		  var tag = document.createElement('script');
		  tag.src = "https://www.youtube.com/iframe_api";
		  document.getElementsByTagName('head')[0].appendChild(tag);
		}

if( window.CPVimeoAPINeeded )
		{
		  var tag = document.createElement('script');
		  tag.src = "https://player.vimeo.com/api/player.js";
		  document.getElementsByTagName('head')[0].appendChild(tag);
		}		
	}
	
	cpInit();
	initialized = true;
	if(isLivePreview() === true)
	{	
		cp.previewFolder = window.location.href.split("\/")[4];
		setInterval(isLivePreviewDirty, 1000);
	}
}

</script>

</head>
<body onload="onBodyLoad()">
		<div id='initialLoading'></div>
<script>
		(function()
		{
			if(document.documentMode < 9)
			{
				document.body.innerHTML = "";
				document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.<br>To change the Document Mode, press F12, click Document Mode: <current mode>, and then select Internet Explorer 9 Standards.");
				return;
			}
			window.addEventListener("load",function() 
			{
				setTimeout(function() 
				{					
					var script = document.createElement('script');
					script.type = 'text/javascript';
					script.src = 'assets/js/CPXHRLoader.js';
					script.defer = 'defer';
					script.onload = function()
					{
						var lCSSLoaded = false;
						var lJSLoaded = false;
						function constructDIVs()
						{
							if(lCSSLoaded && lJSLoaded)
							{
								initializeCP();
							}
						}
						cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {
							lCSSLoaded = true;
							constructDIVs();
						});
						var lJSFiles = [  'assets/js/jquery-3.3.1.min.js','assets/js/CPM.js' ];
						cpXHRJSLoader.js(lJSFiles,function()
						{
							//console.log("js loaded");

var imagesJSONFiles = [ 'dr/imgmd.json' ];
							cpXHRJSLoader.loadImagesJSON(imagesJSONFiles,function(imageToJSONPathMap){
								cp.imageToJSONPathMap = imageToJSONPathMap;
								var imageJSONFiles = [ 'dr/img1.json','dr/img2.json' ];
								if(window.location.protocol.substr(0,4) == "file")
									cpXHRJSLoader.preloadURLs(imageJSONFiles, constructDIVs);
								lJSLoaded = true;
								if(window.location.protocol.substr(0,4) != "file" || !imageJSONFiles.length)
									constructDIVs();
							});
						});
					}
					document.getElementsByTagName('head')[0].appendChild(script);
				},1);
			},false);
		})();
		
</script>
<noscript style="text-align:center;font-size:24px;">Enable Javascript support in the browser.</noscript>
</body>
</html>

Back