Aggiunta classe lightbox in immagini portale (VT_page2 e VT_page3)
Impaginazione pagina foto
This commit is contained in:
michele
parent
afa133a8f2
commit
fb49116bba
@ -4,6 +4,68 @@
|
||||
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="container" style="width:100%; text-align:justify">
|
||||
<div>
|
||||
@ -30,8 +92,8 @@
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="agy-about-img relative">
|
||||
<div class="">
|
||||
<img src="~/assets/images/app1.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%;" />
|
||||
<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%;" class="lightbox-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,7 +122,7 @@
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<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 style="width:70%">
|
||||
<ol>
|
||||
@ -124,8 +186,8 @@
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="agy-about-img relative">
|
||||
<div class="">
|
||||
<img src="~/assets/images/app5.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%;" />
|
||||
<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%;" class="lightbox-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -164,6 +226,37 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox HTML -->
|
||||
<div class="lightbox" id="lightbox">
|
||||
<span class="close" id="lightbox-close">×</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>
|
||||
$('.zoom').click(function () {
|
||||
var imageUrl = $(this).attr('src');
|
||||
|
||||
@ -1,8 +1,63 @@
|
||||
@{
|
||||
@{
|
||||
Layout = "~/Views/Shared/_LayoutAreaRiservata.cshtml";
|
||||
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="container" style="width:100%; text-align:justify">
|
||||
<div>
|
||||
@ -10,7 +65,7 @@
|
||||
<br />
|
||||
<div class="agy-about-img relative">
|
||||
<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>
|
||||
@ -25,33 +80,15 @@
|
||||
<br />
|
||||
<p>
|
||||
<ul>
|
||||
<li>
|
||||
A. Gestione anagrafica IMPIANTO con dati tecnici ed eventuale composizione specifica componenti.
|
||||
</li>
|
||||
<li>
|
||||
B. Gestione Manutenzioni programmate previste per l'IMPIANTO.
|
||||
</li>
|
||||
<li>
|
||||
C. Gestione Contratti con specifica degli impianti, calcolo delle rate e relativa fatturazione.
|
||||
</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>
|
||||
<li>A. Gestione anagrafica IMPIANTO con dati tecnici ed eventuale composizione specifica componenti.</li>
|
||||
<li>B. Gestione Manutenzioni programmate previste per l'IMPIANTO.</li>
|
||||
<li>C. Gestione Contratti con specifica degli impianti, calcolo delle rate e relativa fatturazione.</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>
|
||||
</p>
|
||||
</div>
|
||||
@ -62,46 +99,38 @@
|
||||
<br />
|
||||
<div class="agy-about-img relative">
|
||||
<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>
|
||||
<br />
|
||||
<div class="container" style="width:100%; text-align:justify">
|
||||
<p>
|
||||
<h4>
|
||||
Cruscotto Operativo Chiamate
|
||||
</h4>
|
||||
</p>
|
||||
<p><h4>Cruscotto Operativo Chiamate</h4></p>
|
||||
<br />
|
||||
<div class="agy-about-img relative">
|
||||
<div class="">
|
||||
<img src="~/assets/images/pro3.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%;" />
|
||||
<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%;" class="lightbox-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="container" style="width:100%; text-align:justify">
|
||||
<p>
|
||||
<h4>
|
||||
Gestione Rapportini
|
||||
</h4>
|
||||
</p>
|
||||
<p><h4>Gestione Rapportini</h4></p>
|
||||
<br />
|
||||
<p>Dettaglio rapportini</p>
|
||||
<br />
|
||||
<div class="agy-about-img relative">
|
||||
<div class="">
|
||||
<img src="~/assets/images/pro5.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%;" />
|
||||
<img src="~/assets/images/pro7.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%;" class="lightbox-img" />
|
||||
<img src="~/assets/images/pro7.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" style="width:100%; text-align:justify">
|
||||
<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à.
|
||||
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>
|
||||
@ -109,3 +138,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox HTML -->
|
||||
<div class="lightbox" id="lightbox">
|
||||
<span class="close" id="lightbox-close">×</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>
|
||||
}
|
||||
|
||||
@ -5,15 +5,25 @@
|
||||
|
||||
<h2>@ViewData["Title"]</h2>
|
||||
|
||||
@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 class="agy-project-wrapper agy-project-page-wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
@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>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>Nessuna immagine specificata.</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user