wildcircus/extremites.php at master · IbanGF/wildcircus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<?php
$current = 'act';
require 'inc/header.php';
?>
		<div class="container">
			<h1 class="container_shadow">Extrêmités</h1>
			<h3 class="container_shadow">Balancing act</h3>
			<div class="act_nav"><ul><li class="credits_button">Credits</li><li class="gallery_button">Gallery</li></ul></div><br>
            <div class="js-lazyYT" data-youtube-id="C43_O-lVxVg" data-ratio="16:9" data-parameters="rel=0"></div>
            <div class="gallery">
				<div id="slider">
				    <a href="#image1">1</a>
				    <a href="#image2">2</a>
				    <a href="#image3">3</a>
				    <a href="#image4">4</a>
				    <a href="#image5">5</a>
				</div>
				<div id="images">
				    <img id="image1" src="gallery/extremites/extremites_image1.jpg" />
				    <img id="image2" src="gallery/extremites/extremites_image2.jpg" />
				    <img id="image3" src="gallery/extremites/extremites_image3.jpg" />
				    <img id="image4" src="gallery/extremites/extremites_image4.jpg" />
				    <img id="image5" src="gallery/extremites/extremites_image5.jpg" />
				</div>
			</div>
			<p class="act_info">
			Precariously balanced on a ash plank, placed itself on two stacked gas bottle.<br />
			The issue is quite clear: try to create human equilibrium on objects governed by the law of gravity and that,
			the artists are forced to somehow tame it for the survival of their heads.<br />
			Of this physical challenge was born the idea to tell a humanistic story where individuals depend obligatorily on other
			people and where only solidarity and listening to others, promise the survival of the group.
			</p>
			<div class="hide_show_act_infos">Toggle <img src="pictures/desc.png" alt=""> infos</div>
		</div>

		<div class='credits'>
		  <div class='act'>Extrémités</div>
		  <div class='performance'>Acrobat</div>
		  <div class='performer'>Yann Ecauvre</div>
		  <div class='performance'>Acrobat</div>
		  <div class='performer'>Rémi Lecocq</div>
		  <div class='performance'>Acrobat</div>
		  <div class='performer'>Sylvain Briani-Colin</div>
		  <div class='performance'>Scenography</div>
		  <div class='performer'>Julien Michenaud</div>
		  <div class='performance'>Scenography</div>
		  <div class='performer'>Sébastien Hérouart</div>
		  <div class='performance'>Scenography</div>
		  <div class='performer'>Michel Ferandon</div>
		  <div class='performance'>Light Creation</div>
		  <div class='performer'>Sébastien Hérouart</div>
		  <div class='performance'>production</div>
		  <div class='performer'>Sébastien Hérouart</div>
		  <div class='performance'>production</div>
		  <div class='performer'>Jack Verdier</div>
		  <div class='performance'>production</div>
		  <div class='performer'>Julien Michenaud</div>
		</div>

	</div>

	<footer></footer>
	<script>
		function whichAnimationEvent(){
		  var t, el = document.createElement("fakeelement");

		  var animations = {
		    "animation"      : "animationend",
		    "OAnimation"     : "oAnimationEnd",
		    "MozAnimation"   : "animationend",
		    "WebkitAnimation": "webkitAnimationEnd"
		  }

		  for (t in animations){
		    if (el.style[t] !== undefined){
		      return animations[t];
		    }
		  }
		}


		$(document).ready(function(){

	      $("div.rideau_gauche").toggleClass('rideau_gauche_extends');
	      $("div.rideau_droit").toggleClass('rideau_droit_extends');
	      $("div.rideau_gauche,div.rideau_droit").on("click", function(){
			$("div.rideau_gauche").toggleClass('rideau_gauche_extends');
			$("div.rideau_droit").toggleClass('rideau_droit_extends');
		  });


		  $("div.container p.act_info").hide();
		  $("div.hide_show_act_infos").click(function(){
			if ($(this).find('img').attr("src") == "pictures/asc.png")
			{
			  $(this).find('img').attr("src","pictures/desc.png");
			  $("div.container p.act_info").slideUp();
			}
			else
			{
			  $(this).find('img').attr("src","pictures/asc.png");
			  $("div.container p.act_info").slideDown();
			}
		  });

		  $('div.credits').hide();
	      $("li.credits_button").on("click", function(){
	      	$('div.container').hide();
	      	$('div.credits').show();
			var animationEvent = whichAnimationEvent();
			$('div.credits').one(animationEvent, function(event) {
		      $('div.credits').hide();
		      $('div.container').slideDown();
			});
		  });


		  $("div.gallery").hide();
	      $("li.gallery_button").on("click", function(){
	      	$('div.js-lazyYT').hide();
	      	$('div.gallery').show();
	      	$(this).text("Trailer");
	        $(this).on("click", function(){
	      		$(this).text("Gallery");
		      	$('div.gallery').hide();
		      	$('div.js-lazyYT').show();
	        });
		  });

		});
	</script>
	<script>LazyYT.init(".js-lazyYT");</script>
	</body>
</html>