Added project files
This commit is contained in:
NilsNH
parent
e6a5153416
commit
b151e56e91
12
README.md
12
README.md
|
|
@ -1,4 +1,10 @@
|
|||
avatar-banner
|
||||
=============
|
||||
#Interim specification
|
||||
|
||||
Something that automatically creates a grid of images, that links them to relevant Facebook profiles. Need to be able to export html using inline styling.
|
||||
|
||||
#TODO
|
||||
|
||||
1. Better control of grid
|
||||
2. Use jquery to allow for click-drag-adjustments
|
||||
3. Ability to save out a screenshot.
|
||||
|
||||
Create a configurable banner that uses Facebook profile images.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Banner bilde for InfoMedia</title>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||
<script src="scripts/coffee-script.js"></script>
|
||||
<script src="scripts/jquery-1.9.1.min.js"></script>
|
||||
<script type="text/coffeescript">
|
||||
###
|
||||
Create javascript object containing names and usernames from facebook like so
|
||||
www.facebook.com/USERNAME
|
||||
alternatively
|
||||
www.facebook.com/USERID
|
||||
###
|
||||
</script>
|
||||
<script src="scripts/bannerMaker.js"></script>
|
||||
<style type="text/css">
|
||||
#banner, #bannerSource {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Simple Facebook image banner creator</p>
|
||||
<div id='banner'>Inside banner</div>
|
||||
<div id='bannerSource'>Banner source</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
fbImageOptions = "?width=100&height=100"
|
||||
|
||||
fbuserNameObj =
|
||||
'Sindre Skrede': 'sindre.skrede.9'
|
||||
'Nils Norman Haukås': 'nhaukas'
|
||||
'Marie Havnen': 'marie.havnen'
|
||||
'Marie Fonnes': 'mfonnes'
|
||||
'Marianne Monstad': 'mariannemonstad'
|
||||
'Malin D. Øvrebø': 'malin.d.ovrebo'
|
||||
'Lisa Halvorsen': 'lisa.halvorsen1'
|
||||
'Marius Seim': 'marius.seim'
|
||||
'Maiken Beate Fjellanger': 'maiken.b.fjellanger'
|
||||
'Bjørnar Fjeldstad': '739398715'
|
||||
'Hedvig Elisabeth Andersland': 'hedvig.andersland'
|
||||
'Ida Maria Dahr': 'ida.m.nygaard'
|
||||
'Torjus Nafstad': 'torjus.nafstad'
|
||||
|
||||
cssOptionsObj =
|
||||
'margin-bottom': '-5px'
|
||||
###
|
||||
img:hover {
|
||||
margin:-5px 5px 0px -5px;
|
||||
}
|
||||
###
|
||||
|
||||
createImageGridHtml = (userNameObj) ->
|
||||
graphFBAddress = 'https://graph.facebook.com/'
|
||||
imageArray = []
|
||||
for fullName, username of userNameObj
|
||||
imageArray.push "<img src='#{graphFBAddress}#{username}/picture#{fbImageOptions}' title='#{fullName}'>"
|
||||
resultStr = imageArray.join('')
|
||||
resultStr = "<div id='banner'>#{resultStr}</div>"
|
||||
|
||||
styleBanner = (divId) ->
|
||||
$("#{divId}").css 'width', '600px'
|
||||
|
||||
$(document).ready ->
|
||||
console.log 'Starting script'
|
||||
console.log fbuserNameObj
|
||||
$('#banner').replaceWith(createImageGridHtml(fbuserNameObj))
|
||||
styleBanner('#banner')
|
||||
$('#bannerSource').text(createImageGridHtml(fbuserNameObj))
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
(function() {
|
||||
var createImageGridHtml, cssOptionsObj, fbImageOptions, fbuserNameObj, styleBanner;
|
||||
|
||||
fbImageOptions = "?width=100&height=100";
|
||||
|
||||
fbuserNameObj = {
|
||||
'Sindre Skrede': 'sindre.skrede.9',
|
||||
'Nils Norman Haukås': 'nhaukas',
|
||||
'Marie Havnen': 'marie.havnen',
|
||||
'Marie Fonnes': 'mfonnes',
|
||||
'Marianne Monstad': 'mariannemonstad',
|
||||
'Malin D. Øvrebø': 'malin.d.ovrebo',
|
||||
'Lisa Halvorsen': 'lisa.halvorsen1',
|
||||
'Marius Seim': 'marius.seim',
|
||||
'Maiken Beate Fjellanger': 'maiken.b.fjellanger',
|
||||
'Bjørnar Fjeldstad': '739398715',
|
||||
'Hedvig Elisabeth Andersland': 'hedvig.andersland',
|
||||
'Ida Maria Dahr': 'ida.m.nygaard',
|
||||
'Torjus Nafstad': 'torjus.nafstad'
|
||||
};
|
||||
|
||||
cssOptionsObj = {
|
||||
'margin-bottom': '-5px'
|
||||
/*
|
||||
img:hover {
|
||||
margin:-5px 5px 0px -5px;
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
||||
createImageGridHtml = function(userNameObj) {
|
||||
var fullName, graphFBAddress, imageArray, resultStr, username;
|
||||
graphFBAddress = 'https://graph.facebook.com/';
|
||||
imageArray = [];
|
||||
for (fullName in userNameObj) {
|
||||
username = userNameObj[fullName];
|
||||
imageArray.push("<img src='" + graphFBAddress + username + "/picture" + fbImageOptions + "' title='" + fullName + "'>");
|
||||
}
|
||||
resultStr = imageArray.join('');
|
||||
return resultStr = "<div id='banner'>" + resultStr + "</div>";
|
||||
};
|
||||
|
||||
styleBanner = function(divId) {
|
||||
return $("" + divId).css('width', '600px');
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
console.log('Starting script');
|
||||
console.log(fbuserNameObj);
|
||||
$('#banner').replaceWith(createImageGridHtml(fbuserNameObj));
|
||||
styleBanner('#banner');
|
||||
return $('#bannerSource').text(createImageGridHtml(fbuserNameObj));
|
||||
});
|
||||
|
||||
}).call(this);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue