Finishing up core.
Jason A. Donenfeld
parent
9220ea44b5
commit
a80528f9d3
|
|
@ -1,3 +1,4 @@
|
|||
upload.sh
|
||||
*.pyc
|
||||
cache/*
|
||||
test/*
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ class Photo(object):
|
|||
self._metadata(image)
|
||||
self._thumbnails(image, thumb_path)
|
||||
def _metadata(self, image):
|
||||
self._attributes["size"] = image.size
|
||||
try:
|
||||
info = image._getexif()
|
||||
except:
|
||||
|
|
@ -125,8 +126,11 @@ class Photo(object):
|
|||
try:
|
||||
value = datetime.strptime(value, '%Y:%m:%d %H:%M:%S')
|
||||
except:
|
||||
pass
|
||||
pass
|
||||
self._attributes[decoded] = value
|
||||
|
||||
if "Orientation" in self._attributes and self._attributes["Orientation"] in range(5, 9):
|
||||
self._attributes["size"] = (self._attributes["size"][1], self._attributes["size"][0])
|
||||
def _thumbnail(self, image, thumb_path, size, square=False):
|
||||
thumb_path = os.path.join(thumb_path, image_cache(self._path, size, square))
|
||||
print "Thumbing %s" % thumb_path
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #222222;
|
||||
font-family: "LM Roman", "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", "Times", serif;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
a {
|
||||
color: #88EE44;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #DDDDDD;
|
||||
}
|
||||
#title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 0.4em;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#album-view {
|
||||
position: absolute;
|
||||
top: 2.5em;
|
||||
padding: 1em;
|
||||
}
|
||||
#thumbs {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#thumbs img {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#subalbums {
|
||||
}
|
||||
.album-button {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
border: 1px #86A1B6 dotted;
|
||||
}
|
||||
|
||||
|
||||
#next, #back {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
font-size: 2.5em;
|
||||
line-height: 0;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
#back {
|
||||
left: 0;
|
||||
}
|
||||
#next {
|
||||
right: 0;
|
||||
}
|
||||
#photo {
|
||||
border: 0;
|
||||
}
|
||||
#photo-view {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
top: 2.5em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.photo-view-container {
|
||||
position: absolute;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
top: auto !important;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@font-face {
|
||||
font-family: "LM Roman";
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url("/fonts/lmroman10-bold.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "LM Roman";
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
src: url("/fonts/lmroman10-bolditalic.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "LM Roman";
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
src: url("/fonts/lmroman10-italic.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "LM Roman";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url("/fonts/lmroman10-regular.otf");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -3,21 +3,23 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>PhotoFloat</title>
|
||||
<title>JasonDonenfeld.com – Colors</title>
|
||||
<link href="css/styles.min.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="js/scripts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="album">
|
||||
<h2 id="title"></h2>
|
||||
|
||||
<h3>Photos</h3>
|
||||
<div id="photos"></div>
|
||||
|
||||
<h3 id="subalbums-title">Sub-albums</h3>
|
||||
<div id="subalbums"></div>
|
||||
<div id="title">Colors</div>
|
||||
<div id="album-view">
|
||||
<div id="thumbs">
|
||||
<div id="loading">Loading...</div>
|
||||
</div>
|
||||
<div id="subalbums"></div>
|
||||
</div>
|
||||
<div id="photo-view">
|
||||
<a id="next-photo"><img id="photo" /></a>
|
||||
<a id="back">←</a>
|
||||
<a id="next">→</a>
|
||||
</div>
|
||||
<div id="photo"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
$(document).ready(function() {
|
||||
function cachePath(path) {
|
||||
if (path == "")
|
||||
return "root";
|
||||
if (path[0] == '/')
|
||||
path = path.substring(1);
|
||||
return path.replace(/ /g, "_").replace(/\//g, "-");
|
||||
}
|
||||
function imagePath(image, path, size, square) {
|
||||
var suffix;
|
||||
if (square)
|
||||
suffix = size.toString() + "s";
|
||||
else
|
||||
suffix = size.toString();
|
||||
return "cache/" + cachePath(path + "/" + image + "_" + suffix + ".jpg");
|
||||
}
|
||||
function loadAlbum() {
|
||||
if (current_album_cache in album_cache) {
|
||||
albumLoaded(album_cache[current_album_cache]);
|
||||
return;
|
||||
}
|
||||
$("#loading").show();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "cache/" + current_album_cache + ".json",
|
||||
error: function() { $(document.body).html("Couldn't fetch it."); },
|
||||
success: albumLoaded
|
||||
});
|
||||
}
|
||||
function albumLoaded(album) {
|
||||
$("#loading").hide();
|
||||
album_cache[cachePath(album.path)] = album;
|
||||
current_album = album;
|
||||
if (cachePath(album.path) == current_album_cache)
|
||||
showAlbum();
|
||||
if (current_photo_cache != null)
|
||||
showPhoto();
|
||||
setTitle();
|
||||
}
|
||||
function setTitle() {
|
||||
var title = "";
|
||||
var components;
|
||||
if (current_album.path.length == 0)
|
||||
components = [document.title];
|
||||
else {
|
||||
components = current_album.path.split("/");
|
||||
components.unshift(document.title);
|
||||
}
|
||||
var last = "";
|
||||
for (var i = 0; i < components.length; ++i) {
|
||||
if (i)
|
||||
last += "/" + components[i];
|
||||
if (i < components.length - 1 || current_photo_cache != null)
|
||||
title += "<a href=\"#" + (i == 0 ? "" : cachePath(last.substring(1))) + "\">";
|
||||
title += components[i];
|
||||
if (i < components.length - 1 || current_photo_cache != null) {
|
||||
title += "</a>";
|
||||
title += " » ";
|
||||
}
|
||||
}
|
||||
if (current_photo_cache != null)
|
||||
title += current_photo.name;
|
||||
$("#title").html(title);
|
||||
}
|
||||
function showAlbum() {
|
||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||
var photos = "";
|
||||
for (var i = 0; i < current_album.photos.length; ++i)
|
||||
photos += "<a href=\"#" + current_album_cache + "/" + cachePath(current_album.photos[i].name) + "\"><img id=\"thumb-" + cachePath(current_album.photos[i].name) + "\" src=\"" + imagePath(current_album.photos[i].name, current_album.path, 150, true) + "\" height=\"150\" width=\"150\"></a>";
|
||||
$("#thumbs").html(photos);
|
||||
if (current_album.albums.length)
|
||||
$("#subalbums-title").show();
|
||||
else
|
||||
$("#subalbums-title").hide();
|
||||
var subalbums = "";
|
||||
for (var i = 0; i < current_album.albums.length; ++i)
|
||||
subalbums += "<a href=\"#" + cachePath(current_album.path + "/" + current_album.albums[i].path) + "\"><div class=\"album-button\">" + current_album.albums[i].path + "</div></a>";
|
||||
$("#subalbums").html(subalbums);
|
||||
|
||||
$("#album-view").removeClass("photo-view-container");
|
||||
$("#subalbums").show();
|
||||
$("#photo-view").hide();
|
||||
}
|
||||
function showPhoto() {
|
||||
currentPhoto();
|
||||
if (current_photo == null) {
|
||||
$(document.body).html("Wrong picture.");
|
||||
return;
|
||||
}
|
||||
var maxSize = 640;
|
||||
var width = current_photo.size[0];
|
||||
var height = current_photo.size[1];
|
||||
if (width > height) {
|
||||
height = height / width * maxSize;
|
||||
width = maxSize;
|
||||
} else {
|
||||
width = width / height * maxSize;
|
||||
height = maxSize;
|
||||
}
|
||||
$("#photo")
|
||||
.attr("width", width).attr("height", height)
|
||||
.attr("src", imagePath(current_photo.name, current_album.path, maxSize, false))
|
||||
.attr("alt", current_photo.name)
|
||||
.attr("title", current_photo.name);
|
||||
var nextLink = "#" + current_album_cache + "/" + cachePath(current_album.photos[
|
||||
(current_photo_index + 1 >= current_album.photos.length) ? 0 : (current_photo_index + 1)
|
||||
].name);
|
||||
$("#next-photo").attr("href", nextLink);
|
||||
$("#next").attr("href", nextLink);
|
||||
$("#back").attr("href", "#" + current_album_cache + "/" + cachePath(current_album.photos[
|
||||
(current_photo_index - 1 < 0) ? (current_album.photos.length - 1) : (current_photo_index - 1)
|
||||
].name));
|
||||
|
||||
$("#album-view").addClass("photo-view-container");
|
||||
$("#subalbums").hide();
|
||||
$("#photo-view").show();
|
||||
var thumb = $("#thumb-" + current_photo_cache.replace(/\./g, "\\."));
|
||||
var scroller = $("#album-view");
|
||||
scroller.stop();
|
||||
scroller.animate({ scrollLeft: thumb.position().left + scroller.scrollLeft() - scroller.width() / 2 + thumb.width() / 2 }, "slow");
|
||||
}
|
||||
function currentPhoto() {
|
||||
for (current_photo_index = 0; current_photo_index < current_album.photos.length; ++current_photo_index) {
|
||||
if (cachePath(current_album.photos[current_photo_index].name) == current_photo_cache)
|
||||
break;
|
||||
}
|
||||
if (current_photo_index >= current_album.photos.length) {
|
||||
current_photo = null;
|
||||
current_photo_index = -1;
|
||||
return;
|
||||
}
|
||||
current_photo = current_album.photos[current_photo_index];
|
||||
}
|
||||
var current_album_cache = null;
|
||||
var current_photo_cache = null;
|
||||
var current_album = null;
|
||||
var current_photo = null;
|
||||
var current_photo_index = -1;
|
||||
var album_cache = new Array();
|
||||
$(window).hashchange(function() {
|
||||
var new_album_cache = location.hash.substring(1);
|
||||
var index = new_album_cache.lastIndexOf("/");
|
||||
if (index != -1 && index != new_album_cache.length - 1) {
|
||||
current_photo_cache = new_album_cache.substring(index + 1);
|
||||
new_album_cache = new_album_cache.substring(0, index);
|
||||
} else
|
||||
current_photo_cache = null;
|
||||
if (!new_album_cache.length)
|
||||
new_album_cache = cachePath("root");
|
||||
if (new_album_cache != current_album_cache) {
|
||||
current_album_cache = new_album_cache;
|
||||
loadAlbum();
|
||||
} else if (current_photo_cache != null) {
|
||||
showAlbum();
|
||||
showPhoto();
|
||||
setTitle();
|
||||
} else {
|
||||
showAlbum();
|
||||
setTitle();
|
||||
}
|
||||
});
|
||||
$(window).hashchange();
|
||||
$(document).keydown(function(e){
|
||||
if (current_photo_cache == null)
|
||||
return true;
|
||||
if (e.keyCode == 39) {
|
||||
window.location.href = $("#next").attr("href");
|
||||
return false;
|
||||
} else if (e.keyCode == 37) {
|
||||
window.location.href = $("#back").attr("href");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
function cachePath(path) {
|
||||
return path.replace(/ /g, "_").replace(/\//g, "-");
|
||||
}
|
||||
function imagePath(image, path, size, square) {
|
||||
var suffix;
|
||||
if (square)
|
||||
suffix = size.toString() + "s";
|
||||
else
|
||||
suffix = size.toString();
|
||||
return "cache/" + cachePath(path + "/" + image + "_" + suffix + ".jpg");
|
||||
}
|
||||
function loadAlbum(path) {
|
||||
if (path in album_cache) {
|
||||
albumLoaded(album_cache[path]);
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "cache/" + path + ".json",
|
||||
error: function() { $(document.body).html("Couldn't fetch it."); },
|
||||
success: albumLoaded
|
||||
});
|
||||
}
|
||||
function albumLoaded(album) {
|
||||
album_cache[cachePath(album.path)] = album;
|
||||
current_album = album;
|
||||
if (current_image_cache != null)
|
||||
showPhoto();
|
||||
else if (cachePath(album.path) == current_album_cache)
|
||||
showAlbum();
|
||||
}
|
||||
function showAlbum() {
|
||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||
var title = "";
|
||||
var components = current_album.path.split("/");
|
||||
var last = "";
|
||||
for (var i = 0; i < components.length; ++i) {
|
||||
last += "/" + components[i];
|
||||
if (i < components.length - 1)
|
||||
title += "<a href=\"#" + cachePath(last.substring(1)) + "\">";
|
||||
title += components[i];
|
||||
if (i < components.length - 1) {
|
||||
title += "</a>";
|
||||
title += " » ";
|
||||
}
|
||||
}
|
||||
$("#title").html(title);
|
||||
var photos = "";
|
||||
for (var i = 0; i < current_album.photos.length; ++i)
|
||||
photos += "<a href=\"#" + current_album_cache + "/" + cachePath(current_album.photos[i].name) + "\"><img border=0 src=\"" + imagePath(current_album.photos[i].name, current_album.path, 150, true) + "\" height=150 width=150></a>";
|
||||
$("#photos").html(photos);
|
||||
if (current_album.albums.length)
|
||||
$("#subalbums-title").show();
|
||||
else
|
||||
$("#subalbums-title").hide();
|
||||
var subalbums = "";
|
||||
for (var i = 0; i < current_album.albums.length; ++i)
|
||||
subalbums += "<a href=\"#" + cachePath(current_album.path + "/" + current_album.albums[i].path) + "\"><li>" + current_album.albums[i].path + "</li></a>";
|
||||
$("#subalbums").html(subalbums);
|
||||
|
||||
$("#album").fadeIn();
|
||||
$("#photo").fadeOut();
|
||||
}
|
||||
function showPhoto() {
|
||||
var index;
|
||||
for (index = 0; index < current_album.photos.length; ++index) {
|
||||
if (cachePath(current_album.photos[index].name) == current_image_cache)
|
||||
break;
|
||||
}
|
||||
if (index >= current_album.photos.length) {
|
||||
$(document.body).html("Wrong picture.");
|
||||
return;
|
||||
}
|
||||
$("#photo").html("<a href=\"#" + current_album_cache + "\"><img src=\"" + imagePath(current_album.photos[index].name, current_album.path, 640, false) + "\"></a>");
|
||||
$("#album").fadeOut();
|
||||
$("#photo").fadeIn();
|
||||
}
|
||||
var current_album_cache = "";
|
||||
var current_image_cache = "";
|
||||
var current_album = null;
|
||||
var album_cache = new Array();
|
||||
$(window).hashchange(function() {
|
||||
var new_album_cache = location.hash.substring(1);
|
||||
var index = new_album_cache.lastIndexOf("/");
|
||||
if (index != -1 && index != new_album_cache.length - 1) {
|
||||
current_image_cache = new_album_cache.substring(index + 1);
|
||||
new_album_cache = new_album_cache.substring(0, index);
|
||||
} else
|
||||
current_image_cache = null;
|
||||
if (!new_album_cache.length)
|
||||
new_album_cache = cachePath("New York Summer 2009"); //root
|
||||
if (new_album_cache != current_album_cache) {
|
||||
current_album_cache = new_album_cache;
|
||||
loadAlbum(current_album_cache);
|
||||
} else if (current_image_cache != null)
|
||||
showPhoto();
|
||||
else
|
||||
showAlbum();
|
||||
});
|
||||
$(window).hashchange();
|
||||
});
|
||||
Loading…
Reference in New Issue