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 { #next {
right: 0.1em; 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 { #photo {
border: 0; border: 0;
left: 0; left: 0;
@ -159,6 +148,9 @@ a:hover {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
#fullscreen, #fullscreen-divider {
display: none;
}
.photo-view-container { .photo-view-container {
position: absolute; position: absolute;
height: 150px; height: 150px;

3
web/index.html
View File

@ -16,7 +16,7 @@
<a id="next-photo"><img id="photo" /></a> <a id="next-photo"><img id="photo" /></a>
<div id="photo-bar"> <div id="photo-bar">
<div id="photo-links"> <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>
<div id="metadata"></div> <div id="metadata"></div>
</div> </div>
@ -24,7 +24,6 @@
<a id="back">&lsaquo;</a> <a id="back">&lsaquo;</a>
<a id="next">&rsaquo;</a> <a id="next">&rsaquo;</a>
<a id="fullscreen">&#x2922;</a>
</div> </div>
<div id="album-view"> <div id="album-view">
<div id="thumbs"> <div id="thumbs">

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

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