background images from Category:Special Issue 5
parent
6b2993c369
commit
1dbbae015c
@ -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);
|
||||
});
|
||||
|
||||
|
||||
|
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
Loading…
Reference in New Issue