XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity

background images from Category:Special Issue 5

Browse Source
master
Castro0o 7 years ago
parent 6b2993c369
commit 1dbbae015c
4 changed files with 220 additions and 137 deletions
Show Stats Download Patch File Download Diff File

55
05/images-mwapi.js
Unescape Escape View File

@ -0,0 +1,55 @@
function getRandom(max) {
var o = Math.round((Math.random())*max);
return o;
}
function place_imgs(window_size){
$.ajax({
dataType: 'jsonp',
url : 'https://pzwiki.wdka.nl/mw-mediadesign/api.php?format=json&action=query&generator=categorymembers&gcmtype=file&gcmtitle=Category:Special%20Issue%205&prop=imageinfo&iiprop=url&iiurlheight=150',
success : function(json) {
var pages=json.query.pages;
for (key in pages){
var img_url = pages[key].imageinfo[0].thumburl;
var img_w = pages[key].imageinfo[0].thumbwidth;
var img_h = pages[key].imageinfo[0].thumbheight;
var img_max_left = window_size.w;// - img_w;
var img_max_top = window_size.h;// - img_h;
var img_pos_left = ( getRandom(img_max_left).toString() )+"px";
var img_pos_top = ( getRandom(img_max_top).toString() )+"px";
var img_el = jQuery('<img />',{ src: img_url, class:'background'} );
$('div.background').append(img_el[0]);
img_el.css('left',img_pos_left,'!important')
.css('top',img_pos_top,'!important')
.css('z-index', (getRandom(pages.length)).toString() ,'!important')
.css('display','block');
console.log(img_el, pages.length);
// console.log(img, img_w, img_h);
// $('div.background').append(img);
}
}
})
}
$(document).ready(
function(){
var wh = {w: ($(window).width()), h: ($(window).height())} ;
place_imgs(wh);
}
)
$(window).on('resize', function(){
var wh = {w: ($(window).width()), h: ($(window).height())} ;
place_imgs(wh);
});

80
05/index.html
Unescape Escape View File

@ -2,80 +2,16 @@
<html> <html>
<head> <head>
<title>Special Issue 5: OuNuPo</title> <title>Special Issue 5: OuNuPo</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="images-mwapi.js"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
@font-face {
font-family: 'NotCourierSans';
src: url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), url('fonts/NotCourierSans.woff') format('woff'), url('fonts/NotCourierSans.ttf') format('truetype'), url('fonts/NotCourierSans.svg#NotCourierSans') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PinyonScript';
src: url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), url('fonts/PinyonScript.woff') format('woff'), url('PinyonScript.ttf') format('truetype'), url('fonts/PinyonScript.svg#PinyonScript') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: NotCourierSans;
font-weight: normal;
background-color: white;
position: relative;
}
h1 {
font-family: PinyonScript;
font-weight: normal;
color: #003cb3;
}
h1 {
font-size: 80px;
margin-top: 0px;
margin-bottom: -30px;
}
h2 {
color: #FFFFFF;
background-color: #000000;
}
p {
font-family: NotCourierSans;
color: #003cb3;
font-size: 17px;
}
a {
color: #003cb3;
}
audio{
width: 400px;
}
.image{
width: 400px;
}
.image img{
width: 400px;
}
.seperator{
width:100%;
overflow: hidden;
}
</style>
</head> </head>
<body>
<body>
<div class="background" >
</div>
<div class="content" >
<h1> OuNuPo </h1> <h1> OuNuPo </h1>
<div class="seperator"> <div class="seperator">
<p>------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p> <p>------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
@ -177,6 +113,6 @@ ttssr-human-only: ocr/output.txt
<h2>Credits</h2> <h2>Credits</h2>
<p>OuNuPo was produced as part of a collaboration between XPUB and WORM. The project was developed by the XPUB practitioners (Natasha Berting, Angeliki Diakrousi, Joca van der Horst, Alexander Roidl, Alice Strete and Zalán Szakács) with the support from Varia special guests (Manetta Berends and Cristina Cochior), the WORM Pirate Bay (Wojtek Szustak and Frederic Van de Velde), diybookscanner.eu (Mark Van den Borre) and XPUB staff and tutors (Delphine Bedel, André Castro, Aymeric Mansoux, Michael Murtaugh, Leslie Robbins and Steve Rushton).</p> <p>OuNuPo was produced as part of a collaboration between XPUB and WORM. The project was developed by the XPUB practitioners (Natasha Berting, Angeliki Diakrousi, Joca van der Horst, Alexander Roidl, Alice Strete and Zalán Szakács) with the support from Varia special guests (Manetta Berends and Cristina Cochior), the WORM Pirate Bay (Wojtek Szustak and Frederic Van de Velde), diybookscanner.eu (Mark Van den Borre) and XPUB staff and tutors (Delphine Bedel, André Castro, Aymeric Mansoux, Michael Murtaugh, Leslie Robbins and Steve Rushton).</p>
</div>
</body> </body>
</html> </html>

2
05/jquery-3.3.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

90
05/style.css
Unescape Escape View File

@ -0,0 +1,90 @@
@font-face {
font-family: 'NotCourierSans';
src: url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), url('fonts/NotCourierSans.woff') format('woff'), url('fonts/NotCourierSans.ttf') format('truetype'), url('fonts/NotCourierSans.svg#NotCourierSans') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PinyonScript';
src: url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), url('fonts/PinyonScript.woff') format('woff'), url('PinyonScript.ttf') format('truetype'), url('fonts/PinyonScript.svg#PinyonScript') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: NotCourierSans;
font-weight: normal;
background-color: white;
position: relative;
}
h1 {
font-family: PinyonScript;
font-weight: normal;
color: #003cb3;
}
h1 {
font-size: 80px;
margin-top: 0px;
margin-bottom: -30px;
}
p {
font-family: NotCourierSans;
color: #003cb3;
font-size: 17px;
}
a {
color: #003cb3;
}
audio{
width: 400px;
}
.image{
width: 400px;
}
.image img{
width: 400px;
}
.seperator{
width:100%;
overflow: hidden;
}
div.content{z-index:20;
width: 75%;
margin-left: auto;
margin-right: auto;
}
/* child elements of div.content */
div.content * { width:100%;
background: white;
}
div.content h2 {color: #FFFFFF;
background-color: #000000;
}
div.content audio { width:75%; height:30px; }
/*imgs.background z-index<10*/
div.background{z-index:-1;
width:100%;}
img.background{ position: fixed;
z-index:-1;
}
Write Preview
Loading…
Cancel
Save