KI-Kunst-Kirsten-Kloeckner/KIKunstKirstenKlöckner/Pages/Gallery.razor

@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; }
}