Questo é l’esempio di una descrizione
jQuery(document).ready(function($) {
var totalImages = $('.galleria-link').length; // Numero totale di immagini
var currentIndex = 0; // Indice dell'immagine attuale
// Funzione per aprire l'immagine ingrandita
function openImage(index) {
var link = $('.galleria-link[data-index="' + index + '"]');
var imgSrc = link.attr('href');
var imgAlt = link.children('img').attr('alt');
var descrizione = link.data('descrizione');
// Crea o aggiorna il popup dell'immagine
var overlay = $('<div class="galleria-overlay"></div>');
var img = $('<img src="' + imgSrc + '" alt="' + imgAlt + '" class="galleria-img">');
var descrizioneElem = $('<p class="galleria-overlay-descrizione">' + descrizione + '</p>');
// Aggiungi frecce di navigazione
var prevArrow = $('<span class="galleria-arrow galleria-prev">«</span>');
var nextArrow = $('<span class="galleria-arrow galleria-next">»</span>');
overlay.append(prevArrow).append(img).append(nextArrow).append(descrizioneElem);
$('body').append(overlay);
// Aggiungi animazione
overlay.hide().fadeIn(500);
// Funzionalità per la freccia successiva
$('.galleria-next').click(function() {
currentIndex = (currentIndex + 1) % totalImages; // Incrementa l'indice, torna a 0 se è l'ultimo
$('.galleria-overlay').remove(); // Rimuovi l'overlay precedente
openImage(currentIndex); // Mostra la prossima immagine
});
// Funzionalità per la freccia precedente
$('.galleria-prev').click(function() {
currentIndex = (currentIndex - 1 + totalImages) % totalImages; // Decrementa l'indice, torna all'ultima immagine se è la prima
$('.galleria-overlay').remove(); // Rimuovi l'overlay precedente
openImage(currentIndex); // Mostra l'immagine precedente
});
// Chiudi il popup cliccando su overlay
overlay.click(function() {
$(this).fadeOut(500, function() {
$(this).remove();
});
});
}
// Quando una miniatura viene cliccata, apri l'immagine ingrandita
$('.galleria-link').click(function(event) {
event.preventDefault();
currentIndex = parseInt($(this).data('index')); // Recupera l'indice della miniatura cliccata
openImage(currentIndex); // Apri l'immagine ingrandita
});
});