Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-22 11:24:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fullscreen image view

Browse source
This commit is contained in:
Michał Gdula 2022-09-21 16:28:57 +00:00
parent e7f55dc062
commit 55c853e81c
4 changed files with 152 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

53
image.php
View file

@ -121,29 +121,46 @@
$privilaged = False;
}
echo "<div class='fullscreen-image'>
<button onclick='closeFullScreen()'><img src='assets/icons/cross.svg'></button>
<img>
</div>";
if (is_file("images/previews/".$image['imagename'])) {
echo "<div class='image-container'>
<img class='image' id='".$image['id']."' src='images/previews/".$image['imagename']."' alt='".$image_alt."'>
<button class='preview-button' onclick='showFull()'><img src='assets/icons/scan.svg'></button>
</div>";
?>
<script>
function showFull() {
document.querySelector(".image").style.opacity = 0;
document.querySelector(".preview-button").style.display = "none";
setTimeout(function(){
document.querySelector(".image").src = "<?php echo $image_path;?>";
document.querySelector(".image").style.opacity = 1;
}, 500);
}
</script>
<?php
<img class='image' id='".$image['id']."' src='images/previews/".$image['imagename']."' alt='".$image_alt."'>
<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
</div>";
} else {
echo "<div class='image-container'>
<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
</div>";
<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
</div>";
}
?>
<script>
function fullScreen() {
document.querySelector(".preview-button").style.display = "none";
document.querySelector(".fullscreen-image").style.display = "block";
document.querySelector(".fullscreen-image > img").src = "<?php echo $image_path;?>";
setTimeout(function(){
document.querySelector(".fullscreen-image").style.opacity = 1;
}, 500);
}
function closeFullScreen() {
document.querySelector(".preview-button").style.display = "block";
document.querySelector(".fullscreen-image").style.opacity = 0;
setTimeout(function(){
document.querySelector(".fullscreen-image").style.display = "none";
}, 500);
}
</script>
<?php
/*
|-------------------------------------------------------------
@ -273,7 +290,7 @@
if ($privilaged) {
?>
<!-- Danger zone -->
<div class='danger-zone flex-down default-window'>
<div class='danger-zone'>
<h2>Danger zone</h2>
<!--