diff options
author | Jason A. Donenfeld <Jason@zx2c4.com> | 2011-05-07 02:09:54 -0400 |
---|---|---|
committer | Jason A. Donenfeld <Jason@zx2c4.com> | 2011-05-07 02:09:54 -0400 |
commit | 781ef1ac920d413661ac4d9a25bd4a6c02849438 (patch) | |
tree | c99b61df34a2b2092cf5c26346e199afa77514dc /web | |
parent | String change. (diff) | |
download | PhotoFloat-781ef1ac920d413661ac4d9a25bd4a6c02849438.tar.xz PhotoFloat-781ef1ac920d413661ac4d9a25bd4a6c02849438.zip |
Metadata display
Diffstat (limited to 'web')
-rw-r--r-- | web/css/000-controls.css | 28 | ||||
-rw-r--r-- | web/index.html | 3 | ||||
-rw-r--r-- | web/js/010-control.js | 33 |
3 files changed, 62 insertions, 2 deletions
diff --git a/web/css/000-controls.css b/web/css/000-controls.css index 3c3d986..2a8ea33 100644 --- a/web/css/000-controls.css +++ b/web/css/000-controls.css @@ -103,6 +103,34 @@ a:hover { -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; } +#metadata { + background-color: #000000; + width: 220px; + font-size: 12px; + line-height: 12px; + padding-top: 3px; + padding-bottom: 3px; + padding-right: 10px; + padding-left: 10px; + display: none; + margin: 0 auto; + margin-top: 1px; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + -moz-border-top-right-radius: 5px; + -moz-border-top-left-radius: 5px; + -webkit-border-top-right-radius: 5px; + -webkit-border-top-left-radius: 5px; + opacity: 0.5; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); +} +#metadata table { + text-align: left; +} +#metadata tr { + height: 14px; +} #photo-bar { position: absolute; bottom: 0; diff --git a/web/index.html b/web/index.html index dabc3f6..99a6460 100644 --- a/web/index.html +++ b/web/index.html @@ -20,8 +20,9 @@ <a id="next-photo"><img id="photo" /></a> <div id="photo-bar"> <div id="photo-links"> - <a id="metadata-link">metadata</a> | <a id="original-link" target="_blank">download original</a> + <a id="metadata-link" href="javascript:void(0)">show metadata</a> | <a id="original-link" target="_blank">download original</a> </div> + <div id="metadata"></div> </div> </div> diff --git a/web/js/010-control.js b/web/js/010-control.js index d41d41d..9c08eba 100644 --- a/web/js/010-control.js +++ b/web/js/010-control.js @@ -150,7 +150,22 @@ $(document).ready(function() { (current_photo_index - 1 < 0) ? (current_album.photos.length - 1) : (current_photo_index - 1) ].name)); $("#original-link").attr("target", "_blank").attr("href", "albums/" + current_album.path + "/" + current_photo.name); - $("#metadata-link").attr("href", "javascript:alert('Coming soon...')"); + + var text = "<table>"; + if (current_photo.make != undefined) text += "<tr><td>Camera Maker</td><td>" + current_photo.make + "</td></tr>"; + if (current_photo.model != undefined) text += "<tr><td>Camera Model</td><td>" + current_photo.model + "</td></tr>"; + if (current_photo.date != undefined) text += "<tr><td>Time Taken</td><td>" + current_photo.date + "</td></tr>"; + if (current_photo.size != undefined) text += "<tr><td>Resolution</td><td>" + current_photo.size[0] + " x " + current_photo.size[1] + "</td></tr>"; + if (current_photo.shutterSpeed != undefined) text += "<tr><td>Shutter Speed</td><td>" + current_photo.shutterSpeed + "</td></tr>"; + if (current_photo.aperture != undefined) text += "<tr><td>Aperture</td><td>" + current_photo.aperture + "</td></tr>"; + if (current_photo.focalLength != undefined) text += "<tr><td>Focal Length</td><td>" + current_photo.focalLength + "</td></tr>"; + if (current_photo.iso != undefined) text += "<tr><td>ISO Sensitivity</td><td>" + current_photo.iso + "</td></tr>"; + if (current_photo.exposureCompenstaion != undefined) text += "<tr><td>Exposure Compenstation</td><td>" + current_photo.exposureCompenstaion + "</td></tr>"; + if (current_photo.meteringMode != undefined) text += "<tr><td>Metering Mode</td><td>" + current_photo.meteringMode + "</td></tr>"; + if (current_photo.flashFired != undefined) text += "<tr><td>Flash Fired</td><td>" + current_photo.flashFired + "</td></tr>"; + if (current_photo.orientation != undefined) text += "<tr><td>Orientation</td><td>" + current_photo.orientation + "</td></tr>"; + text += "</table>"; + $("#metadata").html(text); $("#album-view").addClass("photo-view-container"); $("#subalbums").hide(); @@ -253,4 +268,20 @@ $(document).ready(function() { $("#photo-box").mouseleave(function() { $("#photo-links").stop().fadeOut("slow"); }); + $("#metadata-link").click(function() { + if (!$("#metadata").is(":visible")) + $("#metadata").stop() + .css("height", 0) + .css("padding-top", 0) + .css("padding-bottom", 0) + .show() + .animate({ height: 16 * 12, paddingTop: 3, paddingBottom: 3 }, "slow", function() { + $("#metadata-link").text($("#metadata-link").text().replace("show", "hide")); + }); + else + $("#metadata").stop().animate({ height: 0, paddingTop: 0, paddingBottom: 0 }, "slow", function() { + $(this).hide(); + $("#metadata-link").text($("#metadata-link").text().replace("hide", "show")); + }); + }); }); |