Line 1: | Line 1: | ||
{{CIEI-BJ}} | {{CIEI-BJ}} | ||
− | <html> | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
<head> | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
+ | <title>CIEI-BJ Virtual Tour</title> | ||
+ | <link rel="stylesheet" type="text/css" href="css/normalize.css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> | ||
+ | <link rel="stylesheet" type="text/css" href="css/style.css"> | ||
+ | |||
+ | </head> | ||
<style> | <style> | ||
#mainNav{ | #mainNav{ | ||
Line 8: | Line 17: | ||
#eu-cookie-law{ | #eu-cookie-law{ | ||
display:none; | display:none; | ||
+ | |||
} | } | ||
</style> | </style> | ||
− | |||
− | |||
− | |||
− | |||
<body> | <body> | ||
+ | <div class="htmleaf-container"> | ||
+ | <div class="htmleaf-content"> | ||
+ | <div class="slider one"> | ||
+ | <header class="htmleaf-header"> | ||
+ | |||
+ | |||
+ | </header> | ||
+ | </div> | ||
+ | <div class="slider two"> | ||
+ | <img src="img/atacertaintime.png"> | ||
+ | </div> | ||
+ | <div class="slider five"> | ||
+ | <img src="img/franziska.png"> | ||
+ | </div> | ||
+ | <div class="slider three"> | ||
+ | <img src="img/franziska.png"> | ||
+ | </div> | ||
+ | <div class="slider four"></div> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="previous" version="1.1" viewBox="0 0 32 32" xml:space="preserve"> | ||
+ | <path d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194 L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587 C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z" fill="#FFFFFF"/> | ||
+ | </svg> | ||
+ | |||
+ | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="next" version="1.1" viewBox="0 0 32 32" xml:space="preserve"> | ||
+ | <path d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194 L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587 c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z" fill="#FFFFFF"/> | ||
+ | </svg> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | var timer = 0; | ||
+ | var elementCount = 0; | ||
+ | var firstPos = 0; | ||
+ | var lastPos = 0; | ||
+ | |||
+ | $(function() { | ||
+ | initialiseSlider(); | ||
+ | $("#next").click(function() { | ||
+ | slideRight(); | ||
+ | }); | ||
+ | |||
+ | $("#previous").click(function() { | ||
+ | slideLeft(); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | function initialiseSlider() { | ||
+ | $("div.slider").each(function(value) { | ||
+ | elementCount += 1; | ||
+ | var position = -100 * value; | ||
+ | $(this).css("left", position + "%"); | ||
+ | }); | ||
+ | |||
+ | if (elementCount === 1) | ||
+ | $("#next").hide(); | ||
+ | } | ||
+ | |||
+ | function slideRight() { | ||
+ | $("div.slider").each(function(value) { | ||
+ | $(this).addClass("zoomout"); | ||
+ | var position = parseInt($(this)[0].style.left) + 100; | ||
+ | |||
+ | if (value === 0) | ||
+ | firstPos = position; | ||
+ | |||
+ | $(this).css("left", position + "%"); | ||
+ | timer = setTimeout(removeZoom, 1000); | ||
+ | }); | ||
+ | |||
+ | console.log(firstPos); | ||
+ | |||
+ | if (firstPos !== ((elementCount - 1) * 100)) { | ||
+ | $("#next").show(); | ||
+ | $("#previous").show(); | ||
+ | } else | ||
+ | $("#next").hide(); | ||
+ | } | ||
+ | |||
+ | function slideLeft() { | ||
+ | $("div.slider").each(function(value) { | ||
+ | $(this).addClass("zoomout"); | ||
+ | var position = parseInt($(this)[0].style.left) - 100; | ||
+ | |||
+ | if (value === (elementCount - 1)) | ||
+ | lastPos = position; | ||
+ | |||
+ | $(this).css("left", position + "%"); | ||
+ | timer = setTimeout(removeZoom, 1000); | ||
+ | }); | ||
+ | |||
+ | console.log(lastPos); | ||
+ | |||
+ | if (lastPos !== ((elementCount - 1) * -100)) { | ||
+ | $("#previous").show(); | ||
+ | $("#next").show(); | ||
+ | } else | ||
+ | $("#previous").hide(); | ||
+ | } | ||
+ | |||
+ | function removeZoom() { | ||
+ | $("div.slider").each(function() { | ||
+ | $(this).removeClass("zoomout"); | ||
+ | }); | ||
+ | } | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 15:46, 10 October 2016