Difference between revisions of "Team:CIEI-BJ/VirtualTour"

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>
−
<meta charset="UTF-8">
 
−
<title>Untitled Document</title>
 
−
</head>
 
−
 
 
<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

Template

Top

 

CIEI-BJ Virtual Tour