POLO-WEBAPP/VirtualTask
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggiunta classe lightbox in immagini portale (VT_page2 e VT_page3)

Browse Source 
Impaginazione pagina foto
This commit is contained in:
michele 2025-09-29 09:46:23 +02:00
parent afa133a8f2
commit fb49116bba
3 changed files with 224 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
Views/Portale/VT_Page2.cshtml
View File

@ -4,6 +4,68 @@
ViewData["Title"] = "Virtual Task Pro"; ViewData["Title"] = "Virtual Task Pro";
} }
<!-- CSS lightbox -->
<style>
.lightbox {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
}
/* .lightbox img {
max-width: 90%;
max-height: 80%;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
animation: fadeIn 0.3s ease;
} */
.lightbox img {
width: 400px;
height: auto; /* mantiene proporzioni */
border-radius: 10px;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
animation: fadeIn 0.3s ease;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 40px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
@@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.lightbox-img {
cursor: pointer;
transition: transform 0.2s;
}
.lightbox-img:hover {
transform: scale(1.05);
}
</style>
<div class="agy-project-wrapper agy-project-page-wrapper"> <div class="agy-project-wrapper agy-project-page-wrapper">
<div class="container" style="width:100%; text-align:justify"> <div class="container" style="width:100%; text-align:justify">
<div> <div>
@ -30,8 +92,8 @@
<div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="agy-about-img relative"> <div class="agy-about-img relative">
<div class=""> <div class="">
<img src="~/assets/images/app1.png" alt="Virtual Task App" style="width:30%;height:30%;" /> <img src="~/assets/images/app1.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
<img src="~/assets/images/app2.png" alt="Virtual Task App" style="width:30%;height:30%;" /> <img src="~/assets/images/app2.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
</div> </div>
</div> </div>
</div> </div>
@ -60,7 +122,7 @@
<table style="width:100%"> <table style="width:100%">
<tr> <tr>
<th style="width:20%"> <th style="width:20%">
<img src="~/assets/images/app3.png" alt="Virtual Task App" style="width:70%;height:70%;" /> <img src="~/assets/images/app3.png" alt="Virtual Task App" style="width:70%;height:70%;" class="lightbox-img" />
</th> </th>
<th style="width:70%"> <th style="width:70%">
<ol> <ol>
@ -124,8 +186,8 @@
<div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="agy-about-img relative"> <div class="agy-about-img relative">
<div class=""> <div class="">
<img src="~/assets/images/app5.png" alt="Virtual Task App" style="width:30%;height:30%;" /> <img src="~/assets/images/app5.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
<img src="~/assets/images/app6.png" alt="Virtual Task App" style="width:30%;height:30%;" /> <img src="~/assets/images/app6.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
</div> </div>
</div> </div>
</div> </div>
@ -164,6 +226,37 @@
</div> </div>
</div> </div>
<!-- Lightbox HTML -->
<div class="lightbox" id="lightbox">
<span class="close" id="lightbox-close">&times;</span>
<img id="lightbox-img" src="" alt="Anteprima immagine">
</div>
@section Scripts {
<script>
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const closeBtn = document.getElementById('lightbox-close');
document.querySelectorAll('.lightbox-img').forEach(img => {
img.addEventListener('click', () => {
lightboxImg.src = img.src;
lightbox.style.display = 'flex';
});
});
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
});
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
}
});
</script>
}
@* <script> @* <script>
$('.zoom').click(function () { $('.zoom').click(function () {
var imageUrl = $(this).attr('src'); var imageUrl = $(this).attr('src');

151
Views/Portale/VT_Page3.cshtml
View File

@ -1,8 +1,63 @@
 @{ @{
Layout = "~/Views/Shared/_LayoutAreaRiservata.cshtml"; Layout = "~/Views/Shared/_LayoutAreaRiservata.cshtml";
ViewData["Title"] = "Task Manager"; ViewData["Title"] = "Task Manager";
} }
<!-- CSS lightbox -->
<style>
.lightbox {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
}
/* .lightbox img {
max-width: 90%;
max-height: 80%;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
animation: fadeIn 0.3s ease;
} */
.lightbox img {
width:1200px;
height: auto; /* mantiene proporzioni */
border-radius: 10px;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
animation: fadeIn 0.3s ease;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 40px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
@@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.lightbox-img {
cursor: pointer;
transition: transform 0.2s;
}
.lightbox-img:hover {
transform: scale(1.05);
}
</style>
<div class="agy-project-wrapper agy-project-page-wrapper"> <div class="agy-project-wrapper agy-project-page-wrapper">
<div class="container" style="width:100%; text-align:justify"> <div class="container" style="width:100%; text-align:justify">
<div> <div>
@ -10,7 +65,7 @@
<br /> <br />
<div class="agy-about-img relative"> <div class="agy-about-img relative">
<div class=""> <div class="">
<img src="~/assets/images/pro1.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro1.png" alt="Virtual Task App" style="width:50%;height:50%;" class="lightbox-img" />
</div> </div>
</div> </div>
</div> </div>
@ -25,33 +80,15 @@
<br /> <br />
<p> <p>
<ul> <ul>
<li> <li>A. Gestione anagrafica IMPIANTO con dati tecnici ed eventuale composizione specifica componenti.</li>
A. Gestione anagrafica IMPIANTO con dati tecnici ed eventuale composizione specifica componenti. <li>B. Gestione Manutenzioni programmate previste per l'IMPIANTO.</li>
</li> <li>C. Gestione Contratti con specifica degli impianti, calcolo delle rate e relativa fatturazione.</li>
<li> <li>D. Gestione Commesse di lavoro con aggancio all'analitica standard.</li>
B. Gestione Manutenzioni programmate previste per l'IMPIANTO. <li>E. Completa gestione delle chiamate di intervento, dall'inserimento alla sua assegnazione a tecnico e consuntivazione.</li>
</li> <li>F. Gestione RAPPORTINI DI INTERVENTO come consuntivi tecnici siano essi legati a manutenzioni, commesse o chiamate.</li>
<li> <li>G. Fatturazione canoni dei contratti.</li>
C. Gestione Contratti con specifica degli impianti, calcolo delle rate e relativa fatturazione. <li>H. Fatturazione rapportini di intervento.</li>
</li> <li>I. Fatturazione commesse ad avanzamento lavoro.</li>
<li>
D. Gestione Commesse di lavoro con aggancio all'analitica standard.
</li>
<li>
E. Completa gestione delle chiamate di intervento, dall'inserimento alla sua assegnazione a tecnico e consuntivazione.
</li>
<li>
F. Gestione RAPPORTINI DI INTERVENTO come consuntivi tecnici siano essi legati a manutenzioni, commesse o chiamate.
</li>
<li>
G. Fatturazione canoni dei contratti.
</li>
<li>
H. Fatturazione rapportini di intervento.
</li>
<li>
I. Fatturazione commesse ad avanzamento lavoro.
</li>
</ul> </ul>
</p> </p>
</div> </div>
@ -62,46 +99,38 @@
<br /> <br />
<div class="agy-about-img relative"> <div class="agy-about-img relative">
<div class=""> <div class="">
<img src="~/assets/images/pro2.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro2.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
</div> </div>
</div> </div>
</div> </div>
<br /> <br />
<div class="container" style="width:100%; text-align:justify"> <div class="container" style="width:100%; text-align:justify">
<p> <p><h4>Cruscotto Operativo Chiamate</h4></p>
<h4>
Cruscotto Operativo Chiamate
</h4>
</p>
<br /> <br />
<div class="agy-about-img relative"> <div class="agy-about-img relative">
<div class=""> <div class="">
<img src="~/assets/images/pro3.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro3.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
<img src="~/assets/images/pro4.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro4.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
</div> </div>
</div> </div>
</div> </div>
<br /> <br />
<div class="container" style="width:100%; text-align:justify"> <div class="container" style="width:100%; text-align:justify">
<p> <p><h4>Gestione Rapportini</h4></p>
<h4>
Gestione Rapportini
</h4>
</p>
<br /> <br />
<p>Dettaglio rapportini</p> <p>Dettaglio rapportini</p>
<br /> <br />
<div class="agy-about-img relative"> <div class="agy-about-img relative">
<div class=""> <div class="">
<img src="~/assets/images/pro5.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro5.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
<img src="~/assets/images/pro6.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro6.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
<img src="~/assets/images/pro7.png" alt="Virtual Task App" style="width:55%;height:55%;" /> <img src="~/assets/images/pro7.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
</div> </div>
</div> </div>
</div> </div>
<div class="container" style="width:100%; text-align:justify"> <div class="container" style="width:100%; text-align:justify">
<p> <p>
Il Polo Informatico garantisce comunque la possibilità di potere customizzare tale App secondo le esigenze del cliente, modificando loghi, layout e colori ma anche delineando Il Polo Informatico garantisce comunque la possibilità di potere customizzare tale App secondo le esigenze del cliente, modificando loghi, layout e colori ma anche delineando
nuovi possibili flussi e/o implementando nuove funzionalità. nuovi possibili flussi e/o implementando nuove funzionalità.
Infine Vuoi aggiungere delle funzionalità? Le nostre app per la gestione dei clienti sono <b>totalmente personalizzabili</b> per offrire un’esperienza di utilizzo unica. Infine Vuoi aggiungere delle funzionalità? Le nostre app per la gestione dei clienti sono <b>totalmente personalizzabili</b> per offrire un’esperienza di utilizzo unica.
</p> </p>
@ -109,3 +138,33 @@
</div> </div>
</div> </div>
<!-- Lightbox HTML -->
<div class="lightbox" id="lightbox">
<span class="close" id="lightbox-close">&times;</span>
<img id="lightbox-img" src="" alt="Anteprima immagine">
</div>
@section Scripts {
<script>
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const closeBtn = document.getElementById('lightbox-close');
document.querySelectorAll('.lightbox-img').forEach(img => {
img.addEventListener('click', () => {
lightboxImg.src = img.src;
lightbox.style.display = 'flex';
});
});
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
});
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
}
});
</script>
}

32
Views/Rapp_New/ShowImage.cshtml
View File

@ -5,15 +5,25 @@
<h2>@ViewData["Title"]</h2> <h2>@ViewData["Title"]</h2>
@if (!string.IsNullOrEmpty(fileName))
{ <div class="agy-project-wrapper agy-project-page-wrapper">
<div> <div class="container">
<img src="@Url.Action("GetImage", "Rapp_New", new { filePath = fileName })" <div class="row">
alt="Immagine: @fileName" <div class="col-md-4">
style="max-width:600px; height:auto; border:1px solid #ccc;" /> @if (!string.IsNullOrEmpty(fileName))
{
<div>
<img src="@Url.Action("GetImage", "Rapp_New", new { filePath = fileName })"
alt="Immagine: @fileName"
style="max-width:600px; height:auto; border:1px solid #ccc;" />
</div>
}
else
{
<p>Nessuna immagine specificata.</p>
}
</div>
</div>
</div> </div>
} </div>
else
{
<p>Nessuna immagine specificata.</p>
}