spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add click-to-enlarge lightbox for inventory product image

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-04-29 20:20:01 -04:00
parent 90a06c6acd
commit 49e3d73c67
1 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/Views/Inventory/Details.cshtml
+18 -2
View File
@@ -312,8 +312,24 @@
{ {
<div class="card border-0 shadow-sm mb-4"> <div class="card border-0 shadow-sm mb-4">
<div class="card-body p-3 text-center"> <div class="card-body p-3 text-center">
<img src="@Model.ImageUrl" alt="@Model.Name" <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal" title="Click to enlarge" style="cursor:zoom-in;">
style="max-width:100%;max-height:200px;object-fit:contain;" /> <img src="@Model.ImageUrl" alt="@Model.Name"
style="max-width:100%;max-height:200px;object-fit:contain;" />
</a>
<div class="text-muted small mt-1"><i class="bi bi-zoom-in me-1"></i>Click to enlarge</div>
</div>
</div>
<!-- Image Lightbox Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-label="Product image">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content border-0 bg-transparent shadow-none">
<div class="modal-body p-0 text-center position-relative">
<button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
<img src="@Model.ImageUrl" alt="@Model.Name"
style="max-width:100%;max-height:85vh;object-fit:contain;border-radius:6px;" />
</div>
</div>
</div> </div>
</div> </div>
} }