webservices/sharing-gallery
1
0
Fork 0
Code Issues Pull Requests Releases Activity

full screen in handy, swipe down to go back

Browse Source
This commit is contained in:
Marc Wäckerlin
2017-03-09 23:45:10 +00:00
parent 5ad539e572
commit 96b2726763
12 changed files with 239 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
html/index.php
View File

@@ -162,10 +162,10 @@ function linkorselect($link, $img, $filename) {
}
}
function pageheader($arrows=NULL) {
function pageheader($arrows=NULL, $class="") {
global $username, $subpath;
?>
<div id="header">
<div id="header" <?php echo $class ?>>
<h1>Gallery: <?php echo htmlentities($username).($subpath?'@'.htmlentities($subpath):'') ?></h1>
<?php
if ($arrows) {
@@ -217,21 +217,21 @@ function singleimage() {
$arrows='';
if ($pos>0) {
$arrows .= '<a href="?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos-1]).'&view" title="previous">←</a>';
$previous = '?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos-1]);
}
$arrows .= '<a href="?path='.urlencode($subpath).'" title="back">↑</a>';
if ($pos<count($objects['files'])-1) {
$arrows .= '<a href="?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos+1]).'&view" title="next">→</a>';
$next = '?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos+1]);
}
pageheader($arrows);
pageheader($arrows, 'class="single"');
echo '<div class="image"><img class="image" src="?path='.urlencode($subpath).'&file='.urlencode($imgfile).'" alt="'.urlencode($imgfile).'"/></div>';
echo '<div id="pos">'.($pos+1).'</div>';
if ($pos!==NULL) {
echo '<div class="more">';
$lower = max(0, $pos-floor(((int)$preview_num)/2));
$higher = min(count($objects['files']), $lower+((int)$preview_num));
for ($i=$lower; $i<$higher; ++$i)
makelink('?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$i]).'&view', '?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$i]).'&thumb', $objects['files'][$i], 'style="width: '.round(100/($higher-$lower), 3).'%" class="thumbnail"');
echo '</div>';
}
?>
<script>
@@ -251,12 +251,36 @@ function singleimage() {
pos--;
loadimg();
}
function back() {
$('#pos').text(subpath);
$('#pos').fadeIn(1000, function() {$('#pos').fadeOut(1000)});
window.location.href = '?path='+encodeURIComponent(subpath);
}
function loadimg() {
var url = '?path='+encodeURIComponent(subpath)+'&file='+encodeURIComponent(images[pos]);
$('#pos').text(pos+1);
$('#pos').fadeIn(1000, function() {$('#pos').fadeOut(1000)});
$('img.image').attr('src', url);
console.log('loaded image', url);
}
$(document).ready(function() {
$('div.image').click(function(e) {
console.log('next')
next()
})
$('div.image').on('swipeleft', function(e) {
console.log('next')
next()
})
$('div.image').on('swiperight', function(e) {
console.log('previous')
previous()
})
$('div.image').on('swipedown', function(e) {
console.log('back')
back()
})
})
</script>
<?php
}
@@ -432,10 +456,10 @@ if (!isset($_REQUEST['secret'])) {
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="jquery.mobile.css">
<script src="jquery.js"></script>
<script src="jquery.migrate.js"></script>
<script src="jquery.mobile.js"></script>
<link rel="stylesheet" href="node_modules/jquery-mobile/dist/jquery.mobile.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="node_modules/jquery-mobile/dist/jquery.mobile.min.js"></script>
<script src="gallery.js"></script>
</header>
<body>