markus/photofloat
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Do fullscreen properly.

Browse Source
This commit is contained in:
Jason A. Donenfeld 2012-04-19 20:52:41 +02:00
parent 8b7d41937e
commit 99b3118cce
3 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/css/000-controls.css
View File

@ -77,17 +77,6 @@ a:hover {
#next {
right: 0.1em;
}
#fullscreen {
display: none;
position: absolute;
opacity: 0.50;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
margin-top: -0.25em;
margin-left: -1em;
font-size: 2em;
cursor: pointer;
}
#photo {
border: 0;
left: 0;
@ -159,6 +148,9 @@ a:hover {
width: 100%;
text-align: center;
}
#fullscreen, #fullscreen-divider {
display: none;
}
.photo-view-container {
position: absolute;
height: 150px;

3
web/index.html
View File

@ -16,7 +16,7 @@
<a id="next-photo"><img id="photo" /></a>
<div id="photo-bar">
<div id="photo-links">
<a id="metadata-link" href="javascript:void(0)">show 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><span id="fullscreen-divider"> | </span><a id="fullscreen" href="javascript:void(0)">fullscreen</a>
</div>
<div id="metadata"></div>
</div>
@ -24,7 +24,6 @@
<a id="back">&lsaquo;</a>
<a id="next">&rsaquo;</a>
<a id="fullscreen">&#x2922;</a>
</div>
<div id="album-view">
<div id="thumbs">

14
web/js/011-display.js
View File

@ -27,6 +27,7 @@ $(document).ready(function() {
var previousPhoto = null;
var originalTitle = document.title;
var photoFloat = new PhotoFloat();
var maxSize = 800;
/* Displays */
@ -152,8 +153,7 @@ $(document).ready(function() {
image.css("height", "100%").css("width", "auto").css("position", "").css("bottom", "");
}
function showPhoto() {
var maxSize, width, height, photoSrc, previousPhoto, nextPhoto, nextLink, text;
maxSize = 1024;
var width, height, photoSrc, previousPhoto, nextPhoto, nextLink, text;
width = currentPhoto.size[0];
height = currentPhoto.size[1];
if (width > height) {
@ -288,17 +288,19 @@ $(document).ready(function() {
$("#photo-box").mouseleave(function() {
$("#photo-links").stop().fadeOut("slow");
});
$("#next, #back, #fullscreen").mouseenter(function() {
$("#next, #back").mouseenter(function() {
$(this).stop().fadeTo("slow", 1);
});
$("#next, #back").mouseleave(function() {
$(this).stop().fadeTo("slow", 0.35);
});
if ($.support.fullscreen) {
$("#fullscreen-divider").show();
$("#fullscreen").show().click(function() {
$("#photo").fullScreen();
}).mouseleave(function() {
$(this).stop().fadeTo("slow", 0.50);
$("#photo").fullScreen({callback: function(isFullscreen) {
maxSize = isFullscreen ? 1024 : 800;
showPhoto();
}});
});
}
$("#metadata-link").click(function() {