121 lines
3.4 KiB
Plaintext
121 lines
3.4 KiB
Plaintext
|
@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; }
|
||
|
}
|