0
0

Add fancybox lightbox

This commit is contained in:
Sergey Chebotar 2023-02-10 07:36:29 +03:00
parent 2aba547539
commit 40f1010573
4 changed files with 19 additions and 11 deletions

View File

@ -19,10 +19,6 @@
<div class="carousel-item active">
<img class="d-block w-100" src="@Model?.Figures[0].FilePath" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5>@Model?.Name</h5>
<p>@Model?.Description</p>
</div>
@for (int i = 1; i < @Model?.Figures.Count(); i++)
{
<div class="carousel-item">

View File

@ -59,8 +59,13 @@
{
<div class="col mb-5">
<div class="card h-100">
<a asp-controller="Bundle" asp-action="Show" asp-route-id="@bundle.Id"><img class="card-img-top"
src="@bundle.Figures.FirstOrDefault()?.FilePath" alt="..." /></a>
<a data-src="@bundle.Figures.FirstOrDefault()?.FilePath" data-fancybox="@bundle.Id"
data-caption="@bundle.Description"><img class="card-img-top"
src="@bundle.Figures.FirstOrDefault()?.FilePath" alt="@bundle.Name" /></a>
@for (int i = 1; i < @bundle.Figures.Count(); i++)
{
<a data-src="@bundle.Figures[i].FilePath" data-fancybox="@bundle.Id"></a>
}
<div class="card-body p-4">
<div class="text-center">
<h5 class="fw-bolder">@bundle.Name</h5>

View File

@ -10,6 +10,7 @@
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<link href="/css/styles.css" rel="stylesheet" />
<link href="/lib/fancyapps-ui/fancybox.css" rel="stylesheet" />
</head>
<body id="page-top">
@ -20,6 +21,7 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>
<script src="/js/scripts.js"></script>
<script src="/lib/fancyapps-ui/fancybox.umd.js"></script>
</body>
</html>

View File

@ -1,5 +1,10 @@
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
"libraries": [
{
"library": "fancyapps-ui@4.0.31",
"destination": "wwwroot\\lib\\fancyapps-ui"
}
]
}