Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

edited texts and amplification page with draggable photos

Browse Source
master
Angeliki 5 years ago
parent 3df7c443b2
commit f9efbfd9f3
13 changed files with 36 additions and 157 deletions
Show Stats Download Patch File Download Diff File

21
amplification.html
Unescape Escape View File

@ -48,6 +48,15 @@
</div>
<!-- div extracts -->
<div>
<div class="draggable ui-draggable-handle" style="top: 1300px; left: 900px; line-height: 0 !important;"><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a></div>
<div class="draggable ui-draggable-handle" style="top: 1400px; left: 1000px; line-height: 0 !important;"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
@ -76,18 +85,18 @@
<div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
<div id="img">
<!-- <div id="img">
<table style="margin-top:1181px !important; margin-left: 10% !important; padding: 20px;box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5); background-color: #E4E1E1;">
<tr>
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="600px" /></a>
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a>
</td>
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a>
<td><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a>
</td>
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a>
<td><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a>
</td>
</tr>
</table>
</div>
</div> -->
<!-- draggable menu-->
@ -110,7 +119,7 @@
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
</div>
<div class="draggable" style="top: 900px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<!-- end draggable -->

BIN
audio/distort_leeszaal_20190523-1336.mp3
View File

Binary file not shown.

BIN
audio/distort_leeszaal_20190523-1336.wav
View File

Binary file not shown.

BIN
audio/distort_leeszaal_20190523-1341.mp3
View File

Binary file not shown.

BIN
audio/distort_leeszaal_20190523-1341.wav
View File

Binary file not shown.

BIN
images/meeting-20190328-leeszaal-1.JPG
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 MiB

After

Width:  |  Height:  |  Size: 5.4 MiB

BIN
images/meeting-20190329-finearts-2.JPG
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 MiB

After

Width:  |  Height:  |  Size: 9.7 MiB

154
player.html
Unescape Escape View File

@ -12,24 +12,22 @@
<!-- draggable youtube links and other -->
<!-- sources -->
<div id="show1" class="draggable"><iframe width="500px" height="400px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500px" height="400px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show2" class="draggable"><iframe width="500" height="400" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show2" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500" height="400" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show3" class="draggable"><iframe width="500" height="400" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show4" class="draggable"><iframe width="500" height="400" src="https://www.thisamericanlife.org/667/wartime-radio" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show5" class="draggable"><iframe width="500" height="400" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show3" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500" height="400" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show4" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500" height="400" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- links -->
<div class="draggable" style="width: 500px !important">
<div class="draggable" id="box_metadata" style="width: 500px !important">
<li id="angela">
<a href="#" >Angela Davis @Occupy Wall Street</a>
</li>
<li id="judith">
<a href="#" >Judith Butler @Occupy Wall Street</a>
</li>
@ -39,7 +37,7 @@
</li>
<li id="dana">
<a href="#" >Ballout, D. (2019) ‘Good Morning, Kafranbel’, This American Life: Wartime Radio</a>
<a href="https://www.thisamericanlife.org/667/wartime-radio" target="_blank" >Ballout, D. (2019) ‘Good Morning, Kafranbel’, This American Life: Wartime Radio</a>
</li>
<li id="katalin">
@ -62,15 +60,12 @@ $("#laurie").click(function(){
$("#show3").fadeIn()
console.log("around")
});
$("#dana").click(function(){
$("#show4").fadeIn()
console.log("around")
});
$("#katalin").click(function(){
$("#show5").fadeIn()
$("#show4").fadeIn()
console.log("around")
});
</script>
@ -140,7 +135,7 @@ $("#katalin").click(function(){
<div class="tooltip-wrap" style="position:absolute; top:65%; left:63%;">
<audio controls src="audio/distort_leeszaal_20190523-1336.wav" type="audio/wav"></audio>singing vowels-distorted voice @Leeszaal
<audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio>singing vowels-distorted voice @Leeszaal
<div class="tooltip-content-up">
<table>
<tr>
@ -153,7 +148,7 @@ $("#katalin").click(function(){
<div style="position:absolute; top:70%; left:53%;">
<audio controls src="audio/distort_leeszaal_20190523-1341.wav" type="audio/wav"></audio>personal experiences-distorted voice @Leeszaal
<audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio>personal experiences-distorted voice @Leeszaal
</div>
<div style="position:absolute; top:57%; left:33%;;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
@ -411,132 +406,7 @@ Oh, I hear children in the background crying</div>
<section>
<div style="position:absolute; top:15%; left:41%;">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
</div>
<div class="tooltip-wrap" style="position:absolute; top:12%; left:51%;">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px">
</div>
<!-- <div class="column"><img src="images/meeting-20190328-leeszaal-5.JPG" width="500px">
</div> -->
</div>
</div>
</div>
<div style="position:absolute; top:20%; left:63%;">
<audio controls src="audio/description-alex2.mp3"></audio>describing/annotating
</div>
<div class="tooltip-wrap" style="position:absolute; top:30%; left:70%;">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-1.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:42%; left:75%;">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/meeting-20190328-leeszaal-1.JPG" width="500px" />
</div>
</div>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:55%; left:69%;">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" />
</div>
</div>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:65%; left:63%;">
<audio controls src=""></audio>
<div class="tooltip-content-up">
<table>
<tr>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:70%; left:53%;">
<audio controls src=""></audio>
</div>
<div style="position:absolute; top:57%; left:33%;;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
</div>
<div style="position:absolute; top:33%; left:26%;;">
<audio controls src=""></audio>
</div>
<div class="tooltip-wrap" style="position:absolute; top:46%; left:28%;">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal
<div class="tooltip-content-up">
<table>
<tr>
<td><img src="images/meeting-20190328-leeszaal-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:66%; left:41%;;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts
</div>
<div class="tooltip-wrap" style="position:absolute; top:23%; left:32%;">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:27%; left:29%;">
<audio controls src="audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/carson-extract.jpg" width="500px" />
</td>
<td><img src="images/fresh1.jpg" width="500px" />
</td>
<td><img src="images/fresh2.jpg" width="500px" />
</td>
</tr>
</table>
</div>
</div>
</section>
<!-- draggable menu-->
@ -561,7 +431,7 @@ Oh, I hear children in the background crying</div>
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
</div>
<div class="draggable" style="top: 600px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div>

6
podcast1.php
Unescape Escape View File

@ -21,7 +21,7 @@
<br><br>
<h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
"Mediating speech"
"Mediating Speech"
</h3>
<!-- draggable menu-->
@ -36,12 +36,12 @@
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
<h2 ><a href="index.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.
<div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> Podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i>
</div>
</div>

2
podcast2.php
Unescape Escape View File

@ -36,7 +36,7 @@
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
<h2 ><a href="index.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">

2
podcast3.php
Unescape Escape View File

@ -36,7 +36,7 @@
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
<h2 ><a href="index.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">

2
podcast4.php
Unescape Escape View File

@ -36,7 +36,7 @@
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
<h2 ><a href="index.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">

6
styles/stylesheet.css
Unescape Escape View File

@ -463,7 +463,7 @@ cursor: pointer;
/* Style the close button */
.topleft {
float: left;
float: right;
cursor: pointer;
font-size: 28px;
}
@ -502,7 +502,7 @@ cursor: pointer;
}
#show {
#show1,#show2,#show3,#show4 {
display: none;
left: 20%;
width: 550px !important;
@ -525,7 +525,7 @@ cursor: pointer;
list-style: outside none none !important;
}
#dashed {
#dashed,#angela,#judith,#laurie,#dana,#katalin {
border-bottom: 1px dashed
}

Write Preview
Loading…
Cancel
Save