wildcircus/wildFire.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
<?php
$current = 'act';
require 'inc/header.php';
?>
		<div class="container">
			<h1 class="container_shadow">Wild fire</h1>
			<h3 class="container_shadow">Fire performance</h3>
			<div class="act_nav"><ul><li class="credits_button">Credits</li></ul></div><br>
            <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/wild_fire/wild_fire_image1.jpg" />
				    <img id="image2" src="gallery/wild_fire/wild_fire_image2.jpg" />
				    <img id="image3" src="gallery/wild_fire/wild_fire_image3.jpg" />
				    <img id="image4" src="gallery/wild_fire/wild_fire_image4.jpg" />
				    <img id="image5" src="gallery/wild_fire/wild_fire_image5.jpg" />
				</div>
			</div>
			<p class="act_info">
			Five performers on the stage:<br />
			- In the foreground, a fire devil stick launched over seven meters high.<br />
			- On the sides, two fire pois are dancing and roaring.<br />
			- In the background, two jugglers make passings  with six, seven and then eight fire torches.<br />
			<br />
			Fire fill the space, flames and sparkling sheaves twinkle and twirl around on upbeat music.
			</p>
			<div class="hide_show_act_infos">Toggle <img src="pictures/desc.png" alt=""> infos</div>
		</div>

		<div class='credits'>
		  <div class='act'>Fire performance</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();
			});
		  });

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