Gallery

2023-08-04 17:05:25 +02:00
parent 83c4c46ed2
commit 152a7ac8b4
4 changed files with 131 additions and 4 deletions
--- a/KIKunstKirstenKlöckner/Pages/Gallery.razor
+++ b/KIKunstKirstenKlöckner/Pages/Gallery.razor
@ -0,0 +1,120 @@
+@page "/gallery"
+
+<RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
+    <Template Context="imagePath">
+        <div class="image-grid-item">
+            <RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
+                <RadzenButton Click="@(args => ShowImageInfo(imagePath))">
+                    <RadzenImage Src="@imagePath" Style="width: 100%; height: 100%; object-fit: cover;" />
+                </RadzenButton>
+            </RadzenCard>
+        </div>
+    </Template>
+</RadzenDataList>
+
+<div class="image-popup" style="@popupStyle">
+    <div class="image-popup-content">
+        <div class="image-info">
+            <RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
+            <p>@infoText</p>
+        </div>
+        <div class="close-button">
+            <RadzenButton Text="Close" Click="CloseImageInfo" />
+        </div>
+    </div>
+</div>
+
+<style>
+    .image-grid {
+        background-color: white; /* Hintergrund der RadzenDataList weiß machen */
+    }
+
+    .rz-data-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .image-grid-item {
+        margin: 5px;
+    }
+
+    .image-popup {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.9); /* Weißer Hintergrund mit Transparenz */
+        z-index: 9999;
+    }
+
+    .image-popup-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        max-width: 800px;
+        max-height: 400px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 20px;
+        border-radius: 5px;
+        background-color: white; /* Weißer Hintergrund für den Inhalt */
+    }
+
+    .image-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .close-button {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-end;
+    }
+</style>
+
+@code {
+    List<string> imagePaths = new List<string>();
+    string selectedImage;
+    string infoText = "Info Text";
+    string popupStyle = "display: none;";
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        // Get the physical path to the folder
+        string folderPath = Path.Combine(_environment.WebRootPath, "generated_images");
+
+        if (Directory.Exists(folderPath))
+        {
+            // Load the image file names from the folder
+            var imageFiles = Directory.GetFiles(folderPath, "*.jpg");
+
+            // Get the relative paths to the images
+            imagePaths = imageFiles.Select(file => file.Replace(_environment.WebRootPath, "").Replace("\\", "/")).ToList();
+        }
+    }
+
+    private void ShowImageInfo(string imagePath)
+    {
+        selectedImage = imagePath;
+        infoText = "Info Text"; // Hier kannst du den gewünschten Infotext setzen
+        popupStyle = "display: block;";
+    }
+
+    private void CloseImageInfo()
+    {
+        popupStyle = "display: none;";
+    }
+
+    [Inject]
+    private IWebHostEnvironment _environment { get; set; }
+}