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

implements finger swipe to right and left to load previous and next image

Browse Source
This commit is contained in:
Marc Wäckerlin
2017-03-09 19:56:19 +00:00
parent 17bd39df00
commit 5ad539e572
8 changed files with 79 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
html/index.php
View File

@@ -215,19 +215,50 @@ function singleimage() {
$objects = extractDir($imagepath);
$pos = array_search($imgfile, $objects['files']);
$arrows='';
if ($pos>0)
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)
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);
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) {
$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"');
}
?>
<script>
var pos = <?php echo $pos; ?>;
var subpath = '<?php echo $subpath ?>';
var images = <?php echo json_encode($objects['files']) ?>;
function next() {
if (++pos>=images.length) {
pos=0;
}
loadimg();
}
function previous() {
if (pos==0) {
pos = images.length;
}
pos--;
loadimg();
}
function loadimg() {
var url = '?path='+encodeURIComponent(subpath)+'&file='+encodeURIComponent(images[pos]);
$('#pos').text(pos+1);
$('img.image').attr('src', url);
console.log('loaded image', url);
}
</script>
<?php
}
function share() {
@@ -401,6 +432,11 @@ 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>
<script src="gallery.js"></script>
</header>
<body>
<?php