Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-14 07:32:16 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/ui/nav.php
View file

@ -5,11 +5,11 @@ use App\Account;
$loggedin = new Account();
?>
<nav class="nav-root flex-left">
<div class="nav-name flex-left">
<nav class="nav-root">
<div class="nav-name">
<p><?php echo $user_settings['website_name']; ?></p>
</div>
<div class="nav-links flex-left">
<div class="nav-links">
<a class='btn' href='index.php'><img class='svg' src='assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
<hr>
<?php

49
css/main.css
View file

@ -310,6 +310,55 @@ nav .btn {
| IMAGE
|-------------------------------------------------------------
*/
.fullscreen-image {
width: 100vw;
height: 100vh;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgba(21, 21, 21, 0.7333333333);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
z-index: 999;
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
display: none;
opacity: 0;
}
.fullscreen-image img {
max-width: 95%;
max-height: 95%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 0.25rem;
}
.fullscreen-image button {
width: 1.75rem;
height: 1.75rem;
padding: 0;
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: block;
box-sizing: border-box;
text-decoration: none;
border: none;
border-radius: calc(0.25rem - (0.5rem + 3px));
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #121212;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
}
.fullscreen-image button img {
width: 1.5rem;
display: block;
}
.fullscreen-image button:hover {
outline: #E8E3E3 0.2rem solid;
color: #E8E3E3;
}
.image-container {
margin: 1rem 0 2rem 0;
padding: 0;

65
css/scss/_body.scss
View file

@ -182,6 +182,71 @@
| IMAGE
|-------------------------------------------------------------
*/
.fullscreen-image {
width: 100vw; height: 100vh;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-050%) translateY(-50%);
background-color: $bg-alt;
backdrop-filter: blur(15px);
z-index: 999;
transition: opacity 0.5s cubic-bezier(.19, 1, .22, 1);
display: none; // Hidden so to not disturb the user
opacity: 0; //
img {
max-width: 95%; max-height: 95%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-050%) translateY(-50%);
border-radius: $rad;
}
button {
width: 1.75rem; height: 1.75rem;
padding: 0;
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: block;
box-sizing: border-box;
text-decoration: none;
border: none;
border-radius: calc($rad - (0.5rem + 3px));
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
background-color: $black;
box-shadow: $shadow;
img {
width: 1.5rem;
display: block;
}
&:hover {
outline: $white 0.2rem solid;
color: $fg;
}
}
}
.image-container {
margin: 1rem 0 2rem 0;
padding: 0;

53
image.php
View file

@ -121,30 +121,47 @@
$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
/*
|-------------------------------------------------------------
| Start of displaying all info on image
@ -273,7 +290,7 @@
if ($privilaged) {
?>
<!-- Danger zone -->
<div class='danger-zone flex-down default-window'>
<div class='danger-zone'>
<h2>Danger zone</h2>
<!--