ThaMunsta/itflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Image Thumbnails and Previews for better image optimization update view image modal to JS and allow to move between images using previous and next arrows

Browse Source
This commit is contained in:
johnnyq
2024-12-08 15:22:37 -05:00
parent c4870e49cf
commit 1d8a78b279
6 changed files with 252 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
client_file_view_modal.php
View File

@@ -1,17 +1,25 @@
<div class="modal" id="viewFileModal<?php echo $file_id; ?>" tabindex="-1">
<div class="modal-dialog modal-xl ">
<div class="modal-content bg-dark">
<div class="modal" id="viewFileModal" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-dark text-white">
<div class="modal-header">
<h5 class="modal-title"><i class="fa fa-fw fa-image mr-2"></i><?php echo $file_name; ?></h5>
<h6 class="modal-title" id="modalTitle"></h6>
<button type="button" class="close text-white" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="position-relative text-center">
<!-- Left arrow -->
<button type="button" class="btn btn-dark position-absolute" style="left:10px; top:50%; transform:translateY(-50%);" onclick="prevFile()">
<i class="fas fa-chevron-left"></i>
</button>
<div style="text-align: center;">
<img class="img-fluid" src="<?php echo "uploads/clients/$client_id/$file_reference_name"; ?>">
<img id="modalImage" class="img-fluid my-3" src="" alt="">
<!-- Right arrow -->
<button type="button" class="btn btn-dark position-absolute" style="right:10px; top:50%; transform:translateY(-50%);" onclick="nextFile()">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>