Nemcio/tinyfilemanager
1
0
Fork 0
mirror of https://github.com/prasathmani/tinyfilemanager.git synced 2025-10-31 18:35:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Resize preview image and implement zoom in/out (#1036)

Browse Source 
* Resize preview image and implement zoom in/out

* Remove redundant class name
This commit is contained in:
ner0
2023-05-03 09:41:59 +01:00
committed by GitHub
parent 8486c7a240
commit 7ec19c1659
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
tinyfilemanager.php
View File

@@ -1790,7 +1790,7 @@ if (isset($_GET['view'])) {
} elseif ($is_image) { } elseif ($is_image) {
// Image content // Image content
if (in_array($ext, array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'ico', 'svg', 'webp', 'avif'))) { if (in_array($ext, array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'ico', 'svg', 'webp', 'avif'))) {
echo '<p><img src="' . fm_enc($file_url) . '" alt="image" class="preview-img-container" class="preview-img"></p>'; echo '<p><input type="checkbox" id="preview-img-zoomCheck"><label for="preview-img-zoomCheck"><img src="' . fm_enc($file_url) . '" alt="image" class="preview-img"></label></p>';
} }
} elseif ($is_audio) { } elseif ($is_audio) {
// Audio content // Audio content
@@ -3754,7 +3754,9 @@ $isStickyNavBar = $sticky_navbar ? 'navbar-fixed' : 'navbar-normal';
.message.ok { border-color:green;color:green } .message.ok { border-color:green;color:green }
.message.error { border-color:red;color:red } .message.error { border-color:red;color:red }
.message.alert { border-color:orange;color:orange } .message.alert { border-color:orange;color:orange }
.preview-img { max-width:100%;max-height:80vh;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAKklEQVR42mL5//8/Azbw+PFjrOJMDCSCUQ3EABZc4S0rKzsaSvTTABBgAMyfCMsY4B9iAAAAAElFTkSuQmCC) } .preview-img { max-width:100%;max-height:80vh;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAKklEQVR42mL5//8/Azbw+PFjrOJMDCSCUQ3EABZc4S0rKzsaSvTTABBgAMyfCMsY4B9iAAAAAElFTkSuQmCC);cursor:zoom-in }
input#preview-img-zoomCheck[type=checkbox] { display:none }
input#preview-img-zoomCheck[type=checkbox]:checked ~ label > img { max-width:none;max-height:none;cursor:zoom-out }
.inline-actions > a > i { font-size:1em;margin-left:5px;background:#3785c1;color:#fff;padding:3px 4px;border-radius:3px; } .inline-actions > a > i { font-size:1em;margin-left:5px;background:#3785c1;color:#fff;padding:3px 4px;border-radius:3px; }
.preview-video { position:relative;max-width:100%;height:0;padding-bottom:62.5%;margin-bottom:10px } .preview-video { position:relative;max-width:100%;height:0;padding-bottom:62.5%;margin-bottom:10px }
.preview-video video { position:absolute;width:100%;height:100%;left:0;top:0;background:#000 } .preview-video video { position:absolute;width:100%;height:100%;left:0;top:0;background:#000 }